vue指令及自定义指令

自带的指令：

1. 事件修饰符（click、submit等）：适合所有的事件

<a href=”#” v-on:click.prevent=’handler’> ：点击时执行handler函数，并且阻止事件的默认行为

@click.prevent ：阻止事件的默认行为

@click.stop ：停止冒泡

@click.self：仅在当前元素上触发

@click.once：仅触发一次

2.键值修饰符（keyup,keydown）：应用在按键事件上

<input type=”search” v-on:keyup.enter = ‘hanlder’>bb</a>

.enter ：回车

.esc：取消键

.del：删除键

.space：空格

.tab : tab键

.delete  .up  .down  .left  .right  

3.简写形式（@）：

<button v-on:click=’handler’>click</button>

------->  <button @click=’handler’>click</button>

4.、传参数：handler($event)

调用event里的preventDefault ：阻止事件的默认行为；

event.target：表示当前绑定的DOM

1. 事件绑定v-on：（指令）  注意：vue不能直接渲染body或HTML，需要创建一个元素

<div>  ---->必须写一个父级对象

               <button  v-on:click=’handler’>clickMe</button>

</div>

           <button @click=’show = !show’>clickMe</button>

     2.双向数据绑定（v-model）： 应用于表单元素，二者相互影响

     3.属性绑定（指令 v-bind或:）：应用于自定义属性的绑定，在父子组件传值中非常有效

<div v-bind:title=’’></div>

简写形式：

<div :title=’’></div>

     4.循环渲染：（v-for=’ (item,index)  in  students’）

      <ul id="example-1">

          <li v-for=“(item,index) in items">

          {{ item.message }}

          </li>

    </ul>

5.v-if与v-show区别：

v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点

v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

1）只有满足条件的结果才能被渲染，频繁切换数据使用该方法会导致内存一定的浪费

<div v-if=’ ’></div>

<div v-else-if=’ ’></div>

<div v-else></div>

2）使用display动态显示与隐藏，带有v-show的元素始终会被渲染，适用于需要非常频繁地切换元素

<div v-show=’ ’></div>

 

自定义指令

1. 自定义指令：代码复用的主要形式和抽象是组件，但任然需要对纯DOM元素进行底层操作，此时则需要自定义指令。

1. 全局注册：vue.directive(test,options)
2. 局部注册：

new Vue({

directives:{

‘test’:{

bind:function(el,binding){

//el->dom元素，binding->返回一个对象，包含指令的相关信息

}

}

}

})

<div v-test></div>