vue内置指令
常用的内置指令:
| v-bind : 单向绑定解析表达式, 可简写为 :xxx |
| v-model : 双向数据绑定 |
| v-for : 遍历数组/对象/字符串 |
| v-on : 绑定事件监听, 可简写为@ |
| v-if : 条件渲染(动态控制节点是否存存在) |
| v-else : 条件渲染(动态控制节点是否存存在) |
| v-show : 条件渲染 (动态控制节点是否展示) |
| v-text指令: |
| 1.作用:向其所在的节点中渲染文本内容。 |
| 2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。 |
| v-html指令: |
| 1.作用:向指定节点中渲染包含html结构的内容。 |
| 2.与插值语法的区别: |
| (1).v-html会替换掉节点中所有的内容,{{xx}}则不会。 |
| (2).v-html可以识别html结构。 |
| 3.严重注意:v-html有安全性问题!!!! |
| (1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。 |
| (2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上! |
| v-cloak指令(没有值): |
| 1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。 |
| 2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。 |
| v-once指令: |
| 1.v-once所在节点在初次动态渲染后,就视为静态内容了。 |
| 2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。 |
| v-pre指令: |
| 1.跳过其所在节点的编译过程。 |
| 2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。 |
自定义指令
案例:
案例1:定义一个自定义指令v-test,将绑定的数值方法20倍
| <div id="main"> |
| <h2>当前的n值是:<span v-text="n"></span> </h2> |
| <h2>使用自定义指令放大5倍后的n值是:<span v-test="n"></span> </h2> |
| </div> |
| new Vue({ |
| el:'#main', |
| data:{ |
| n:1 |
| }, |
| directives:{ |
| test(element,binding){ |
| element.innerText = binding.value * 10 |
| } |
| } |
| }) |
案例2:定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。
| <div id="main"> |
| <button @click="n++">点我n+1</button> |
| <input type="text" v-fbind:value="n"> |
| </div> |
| new Vue({ |
| el:'#main', |
| data:{ |
| n:1 |
| }, |
| directives:{ |
| fbind:{ |
| |
| bind(element,binding){ |
| element.value = binding.value |
| }, |
| |
| inserted(element,binding){ |
| element.focus() |
| }, |
| |
| update(element,binding){ |
| element.value = binding.value |
| } |
| } |
| } |
| }) |
| 一、定义语法: |
| (1).局部指令: |
| new Vue({ |
| directives:{指令名:配置对象} 或 directives{指令名:回调函数} |
| }) |
| (2).全局指令: |
| Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数) |
| |
| 二、配置对象中常用的3个回调: |
| (1).bind:指令与元素成功绑定时调用。 |
| (2).inserted:指令所在元素被插入页面时调用。 |
| (3).update:指令所在模板结构被重新解析时调用。 |
| |
| 三、注意: |
| 1.指令定义时不加v-,但使用时要加v-; |
| 2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。 |
钩子函数:
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
-
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
-
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
-
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
-
componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
-
unbind
:只调用一次,指令与元素解绑时调用。
钩子函数参数:
el
:指令所绑定的元素,可以用来直接操作 DOM。
binding
:一个对象,包含以下 property:
| name:指令名,不包括 v- 前缀。 |
| value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。 |
| oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。 |
| expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。 |
| arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。 |
| modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。 |
vnode
:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode
:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」