Vue.js(三)：指令 | 易学教程

指令

指令是带有 v- 前缀的特殊 HTML 标签属性。指令的职责，就是当其属性值改变时，将某些行为应用到 DOM 上。

概述

指令是扩展和复用代码的一种方式。

🥛v-text

可以用属性值设置元素的内容：

<span v-text="value"></span>

当 value 修改时，v-text 会修改当前所在元素的内容，这就是 v-text 的某些应用到 DOM 的行为。

🍺 v-bind

🌰：把 value 和 url 的 href 属性绑定起来：

<div id="app">
  <a v-bind:href="value">url</a>
</div>
<script>
  var a= new Vue({
    el: '#app',
    data(){
      return {
        value:'http://t.cn/#42'
      }
    }
  })
</script>

指令 v-bind 会在绑定的属性值修改时，同步修改由参数（href）指定的属性。

指令的格式：

指令能接受一个参数，在指令后以 “:” 指明。
指令能接受一个或者多个修饰符，是以 “.” 指明的特殊后缀。
指令能接受一个单一JavaScript表达式，最常见的表达式就是一个属性值。

🍾 v-on

可以声明式地把 Vue 实例方法挂接到 DOM 标签的事件上，🌰：

<div id="app" @click="t1" >
    <a href="http://t.cn" v-on:click.prevent.stop="t2">t.cn</a>
</div>
<script>
var app = new Vue({
  methods: {
    t1 () {console.log("t1")},
    t2 () {console.log("t2")},
  }
})
app.$mount('#app')
</script>

此案例中，v-on 对照我们的格式：

接受一个参数。参数在这里为 click。

接受一个或者多个修饰符。这里的修饰符为 prevent、stop。

接受一个表达式。这里的表达式为 t2。

此指令的语义就是把 onclick 事件绑定到 t2 方法上。特别对此处的修饰符做具体的说明：

修饰符 prevent 等同于执行 preventDefault 方式，意思是阻止默认行为，这里默认行为是 URL 被点击后会在浏览器内打开此 URL。

修饰符 stop 等同于执行 stopPropagation，意思是停止扩散，这里停止的是向上一级元素的扩散，因此 div 内的 t1 事件并不会被执行。

简写

Vue.js为两个最为常用的指令提供了特别的缩写：

v-bind：

<a v-bind:href="url"></a> 简写为 <a :href="url"></a>
v-on：
<a v-on:click="doSomething"></a> 简写为 <a @click="doSomething"></a>

自定义指令

指令允许当它的值改变时对元素应用任何 DOM 操作。

🌰：
做一个指令 v-hidden，当值改变时，更新元素的 style 值，切换它的可见性。

<div id="app">
  <button @click="f=!f">toggle</button>
  <input v-hidden="f">
</div>
<script>
Vue.directive('hidden', {
  update:function(el,binding){
    el.style.display = binding.value?'none':'inline'
  }
})
new Vue(
  {
    el:'#app',
    data(){
      return{f:false}
    }
  })
</script>

通过 Vue.directive(name,options) 注册一个指令。name 为指令名，options 为指令选项，其中可以加入钩子函数，比如 update，还有更多的钩子函数。

使用指令时，必须在名字前加上前缀 v，比如 v-hidden。

所有的钩子函数都有如下的参数：

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
- name：指令名，不包括 v- 前缀
- value：指令的绑定值
- oldValue：指令绑定的前一个值
- expression：绑定值的未求值形式
- arg：传给指令的参数
- modifiers：包含修饰符的对象。比如 v-my-directive.foo.bar, 修饰符对象是 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点。

更多的钩子函数：

bind：指令第一次绑定到元素时调用。
inserted：指令所属元素插入父节点时调用。
update：指令所属元素绑定值变化时更新。
componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
unbind：指令与元素解绑时调用。

指令可局部化注册到特定组件上，只要在组件内使用：

directives: {
  focus: {
    // 指令的定义
  }
}

还是以 v-hidden 为 🌰：

<div id="app">
  <comp></comp>
</div>
<script>
Vue.directive('hidden', {
  update:function(el,binding){
    el.style.display = binding.value?'none':'inline'
  }
})

Vue.component('comp', {
  template:'<div><button @click="hate=!hate">toggle</button><div v-hidd="hate">{{msg}}</div></div>',
  directives:{
    hidd:{
       update:function(el,binding){
         console.log(binding.value)
         el.style.display = binding.value?'none':'block'
       }
    }
  },
  data(){
    return{hate:false,msg:1}
  }
})

new Vue({
  el:'#app',
  data(){
    return{f:false}
  }
})
</script>

🔗：

来源：CSDN

作者：莫亓

链接：https://blog.csdn.net/Bule_daze/article/details/103811709

标签

指令周期

app