经典面试题:谈一下对于vue指令的理解, 如何封装一个指令
简单来说,vue指令就是为了实现某种特定功能比如按条件渲染、绑定属性等,而封装的一些指令,这样使用者就能够快速实现一些功能。
内置指令的使用
v-if:根据其后表达式的 bool 值进行判断是否渲染该元素
v-else:紧跟着v-if搭配使用
v-show:其后表达式的 bool 值为 false 时,对渲染的出标签添加display:none;的样式
v-for:v-for的用法: v-for="(item, index) in arr" ,类似于数组的用法,一般用:key来搭配v-for,key的值必须保证不同。key的作用:帮助vue区分不同的元素,提升vue的渲染性能。
v-bind:(缩写为:):用于绑定某些属性,响应地更新 html 特性
v-on:(缩写为@):用于监听指定元素的 DOM 事件
v-once: v-once这个指令不需要任何表达式,它的作用就是定义它的元素或组件只会渲染一次,首次渲染后,不再随着数据的改变而重新渲染。也就是说使用v-once,那么该块都将被视为静态内容。
封装指令
主要就是采用Vue.directive(指令名,{})这个api来封装一个指令。
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<title>自定义指令</title>
</head>
<style type="text/css">
</style>
<body>
<div id="app">
<!-- 自定义指令,使得网页一打开就让输入框有焦点 -->
<input type="text" name="" v-focus="msg">
<input type="text" name="" v-color='msg'>
<input type="text" name="" v-background='msg1'>
<input type="text" name="" v-font="msg1">
</div>
<!-- 引入vue库 -->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
自定义指令:
Vue.directive()
*/
Vue.directive('focus', {
//加入inserted属性,指:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)
inserted: function (el, binding) {
//el表示指令所绑定的元素
el.focus(); //focus()方法就是获取焦点
el.value = binding.value.color;// binding.value为自定义指令传的值,注意这里传入的值必须是data数据里面的值
}
});
//利用bind
Vue.directive('color', {
// bind属性,只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
bind: function (el, binding) {
el.style.color = binding.value.color; //binding为传入的绑定对象,binding.value的值为自定义指令的值
console.log(binding);
}
});
var vue = new Vue({
el: '#app',
data: {
msg: {
color: "orange"
},
msg1: {
backgroundColor: 'blue',
color: "red",
fontSize: "30px"
}
},
methods: {
},
//自定义局部指令
directives: {
background: function (el, bingding) {
el.style.backgroundColor = bingding.value.backgroundColor;
el.style.color = bingding.value.color
},
font: {
bind: function (el, bingding) {
el.style.fontSize = bingding.value.fontSize;
}
}
},
});
</script>
</body>
</html>