vue指令

1.常用内置指令

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 }

<div id="example">
  <p ref="content">abcdefg</p>
  <p v-text="msg"></p>    <!--p.textContent=msg-->
  <p v-html="msg"></p>    <!--p.innerHtml=msg-->
  <button @click="hint">提示</button>
  <p v-cloak>{{msg}}</p>  <!--解析msg之前有[v-cloak]，解析之后无[v-cloak]指令-->
</div>

<scrip type="text/javascript" src="../js/vue.js"></script>
<scrip type="text/javascript">
  alert("------")   //解析msg数据之前弹窗
  new Vue({
    el: "#example",
    data: {
      msg: "message",
    },
    methods: {
      hint () {
        alert(this.$refs.content.textContent)
      }
    }

  })
</script>

2.自定义指令

1. 注册全局指令
  Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toupperCase()
  })
2. 注册局部指令
  directives : {
    'my-directive' : {
        bind (el, binding) {
          el.innerHTML = binding.value.toupperCase()
        }
    }
  }
3. 使用指令
  v-my-directive='xxx'

<!--
需求: 自定义2个指令
  1. 功能类型于v-text, 但转换为全大写 v-upper-text
  2. 功能类型于v-text, 但转换为全小写 v-lower-text
-->

<div id="test1">
  <p v-upper-text="msg1"></p>
  <p v-lower-text="msg1"></p>
</div>

<div id="test2">
  <p v-upper-text="msg2"></p>
  <p v-lower-text="msg2"></p>
</div>

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

  new Vue({
    el: "#test1",
    data: {
      msg1: "NBA I Love This Game!"
    },
    directives: { //注册局部指令：只在当前vm管理范围内有效
      "lower-text"(el,binding){   //es6写法   原本写法："lower-text": function(el,binding){}
        el.textContent = binding.value.toLowerCase()
      }
    }
  })

  new Vue({
    el: "#test2",
    data: {
      msg2: "Just Do It!"
    }
  })
</script>