ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue单向绑定指令

2022-05-16 23:00:33  阅读:34  来源: 互联网

标签: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-ifv-else-ifv-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

  1. 为每个元素添加唯一的标识
  2. 避免重建整个列表
  3. 提高修改的效率

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

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有