1、文本类指令
{{}}、v-text 都是用于绑定节点的文本;
二者区别:{{}}这种绑定值的方式在页面会出现“{{}}”一闪而过的效果
解决{{}}在页面出现一闪而过的办法:
// css:
[v-cloak] {
display: 'none'
}
// html
v-once 用于指令节点的内容只绑定一次,当前节点中所对应的变量变化,视图不更新。
通常情况下,v-once只能和{{}}一起用
v-html 用于绑定动态的html节点,相当于DOM中的innerHTML,这个指令默认已经做了”防注入攻击XSS”的处理。
v-once和v-cloak都不需要接收表达式来作为值
2、动态属性指令
v-bind 用于动态绑定节点属性(如:title,value,class,style等);经常简写成”:属性名“
v-on 用于给视图绑定各种js事件,比如:click,mouseenter,blur等,简写成: “@事件名“
事件修饰符:.stop 阻止冒泡 ,.enter等,可以链式调用。
4、表单绑定
v-model 用于表单取值(表单双向绑定),比如input/select/textarea等。
表单三个修饰符:.trim自动去除文本首尾空格
.number只能输入数字
.lazy 用于性能,当表单失去焦点时再进行双向绑定
5、列表渲染
v-for 用于渲染列表、对象等。
6、条件渲染
v-show 相当于控制节点的display: none/block
v-if / v-else-if / v-else 这是真正的移除或插入视图节点,比较耗费性能,不建议和v-for一起使用。
v-for的优先级比v-if更高。
7、其它指令
v-pre 用于调试,可以阻止vue编译器对指令的编译
v-slot 指定具名插槽
1、IT大王遵守相关法律法规,由于本站资源全部来源于网络程序/投稿,故资源量太大无法一一准确核实资源侵权的真实性;
2、出于传递信息之目的,故IT大王可能会误刊发损害或影响您的合法权益,请您积极与我们联系处理(所有内容不代表本站观点与立场);
3、因时间、精力有限,我们无法一一核实每一条消息的真实性,但我们会在发布之前尽最大努力来核实这些信息;
4、无论出于何种目的要求本站删除内容,您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》:https://itdw.cn/ziliao/sfgs.pdf,
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明: http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理;请按照此通知格式填写发至本站的邮箱 wl6@163.com