vue.js 其他指令
Posted ---空白---
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js 其他指令相关的知识，希望对你有一定的参考价值。
1.ref标识
通过给元素标签设定ref属性，根据他的属性值来访问这个元素
语法：this.$refs.属性值
//为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}},例如
<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:"今天周末"
},
methods:{
}
})
</script>因为两个script标签都在body标签之后，在解析body里面的{{msg}}时将当作普通字符串来处理，就会在页面中展示{{msg}}。
之后script里面的代码将{{msg}}替换成对应的值（今天周末），两次渲染之间存在时间间隔，会有闪现的现象。如果在vue实例化之前加入alert弹窗中断，就可以看到这个变化了。
解决办法一：将引入vue的script标签放在body标签的前面，例如：
<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();
})
var vm = new Vue({
el:"#app",
data:{
msg:"Hello World"
}
})(2)注册局部
组件中也接受一个 directives 的选项
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：
<!-- 自动获取焦点 -->
<input type="text" v-focus>(3)如果注册的自定义指令名含有 - 等字符，可以用 ‘‘ 包裹起来
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()
}
})以上是关于vue.js 其他指令的主要内容，如果未能解决你的问题，请参考以下文章