指令 自定义指令"/>
Vue核心 内置指令 自定义指令
内置指令
常用指令：
-
v-bind 单向绑定解析表达式，可简写为:
-
v-model 双向数据绑定
-
v-for 遍历数组 / 对象 / 字符串
-
v-on 绑定事件监听，可简写为@
-
v-show 条件渲染 (动态控制节点是否展示)
-
v-if 条件渲染（动态控制节点是否存存在）
-
v-else-if 条件渲染（动态控制节点是否存存在）
-
v-else 条件渲染（动态控制节点是否存存在）
其他指令
v-text指令
作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会，更灵活
v-html指令
作用：向指定节点中渲染包含html结构的内容
与插值语法的区别：
- v-html会替换掉节点中所有的内容，{{xxx}}则不会
- v-html可以识别html结构
- 严重注意v-html有安全性问题！！！
- 在网站上动态渲染任意html是非常危险的，容易导致 XSS 攻击
- 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！！！
v-cloak 指令
v-cloak指令（没有值）
a本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
b使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
v-once 指令
- v-once所在节点在初次动态渲染后，就视为静态内容了
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
<title>v-once指令</title>
<script type="text/javascript" src="../js/vue.js"></script><div id="root"><h2 v-once>初始化的n值是: {{n}}</h2><h2>当前的n值是: {{n}}</h2><button @click="n++">点我n+1</button>
</div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({ el: '#root', data: {n:1} })
</script>
v-pre 指令
1 跳过v-pre所在节点的编译过程
2 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
自定义指令
directives
定义语法
1 局部指令
new Vue({ directives:{ 指令名:配置对象 }
})new Vue({ directives:{ 指令名:回调函数 }
})
2 全局指令
Vue.directive(指令名, 配置对象)
或
Vue.directive(指令名, 回调函数)Vue.directive('fbind', {// 指令与元素成功绑定时（一上来）bind(element, binding) { // element就是DOM元素，binding就是要绑定的element.value = binding.value},// 指令所在元素被插入页面时inserted(element, binding) {element.focus()},// 指令所在的模板被重新解析时update(element, binding) {element.value = binding.value}
})
配置对象中常用的3个回调函数
-
bind(element, binding)指令与元素成功绑定时调用 -
inserted(element, binding)指令所在元素被插入页面时调用 -
update(element, binding)指令所在模板结构被重新解析时调用
element就是DOM元素，binding就是要绑定的对象，它包含以下属性：namevalueoldValueexpressionargmodifiers备注
- 指令定义时不加v-，但使用时要加v-
- 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名
new Vue({el: '#root',data: {n:1},directives: {'big-number'(element,binding) {element.innerText = binding.value * 10}} })Demo
<style>.demo{background-color: orange;}</style><body><button id="btn">点我创建一个输入框</button> </body><script type="text/javascript" >const btn = document.getElementById('btn')btn.onclick = ()=>{const input = document.createElement('input')input.className = 'demo'input.value = 99input.onclick = ()=>{alert(1)}document.body.appendChild(input)input.focus()input.parentElement.style.backgroundColor = 'skyblue'} </script>DEMO 2
<title>自定义指令</title> <script type="text/javascript" src="../js/vue.js"></script><div id="root"><h2>{{ name }}</h2><h2>当前的n值是：<span v-text="n"></span> </h2><!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> --><h2>放大10倍后的n值是：<span v-big="n"></span> </h2><button @click="n++">点我n+1</button><hr /><input type="text" v-fbind:value="n"> </div><script type="text/javascript">Vue.config.productionTip = false// 定义全局指令/* Vue.directive('fbind',{// 指令与元素成功绑定时（一上来）bind(element,binding){element.value = binding.value},// 指令所在元素被插入页面时inserted(element,binding){element.focus()},// 指令所在的模板被重新解析时update(element,binding){element.value = binding.value}}) */new Vue({el: '#root',data: {name: 'YOUNG',n: 1},directives: {// big函数何时会被调用？// 1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时/* 'big-number'(element,binding){// console.log('big')element.innerText = binding.value * 10}, */big(element, binding) {console.log('big', this) // 🔴注意此处的 this 是 window// console.log('big')element.innerText = binding.value * 10},fbind: {// 指令与元素成功绑定时（一上来）bind(element, binding) {element.value = binding.value},// 指令所在元素被插入页面时inserted(element, binding) {element.focus()},// 指令所在的模板被重新解析时update(element, binding) {element.value = binding.value}}}}) </script>
更多推荐
Vue核心 内置指令 自定义指令
发布评论