vue.js 其余指令

时间 2019-11-10

原文原文链接

1.ref标识

经过给元素标签设定ref属性，根据他的属性值来访问这个元素
语法：this.$refs.属性值css

//为p标签设置ref属性
<div id="app">
    <p ref="p1">期待你脚踏祥云</p>
    <button @click="test">点我</button>
</div>

//根据ref属性值来访问这个元素
methods: {
    test() {
        console.log(this.$refs.p1.innerText)
    }
}

2.v-cloak

vue会将模版中的变量名渲染成对应的值，可是若是vue的模版渲染未执行时，{{msg}}这种语法就会直接在页面输出{{msg}},例如html

<body>
    <div id="app">
        <p>{{msg}}</p>        
    </div>
</body>
</html>
<script src="vue2.6.10.js"></script>
<script>
    alert('弹窗中断vue渲染')
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"今天周末"
        }
    })
</script>

由于两个script标签都在body标签以后，在解析body里面的{{msg}}时将看成普通字符串来处理，就会在页面中展现{{msg}}。
以后script里面的代码将{{msg}}替换成对应的值（今天周末），两次渲染之间存在时间间隔，会有闪现的现象。若是在vue实例化以前加入alert弹窗中断，就能够明显的看到这个变化了。vue

解决办法一：将引入vue的script标签放在body标签的前面，例如：app

<head>
    <meta charset="UTF-8">
    <script src="vue2.6.10.js"></script>
    <title>Vue测试</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>        
    </div>
</body>

解决办法二：为标签设置v-cloak属性
原理：vue对模版进行解析以前，vue的指令是存在标签里面的，例如v-html/v-cloak等。当vue对模版渲染完毕后会移除元素标签内vue指令，能够利用这个特性，结合css的属性选择器来隐藏未解析的标签函数

//css属性选择器
<style>
    [v-cloak]{
        display: none;
    }
</style>

//为元素添加v-cloak属性，当元素未渲染时处于隐藏状态，渲染完毕后就正常展现
<div id="app">
    <p v-cloak>{{msg}}</p>        
</div>

3.自定义指令

(1)全局注册
语法：Vue.directive(指令名称,回调函数)
回调函数有2个参数 el和binding
el:指令所绑定的元素，能够用来直接操做 DOM
binding：包含指令相关信息的对象,binding.value就是指令绑定的值测试

Vue.directive('upper-text',function(el,binding){
    el.innerText = binding.value.toUpperCase();
})

(2)局部注册：只能在该组件中使用
组件中接受一个 directives 的选项this

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

而后你能够在模板中任何元素上使用新的 v-focus 属性，以下：code

<!-- 自动获取焦点 -->
<input type="text" v-focus>

(3)若是注册的自定义指令名含有 - 等字符，能够用 '' 包裹起来htm

directives:{
    'lower-text':function(el,binding){
        el.innerText = binding.value.toLowerCase();
    }
}

(4)钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不必定已被插入文档中)。
update：所在组件的 VNode 更新时调用，可是可能发生在其子 VNode 更新以前。指令的值可能发生了改变，也可能没有。对象

Vue.directive('focus', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
        // 聚焦元素
        el.focus()
    }
})