Vue.js常用指令大全

Vue.js的指令是以 v- 开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。 

一、内置指令

v:text :  //更新元素的 textContent
v-html :  //更新元素的 innerHTML
v-if :    //如果为true, 当前标签才会输出到页面
v-else:   //如果为false, 当前标签才会输出到页面
v-show :  //通过控制display样式来控制显示/隐藏
v-for :   //遍历数组/对象
v-on :    //绑定事件监听, 一般简写为@
v-bind :  //强制绑定解析表达式, 可以省略v-bind
v-model : //双向数据绑定
ref :     //为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : //使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

 二、自定义指令

1. 注册全局指令 

<div id="test">
  <p v-upper-text="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
// 注册一个全局指令
// el: 指令所在的标签对象
// binding: 包含指令相关数据的容器对象
Vue.directive('upper-text', function(el, binding){
    //el.innerHTML = binding.value.toupperCase()
    el.textContent = binding.value.toUpperCase()
})
</script>

 2. 注册局部指令

<div id="test">
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
    el: '#test',
    data: {
      msg: "I Like You"
    },
    // 注册局部指令
    directives: {
      'lower-text'(el, binding) {
        console.log(el, binding)
        el.innerHTML = binding.value.toupperCase()
      }
    }
})
</script>

 3. 使用指令

<div id="test">
  <!--（自定义全局指令）转换为全大写-->
  <p v-upper-text="msg"></p>
  <!--（自定义局部指令）转换为全小写-->
  <p v-lower-text="msg"></p>
</div>