标签：vue 元素 单向 绑定 html 指令 key 专门
指令绑定语法(1)
1. 插值语法：{{}}
{{}}： 原理和模板字符串的${}一致
底层相当于DOM中的textContent属性
相当于innerText
2. 属性绑定：v-bind （简写：）
元素的属性值发生变化，用v-bind绑定属性值
<元素 v-bind:属性名="js变量或表达式">
<!--简写-->
<元素 :属性名="js变量或表达式">
<img :src="图片路径"/>
3. 显示隐藏： v-show
专门控制一个元素显示隐藏的特殊指令。（相当于display:none）
<元素 v-show="bool类型的变量或判断的条件">
4. 分支切换： v-if、v-else-if、v-else
多个元素选取1个显示，没有满足条件的删除。（用多个分支时，写了v-*的语句必须时兄弟元素关系。）
<元素1 v-if="条件1">
<元素1 v-if="条件1">显示内容</元素1>
<元素2 v-else>显示内容</元素2>
<元素1 v-if="条件1">显示内容</元素2>
<元素2 v-else-if="条件2">显示内容</元素2>
<元素3 v-else>显示内容</元素3>
3. 列表渲染：v-for
专门在网页中根据一个数组或者对象的成员；连续生成多个结构相同，内容不同的一组html元素的指令。
<!--数组或对象 下标从0开始-->
<要反复生成的元素 v-for="(item,index) of 数组或对象" :key="不重复的值">
<!--反复生成指定数量的相同结构元素副本时 下标从1开始-->
<元素 v-for="i of n" :key="i">
没有加key，v-for存在的问题:
即使只修改了数组或者对象中一个成员的值，v-for默认也会删除所有元素的副本，重新遍历，重新创建html副本；---- 效率低。
原因：v-for生成的多个html元素副本，处理内容不同之外，元素本身没有任何差别，所有v-for每次只能删除所有html副本，在重建整个列表。
解决：只要使用v-for都必须同时绑定一个专门的属性，:key="不重复的值"
结果：修改时，v-for通过key属性值来鉴别每个html元素的副本不同。只要修改某一个key的元素即可。不用重建整个列表 ---- 效率高
v-for为什么要加:key
- 为每个元素添加唯一的标识
- 避免重建整个列表
- 提高修改的效率
4. 绑定事件：v-on 简写:
专门为元素绑定事件的指定。
<!--不传参-->
<元素 v-on:事件名="事件处理函数">
<!--简写-->
<元素 :事件名="事件处理函数">
<!--需要传参-->
<元素 v-on:事件名="事件处理函数(实参值,...,....)">
<!--需要事件对象 $event 关键字-->
<元素 v-on:事件名="事件处理函数($event,实参值,....)">
5. v-html
专门绑定一段html代码片段到页面上的特殊指令
<元素 v-html="msg">
相当于
innerHTML
6. v-cloak 暂时隐藏
专门在
new Vue()加载之前，暂时隐藏部分元素的特殊指令。避免用户短暂看到{{}}
使用：
<元素 v-cloak>
<style>
[v-cloak]{display:none;} /**需要手动添加*/
</style>
v-cloak放在父元素上，可以隐藏多个子元素
7. v-text 暂时隐藏
专门替代{{}}绑定纯文本内容到元素上的特殊指令，不想让用户看到{{}}。可用v-text代替{{}}
<元素 v-text="变量或表达式"></元素>
<!--会被编译成：-->
<元素 v-text>变量或表达式</元素>
v-text只能作用于一个元素
8. v-once 绑定一次
专门控制一个元素只在首次加载时绑定一次。之后，即使变量值改变，也不会自动更新界面。
<元素 v-once>{{...}}</元素>
不能添加到虚拟DOM树上
9. v-pre 阻止编译
专门阻止vue编译内容中的{{}}的特殊指令
<元素 v-pre>**{{**元素}}**</元素>
<!--输出：**{{**元素}}** -->
以上指令+{{}} ⇒ 单向绑定
单向绑定：
① 只能将程序中的变量值，自动同步到页面上显示(M⇒V)
② 不能自动将界面中的用户主动做的修改，自动同步回程序中变量里保存（V⇒ M 不能）
标签：vue,元素,单向,绑定,html,指令,key,专门 来源： https://www.cnblogs.com/curryhan/p/16278967.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。