vue自定义指令

自定义指令

在main.js中注册全局自定义指令

// 注册全局自定义指令
Vue.directive('rotate',{
  bind:function(){
    //只调用一次，指令第一次绑定到元素时调用
    //这里使用es6语法接收参数，并让元素旋转并改变字体颜色
    let [el,...other] = arguments
    el.onmousemove = function(){
      el.style.color = 'pink'
      el.style.display = 'inline-block'
      el.style.transition = 'all 1s'
      el.style.transform = 'rotateZ(360deg)'
    }
    el.onmouseleave = function(){
      el.style.color = '#000'
      el.style.transform = 'rotateZ(0deg)'
    }
  },
  inserted: function () {
    //被绑定元素插入父节点时调用
  },
  update: function () {
    //所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
    //但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
  },
  componentUpdated: function () {
    //指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  },
  unbind: function () {
    //只调用一次，指令与元素解绑时调用。
  }
})

页面注册局部自定义指令

<script>
export default {
  directives:{
  	rotate:{
	    bind: function (el, binding, vnode) {
		    el.onmousemove = function(){
		      el.style.color = 'pink'
		      el.style.display = 'inline-block'
		      el.style.transition = 'all 1s'
		      el.style.transform = 'rotateZ(360deg)'
		    }
		    el.onmouseleave = function(){
		      el.style.color = '#000'
		      el.style.transform = 'rotateZ(0deg)'
		    }
		  }
  	}
  },
}
</script>

使用

<template>
  <div>
  	 <img  v-rotate src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3036316726,676055399&fm=26&gp=0.jpg" alt="">
  </div>
</template>

常见指令及修饰符

v-text ：更新textContent

v-html ：更新html

v-pre：这个元素和它的子元素编译过程。

<div id="app">
    <span v-pre>{{message}}</span>  //这条语句不进行编译
    <span>{{message}}</span>
</div>

v-cloak：用来保持在元素上直到关联实例结束时进行编译。

<div id="app" v-cloak>
    <div>
        {{message}}
    </div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
</script>
//在页面加载时会闪烁，先显示:
<div>
    {{message}}
</div>
//然后才会编译为：
<div>
    hello world!
</div>

v-once：只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。

<span v-once>This will never change:{{msg}}</span>  //单个元素
<div v-once>//有子元素
    <h1>comment</h1>
    <p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component>  //组件
<ul>
    <li v-for="i in list">{{i}}</li>
</ul>
//上面的例子中，msg,list即使产生改变，也不会重新渲染。

v-if
v-show
v-for指令根据遍历数组来进行渲染
有下面两种遍历形式

<div v-for="(item,index) in items"></div>   //使用in，index是一个可选参数，表示当前项的索引
<div v-for="item of items"></div>   //使用of
//当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号【 ：】

v-model：双向数据绑定。

v-on主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。
简写为：【 @ 】

事件修饰符

• stop 阻止事件继续传播
• prevent 事件不再重载页面
• capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
• self 只当在 event.target 是当前元素自身时触发处理函数
• once 事件将只会触发一次
• passive 告诉浏览器你不想阻止事件的默认行为

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
<!--使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。-->

：
来源: https://www.jianshu.com/p/c4a87e1b4ef7.