vue常用指令思维脑图思维导图
数据绑定，条件，列表渲染等全内容分解
树图思维导图提供 vue常用指令思维脑图 在线思维导图免费制作，点击“编辑”按钮，可对 vue常用指令思维脑图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：9691788807c289822283a64eb06c39d3
思维导图大纲
vue常用指令思维导图模板大纲
1.数据绑定指令
v-model
双向绑定，将表单元素的值与Vue实例的数据进行双向绑定
v-bind
将vue实例的数据绑定到HTML元素的属性上
v-once
一次性地将数据绑定到元素上，不会随着数据的变化而更新
即 进入页面只渲染一次，后面不再渲染
2.条件渲染指令
v-if
整个创建/删除dom元素，默认值false
v-else-if
必须和v-if连用
v-else
必须和v-if连用
v-show
通过css样式控制display:none;来显示和隐藏，不会对dom结构操作
3.列表渲染指令
v-for
<input v-for="item in items" :key="item.id">
<li v-for="(user,index) in userList" :key=user.id>
基于数组来循环渲染相似的UI结构
key: 唯一的键值，维护列表状态
唯一的数字或字符串
提升效率，防止列表状态紊乱
不建议使用index做key，index不具有唯一性
4.事件绑定指令
v-on
监听用户交互行为
将vue实例的方法绑定到dom事件上
@
v-on的简写形式，用于更简洁地绑定事件
5.样式和类绑定指令
v-bind:class
<div v-bind:class="{ 'red': isRed }">这是一个红色的div</div>
支持数组语法和字符串语法
v-bind:style
<div v-bind:style="{ 'font-size': fontSize + 'px' }">这是一个字体大小动态变化的div</div>
支持数组语法和字符串语法
6.解析指令
v-text
解析文本
v-html
解析HTML标签文件
7.其他指令
v-pre
把标签内部的元素原位输出
跳过这个元素和它的子元素的编译过程
<!--加v-pre指令--> <div v-pre>{{ message}}<p>{{ message }}</p></div>
以上效果显示为如下： {{message}} {{message}}
加v-pre指令跳过这个元素和它的子元素的编译过程，所以div元素和它的子元素p都是显示{{ message}}
v-cloak
防止闪烁
当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
v-once
一次性地将元素和组件渲染到 DOM 中，不会随着数据的变化而更新
自由主题思维导图模板大纲
分支主题 1
相关思维导图模板
树图思维导图提供 思维导图 在线思维导图免费制作，点击“编辑”按钮，可对 思维导图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：bcea44ba49b736a7526246a1cbf17a43
树图思维导图提供 Photoshop图层样式思维导图 在线思维导图免费制作，点击“编辑”按钮，可对 Photoshop图层样式思维导图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：f61c1d38880d71944392214d091e0ca4
沪公网安备 31011502019485号
上海工商