Vue内置指令

1、v-bind：响应并更新DOM特性；例如：v-bind:href  v-bind:class  v-bind:title  等等

主要用法是绑定属性，动态更新HTML元素上的属性；

1 2 3 4 5 6 7 8 9 10 11

"url" rel="external nofollow" rel="external nofollow" >... "url" rel="external nofollow" rel="external nofollow" >... 'title'>标题 var app = new Vue({   el: '#app',   data: {     url: 'www.baidu.com', 　　　　title: 'bind'   }, }）

2、v-on：用于监听DOM事件； 例如：v-on:click  v-on:keyup

顺带讲一下方法与事件

2.1 @click 的表达式可以直接使用JavaScript 语句，也可以是一个在Vue 实例中methods 选项内的函数名，可以在方法中传递参数

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

"doSomething">... "doSomething()">...　　　　//是一个方法名   if='show'>一段文本 "show=false">点击隐藏文本　　//直接是一个内联的语句 "count++">Add 1 var app = new Vue({   el: '#app', 　　data:{ 　　　　show: true， 　　　　counter： 0 　　},   methods: {     doSomething: function(){       console.log(this.title);     },   } }）

2.2方法与事件：

Vue 提供了一个特殊变量$event ，用于访问原生DOM 事件，可以阻止事件冒泡或者阻止链接打开

写一个阻止冒泡的例子：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

"stopClick1('stop1',$event)">        "stopClick2('stop2',$event)">          "stopClick3('stop3',$event)">阻止冒泡             　　   methods:{     stopClick3: function(message, event){       console.log(message);       event.stopPropagation();  //阻止冒泡     },     stopClick2: function(message, event){       console.log(message);     },     stopClick1: function(message, event){       console.log(message);     } }

2.3修饰符：

在＠绑定的事件后加小圆点“．”，再跟一个后缀来使用修饰符。

上面的阻止冒泡事件，可以直接用户修饰符的方式写为：

1	"stopClick3('stop3')">阻止冒泡 　　//不用通过$event事件再来写了

常用的一些修饰符有：

.stop

.prevent

.capture

 .self

 .once

1 2 3 4 5 6 7 8 9 10

＜ ！一阻止单击事件冒泡一〉 〈！一修饰符可以串联一〉 〈！一添加事件侦听器时使用事件捕获模式一〉 ... 〈！一只当事件在该元素本身（而不是子元素） 触发时触发回调一〉 ... ＜ ！一只触发一次，组件同样适用一〉 ...

在表单元素上监昕键盘事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法：

1 2	＜ ！一只有在keyCode 是13 时调用vm.submit()一〉

3、v-model：数据双向绑定；用于表单输入等；例如：< input v-model= "message">

4、v-show：条件渲染指令，为DOM设置css的style属性(不能在