vue内置指令详解

指令 (Directives) 是带有 v- 前缀的特殊属性， 职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

内置指令

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

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

<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a><!-- 缩写 --><a :href="url" rel="external nofollow" rel="external nofollow" >...</a><div :title='title'>标题</div>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 选项内的函数名，可以在方法中传递参数

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

2.2方法与事件：

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

写一个阻止冒泡的例子：

  <div @click="stopClick1('stop1',$event)">      <div @click="stopClick2('stop2',$event)">        <div @click="stopClick3('stop3',$event)">阻止冒泡</div>      </div>    </div>　　</div>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修饰符：

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

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

<div @click.stop="stopClick3('stop3')">阻止冒泡</div>　　//不用通过$event事件再来写了

常用的一些修饰符有：

• .stop

• .prevent

• .capture

• .self

• .once

＜ ！一阻止单击事件冒泡一〉<a @click.stop=”handle "></a>〈！一修饰符可以串联一〉<a @click.stop.prevent=” handle ” ></a>〈！一添加事件侦听器时使用事件捕获模式一〉<div @click . capture=”handle ”> ... </div>〈！一只当事件在该元素本身（而不是子元素） 触发时触发回调一〉<div @click.self=” handle ”> ... </div>＜ ！一只触发一次，组件同样适用一〉<div @click.once=” handle ”> ... </div>