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