14_自定义指令
内置指令
以下是一些Vue中的内置指令
v-bind：单项数据绑定（可以解析表达式），简写 :xxx
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定事件监听，简写：@xxx
v-if：条件渲染（动态控制节点增加与删除）
v-else-if：条件渲染（动态控制节点增加与删除）配合v-if使用
v-else：条件渲染（动态控制节点增加与删除）配合v-if使用
v-show：条件渲染（动态控制节点是否展示）
v-text：向指定节点中渲染文本内容（v-text会替换掉节点中的内容）
v-html：向指定节点中渲染包含html结构的内容（v-html有安全隐患，不合理利用容易导致XSS攻击，不要用来渲染用户提交的内容）
v-clock：一个特殊的属性（没有值，显示在标签上），Vue实例创建完毕并接管容器之后，v-clock属性会消失（配合css解决网速慢时页面，vue.js没有加载完毕页面展示出插值语法的问题）
v-once：在节点初次动态渲染后转为静态，之后数据改变不会更新绑定过v-once指令的标签的内容
v-pre：跳过所在节点的编译过程（跳过没有使用插值语法和指令语法的节点，提高编译速度）
自定义指令
除了Vue内置的指令，我们还可以自定义指令
<body>
<div id="app">
请输入number的值：
<input type="text" v-model="number" />
<h2>
当前的值：
<span v-text="number"></span>
</h2>
<h2>
平方：
<span v-square="number"></span>
</h2>
<h2>
对象写法：
<span v-bind-pro="number"></span>
</h2>
</div>
<script>
// 全局自定义指令
Vue.directive('bind-max', {
// 当指令与元素成功绑定时调用bind()
bind(element, binding) {
element.innerText = binding.value * binding.value;
},
// 当指令所在元素被渲染到页面时调用inserted()
inserted(element, binding) {},
// 指令所在的模板被重新解析时调用update()
update(element, binding) {
element.innerText = binding.value * binding.value;
},
});
const vm = new Vue({
el: '#app',
data() {
return {
number: 0,
};
},
directives: {
// 何时调用？
// 1.指令与元素成功绑定时
// 2.指令所在模板被重新解析时
square(element, binding) {
console.log(element, binding);
element.innerText = binding.value * binding.value;
},
// 对象写法
// 如果想用多个单词作为指令名 可以用引号包裹然后
'bind-pro': {
// 当指令与元素成功绑定时调用bind()
bind(element, binding) {
element.innerText = binding.value * binding.value;
},
// 当指令所在元素被渲染到页面时调用inserted()
inserted(element, binding) {},
// 指令所在的模板被重新解析时调用update()
update(element, binding) {
element.innerText = binding.value * binding.value;
},
},
},
});
</script>
</body>
阅读剩余
THE END
