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 标签的事件上，🌰：