3、VUE的常用指令1
2022-04-01 12:17:24 0 举报AI智能生成
登录查看完整内容
为你推荐
查看更多
vue学习
作者其他创作
大纲/内容
directive
这些指令实际上都是基于自定义属性设置的，只不过在 VUE 上有特殊的含义
在vue中 v-xxx 的行内属性 我们统称为 vue指令
当vue加载成功并进行处理的时候，会按照相关的规则解析和渲染视图，遇到对应的指令实现对应的功能
定义
v-text会把所有内容分都当做文本
相当于小胡子语法
给非表单元素设置内容
v-text = '变量'
使用
传统的胡子语法，在vue没有加载完成之前，会把{{xxx}}展示在页面中，当vue加载完才会出现真正的内容，这样体验不好
可以使用这种方式替代小胡子语法
场景
v-text
v-html支持对于标签的自动识别
相当于原生的innerHTML
v-html = '变量'
用户可以操作的一般不添加这个指令
只在可信任的内容上使用该指令
注意
v-html
想循环谁就给谁设置v-for
循环展示标签
值 代表 数组中的当前项
index 是对应的索引
v-for = '(值，index) in vue变量'
值 和 key 是自己定义的变量， 两个都写需要加上();
这两个变量 只能用在当前使用v-for的标签上及其内部
多用于数组
可以用来循环数组 、字符串 、数字 、对象
应用范围
v-for
有原生对应的
例如：给img绑定动态的图片路径地址
给元素的内置属性动态绑定数据
v-bind:src = “变量”
可简写为 :src = “变量”
一般简写成 冒号（:）
是专门用来处理行内属性（src class style ...）的指令
v-bind
为了解决小胡子的显示问题
v-cloak
有这个 v-cloak 行内属性的元素 会有这个样式（属性选择器）
[v-cloak]{ display: none; }
需要配合css使用
当vue模板渲染之前，执行的是普通的html，这时，我们写的css样式起作用，让元素display：none，就看不见小胡子了
当模板渲染完成之后，vue会自动把这个行内属性移除，这时在页面上展示的是渲染好的html了；
原理
绑定的数据是一次性的，后面不论数据怎么改变，视图也都不会重新渲染
v-once
vue对有这个指令的元素 只渲染一次
告诉vue 这个标签及其子标签 都不用vue渲染
v-pre
可以用来提升vue的编译效率
作用
无原生对应的
VUE 的常用指令1
0 条评论
回复 删除
下一页
