1.v-cloak指令

<style type="text/css">
      [v-cloak] {
          display: none;
      }
</style>

<p v-cloak>{{age}}</p>

这个指令是用来提高用户体验的，因为有一次我无意间疯狂刷新发现Mustache 能显示出来的。

然后就去查了一下关于这个的问题，vue的作者是有考虑到这一点的。提供了v-cloak这个指令配合display:none;就可以完美解决这个问题

2.Vue.nextTick()，vm.$nextTick()

官方文档的解释是：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

后半句很重要，我有一次在vue里面使用jQuery操作DOM的时候。发现居然没作用，原因就是jQuery获取的DOM是数据更新之前的DOM，数据更新后DOM也重新更新了。所以就没有效果出来。

来看个示例

html代码

<button @click="show">点击改变count</button>
<p class="span" v-for="i in count">测试Vue.nextTick()</p>

js代码

<script type="text/javascript">
        const vm = new Vue({
            el: '#app',
            data: {
                age: 18,
                count: 1
            },
            methods: {
                show() {
                    this.count++;
                    $('.span').css('color', 'red');
                }
            },
        })
</script>

初始效果

点击一次之后

这里我们发现，只有一个p标签变红了。因为jQuery获取的DOM是数据更新之前的DOM，就导致了这样的情况。

然后我们改一下代码，把jQuery对DOM操作的代码写到this.$nextTick()这方法里面。

show() {
     this.count++;
     this.$nextTick(function(){
          $('.span').css('color', 'red');
     })
}

我们发现全部变了颜色，也就是说jQuery操作的DOM是数据更新后的DOM了。这样我们就可以愉快的写jQuery代码了。

不过Vue的宗旨是数据驱动视图，我们还是按照它的规矩来吧。除非没别的办法了，再来直接进行DOM操作。

Vue.nextTick()可以作为一个Promise使用，它就是一个异步操作

Vue.nextTick()
  .then(function () {
    // DOM 更新了需要对DOM的操作写这里
})

3.Vue.directive()，自定义指令

官网的介绍：

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

看了一下，感觉有可能会用到，就去看了一下它的用法，如下：

js代码

// 注册全局指令
//el: 指令所绑定的元素，可以用来直接操作 DOM 。
//binding： 包含指令相关信息数据的对象
Vue.directive('test',function(el,binding){//test就是指令名使用：v-test
    // console.log(el,binding)
    el.innerText = binding.value.toUpperCase();
});

const vm = new Vue({
     el: '#app',
     data: {
         msg:'I Love You'
     },
})

html代码

<p v-test='msg'></p>

这里我们给绑定指令的节点设置了innerText，并利用toUpperCase()把字母全部转成了大写。效果如下：

还可以注册局部指令

js代码

const vm = new Vue({
    el: '#app',
     data: {
        msg:'I Love You'
    },
    directives: {//注意这里directives，后面多了个s
       'test1':function(el,binding){// key:value的格式
             //el: 指令所绑定的元素，可以用来直接操作 DOM 。
             //binding： 包含指令相关信息数据的对象
             el.innerText = binding.value.toLowerCase();
        },  
    },
})

html代码

<p v-test1='msg'></p>

效果如下：