上一篇文章跟大家分享了Vue笔记上半部分,这篇文章接着跟大家分享。最近学习Vue越来越顺利了,今天接着学习,接着记录。

首先,来学习下常用的v-bind属性,它的作用是在属性中使用vue中定义的变量的值。

<div id="div1">

<a v-bind:href="href">百度一下</a><br />

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范围,不能直接使用body

data: { // 页面需要的vue数据

href: "https://www.baidu.com"

}

});

</script>

恩,很简单嘛,那么如果需要显示文本和变量一起怎么办呢?

<div id="div1">

<a v-bind:href="'check.do?id='+id">查看</a>

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范围,不能直接使用body

data: { // 页面需要的vue数据

id: 3

}

});

</script>

原来如此,需要拼接字符串啊,好像v-bind:可以简写为:,我在下个例子中试试。

接下来我试试样式的绑定。

<div id="div1">

<img v-show="checked" :class="{img1:showStyle}" src="img/3.jpg" /><br />

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范围,不能直接使用body

data: { // 页面需要的vue数据

showStyle: false

}

});

</script>

不错,真的可以简写,而且样式的绑定好像跟其他的有点不一样。

那么,事件的绑定呢?

原来是使用v-on来绑定事件操作,而且还可以使用@代替v-on。

<div id="div1">

<input type="button" :value="btnValue" v-on:click="fn1()" @mouseover="fn2()"/>

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范围,不能直接使用body

data: { // 页面需要的vue数据

btnValue: "点击"

},

methods:{ // 页面可使用的vue的函数

fn1: function(){

alert(this.msg);

},

fn2: function(){

this.btnValue = "点击一下";

}

}

});

</script>

好吧,今天就跟大家分享到这里吧。下次再跟大家分享。

菜鸟Vue学习笔记(二)的更多相关文章

  1. vue学习笔记(二)vue的生命周期和钩子函数

    前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...

  2. 菜鸟Vue学习笔记(一)

    我今年刚参加工作,作为一个后台Java开发人员,公司让我开发前端,并且使用Vue框架,我边学习边记录. Vue框架是JS的封装框架,使用了MVVM模式,即model—view—viewmodel模式, ...

  3. Vue学习笔记二:v-cloak,v-text,v-html的使用

    目录 v-cloak:解决插值表达式闪烁问题 安装插件Live Server 右键以HTTP形式运行HTML v-text:以属性方式使用插值表达式 v-cloak和v-text的区别 v-html: ...

  4. VUE 学习笔记 二 生命周期

    1.除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来 var data = { a: 1 } var vm = new Vue({ el: ' ...

  5. VUE学习笔记二

    package.json不可以写注释!!!!!!!!!!初始化:npm init -y 有时候使用 npm i node-sass -D 装不上,这时候,就必须使用  cnpm i node-sass ...

  6. vue学习笔记二:v-if和v-show的区别

    v-if vs v-show v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做—— ...

  7. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  8. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  9. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

随机推荐

  1. idea maven列表有问题的

     idea maven列表有问题的,覆盖   C:\Users\用户名\.IntelliJIdea2017.2\system\Maven\Indices路径大致在这里  文件为 Indices.rar ...

  2. 02.Vue基本代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 【Mac】【环境变量】

    Mac配置环境变量的地方  1./etc/profile   (建议不修改这个文件 )  全局(公有)配置,不管是哪个用户,登录时都会读取该文件.    2./etc/bashrc    (一般在这个 ...

  4. https://localhost:1158/em运行不正常

    1.页面无法打开 一般是由于网站安全问题直接挂掉,可以更换浏览器,如Google Chrome.Fire Fox等.不建议使用IE Google浏览器使用如下, 直接继续 接着以用户sys,密码cha ...

  5. [C#]统计文本文件txt中的行数(快速读取)

    快速统计文本文件中的行数( StreamReader.ReadLine() ): 测试代码如下: //读取txt文件中总行数的方法 public static int requestMethod(St ...

  6. 调用系统命令 os.system()和os.popen()

    Python中os.system和os.popen区别 Python调用Shell,有两种方法:os.system(cmd)或os.popen(cmd)脚本执行过程中的输出内容.实际使用时视需求情况而 ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建属性网格

    jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...

  8. multipath配置详细参考

    1.配置文件结构及位置multipath配置文件/etc/multipath.conf由节(section),子节(sub-section),属性(atribute)和属性值(value)等组成,其结 ...

  9. 短信猫+kannel调试一例

    同事做一短信网关平台,采用kannel软件. 安装正常,配置文件如下: # Vodafone 3G cardgroup = coreadmin-port = 13000admin-password = ...

  10. 给学习Linux系统小白的两三个建议

    前段时间看过一个针对国内Linux使用情况的调研表,有了不少感慨.现在听说过linux,会一点linux基本操作的人多如牛毛,然而真正能用linux做一点事情的确少之又少.无论是公司还是学校,办公基本 ...