2.0 vue内置指令与自定义指令

一、概述

模板在解析之前指令是存在的，但是解析完成以后就不存在了。

1.1 常用内置指令

1) v:text : 更新元素的 textContent

2) v-html : 更新元素的 innerHTML

3) v-if : 如果为 true, 当前标签才会输出到页

4) v-else: 如果为 false, 当前标签才会输出到页面

5) v-show : 通过控制 display 样式来控制显示/隐藏

6) v-for : 遍历数组/对象，提供三个参数(value, key, index)，eg: v-for="(item, key, index) in items"  :key="item.id"，当我们在使用v-for进行渲染时，

　　       尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值，这样在当前渲染元素的DOM结构发生变化时，能够单独响应该元素而不

　　　　触发所有元素的渲染。参考：【v-for 响应式key, index及item.id参数对:key值造成差异】

7) v-on : 绑定事件监听, 一般简写为@

8) v-bind : 强制绑定解析表达式, 可以省略 v-bind

9) v-model : 双向数据绑定

10) ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象

11) v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

 <style>
    <!--样式的属性选择器-->
    /*属性选择器：在解析之前能匹配到这个属性，所以是隐藏的，但是解析以后这个指令就没有了，所以显示*/
    [v-cloak] { display: none }
  </style>
<div id="example">
  <p v-cloak>{{content}}</p>
  <p v-text="content"></p>   <!--p.textContent = content-->
  <p v-html="content"></p>  <!--p.innerHTML = content-->
  <p ref="msg">abcd</p>
  <button @click="hint">提示</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#example',
    data: {
      content: '<a href="http://www.baidu.com">百度一下</a>'
    },
    methods: {
      hint () {
        //  获取p标签里面的内容
        alert(this.$refs.msg.innerHTML)
      }
    }
  })
</script>

1.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, 但转换为全大写
　　2. 功能类型于v-text, 但转换为全小写

<div id="test">
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
</div>

<div id="test2">
  <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">
  // 注册一个全局指令
  // el: 指令所在的标签对象
  // binding: 包含指令相关数据的容器对象
  Vue.directive('upper-text', function (el, binding) {
    console.log(el, binding)
    el.textContent = binding.value.toUpperCase()
  })

  new Vue({
    el: '#test',
    data: {
      msg: "I Like You"
    },
    // 注册局部指令：只在当前vm管理范围内有效
    directives: {
      // 'lower-text'(el, binding) { //ECMAScript6 的简洁语法
        'lower-text': function (el, binding) {
            console.log(el, binding)
        el.textContent = binding.value.toLowerCase()
      }
    }
  })

  new Vue({
    el: '#test2',
    data: {
      msg: "I Like You Too"
    }
  })
</script>