Vue.js 其他指令
1.ref标识
通过给HTML标签或者组件标签设定ref属性，根据他的属性值来访问这个HTML元素或者组件
语法：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实例渲染HTML模版之前，页面中的{{msg}}这种语法就会原模原样的输出，例如
<body>
<div id="app">
<p>{{msg}}</p>
</div>
</body>
</html>
<script>
//模拟网速慢的情形，延时创建vue实例
setTimeout(() => {
var vm = new Vue({
el: '#app',
data: {
msg:"今天周末"
},
})
}, 1000);
</script>
解决办法一：为标签设置v-cloak属性
原理：当vue对模版渲染完毕后会移除元素标签内vue指令，可以利用这个特性，结合css的属性选择器来隐藏未解析的标签
//css属性选择器
<style>
[v-cloak]{
display: none;
}
</style>
//为元素添加v-cloak属性，当元素未渲染时处于隐藏状态，渲染完毕后就正常展示
<body>
<div id="app">
<!-- 模版编译完成之后会自动的那个移除 v-cloak 属性-->
<p v-cloak>{{msg}}</p>
</div>
</body>
</html>
<script>
//模拟网速慢的情形，延时创建vue实例
setTimeout(() => {
var vm = new Vue({
el: '#app',
data: {
msg:"今天周末"
},
})
}, 1000);
</script>
解决办法二：使用v-text指令
在vue对模版渲染之前，v-text指令不会影响页面的展示
<body>
<div id="app">
<p v-text="msg"></p>
</div>
</body>
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 的选项
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)自定义指令的使用
<!-- msg的值为 good -->
<p v-html="msg"></p>
<!-- 使用插件的自定义指令 -->
<p v-upper-text="msg"></p>
渲染结果：
<p>good</p>
<p>GOOD</p>
(5)钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
(6)实例：文本滚动指令
思路：将当前文本放入子容器中，动态计算子容器与父容器的宽度差异，调用js定时器动态修改子容器的位置
<script>
Vue.directive('scroll',{
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el,binding) {
//创建容器装载文本
var content_box = document.createElement('div')
content_box.style.display = 'inline-block'
//不允许换行
content_box.style.whiteSpace = 'nowrap'
content_box.innerHTML = binding.value
//将文本容器添加到元素中
el.appendChild(content_box)
//判定内容是否溢出
if(el.scrollWidth - el.offsetWidth > 0){
//隐藏溢出的内容
el.style.overflow = 'hidden'
var now_position = 0 //当前位置 默认0
var direction = 'left' //移动方向 默认向左移动
var target = el.offsetWidth - el.scrollWidth //负数
var rest = 20 //动画暂停时间
//使用定时器实时修改位移
setInterval(()=>{
//只有rest小于0才执行动画
if(rest <= 0){
if(direction == 'left'){
now_position--
}else{
now_position++
}
//如果左移到底 则返回
if(now_position < target){
direction = 'right'
}
//如果右移到底 则返回 并暂停动画
if(now_position > 0){
direction = 'left'
//暂停动画
rest = 20
}
//更新位置
content_box.style.transform = `translateX(${now_position}px)`
}
rest--
},100)
}
}
})
new Vue({
el:"#app",
data:{
msg:"床前明月光，疑是地上霜"
}
})
</script>
使用
<body>
<div id="app">
<div style="border:1px solid red;width:100px;margin:20px auto;" v-scroll="msg">
</div>
</div>
</body>
