vue绑定语法和指令

tommoq

已于 2022-09-25 20:23:58 修改

阅读量382

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2022-08-08 22:29:44 首次发布

本文链接：https://blog.csdn.net/weixin_47198950/article/details/126235782

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

声明式渲染绑定语法

{{}}  双花括号
1. 先找页面中所有可能发生变化的地方有几处
2. 再在模型数据中定义相同数量的变量:
强调: HTML中有几处变化，data对象中就要有几个变量与之对应。

能写：变量, 算术计算，关系/逻辑运算，函数调用, 访问数组元素, 三目——凡是有返回值的js表达式都能
不能: if  else   while    for——都是程序结构，没有返回值！
结果: 运行时，HTML中的所有{{}}会自动去data中找同名的变量使用。
且内存中的data中的变量值发生变化，HTML中的{{}}的值自动变化！
用户最终看到的是{{}}中的变量或者表达式计算后的值！而看不见双
花括号——节省了大量重复的查找和修改操作。
——多亏了MVVM中的ViewModel中的两大子系统: 响应系统和虚拟DOM树。

指令
绑定属性 v-bind 动态绑定元素的属性值

 <img v-bind:src="pm25<100?'img/01.jpeg':
                         pm25<200?'img/02.jpeg':
                         pm25<300?'img/03.jpg':
                         'img/04.jpeg'">

控制元素的显示隐藏

1. 控制一个元素的显示隐藏: 
	<ANY v-show="判断条件"
	只要条件满足，就显示元素
    一旦条件不再满足，就隐藏元素！
2. 控制多个元素，多选一显示:
    <ANY v-if="判断条件" 单用时
	v-if从现象上看，和v-show是完全一样的
	但是原理不一样
    鄙视:  v-show vs v-if的差别: 
          v-show 用display:none 控制显示隐藏
          v-if 用删除节点的方式，控制显示隐藏
    如果一个元素频繁需要显示隐藏,v-show的效率高！
    和v-else-if   v-else 配合使用:
            <元素1 v-if="条件1"
            <元素2 v-else-if="条件2"
                ...  ...
            <元素n v-else 
    强调: v-if和v-else-if和v-else之间禁止插入一切其他元素。必须连续写！
 	原理: Vue会自动判断每个条件：
		哪个条件符合，就只显示哪个条件的元素。其余元素都不显示。
		如果前一个条件已经满足，则后续判断都不再执行。所以，不可能同时显示多个元素。如果所有条件都不满足，会显示v-else的元素

根据数组反复生成多个相同结构的HTML元素

其实就是为html添加循环功能
如何: 
	1. data中必须先定义一个可遍历的数组
	2. 在HTML中使用v-for遍历数组，反复生成多个相同结构的元素，并动态绑定元素的内容。
语法: 
	<要反复生成的元素 v-for="(elem,i) of 数组" :key="i"
	强调: 特例: v-for中的循环变量可被v-for自己或子元素用于绑定！
	 <ul>
        <li v-for="todo in todos">
          {{todo.text}}
        </li>
     </ul>
     
     <ul>
        <li v-for="(elem,i) of arr" :key="i">
            {{elem.text}}---{{i}}
        </li>
     </ul>
        <!-- 
            吃饭---0
            睡觉---1
         -->

事件绑定 v-on:click 可以简写为 @事件名=处理函数

<p style="color: green;">{{msg}}</p>
<button v-on:click="re">翻转文字</button>

var data={
       msg:'我不喜欢你了',
 };

new Vue({
  el:'#app',
  data,
  methods:{
    re(){this.msg=this.msg.split('').reverse().join('');}
  }                
 })

5. 避免用户短暂看到{{}}

问题: 如果new Vue加载慢，则可能短暂看到{{}}
解决: v-cloak 可让元素在new Vue加载之前暂时隐藏。
当new Vue加载完成后，会自动查找页面中的所有v-cloak斗篷删除该属性，
让元素显示出来。
强调: v-cloak没有属性值！
问题: v-cloak空有属性名，没有配套的样式
解决: 只能自己手写！用属性选择器:
[v-cloak]{display:none}
强调: v-cloak不能改名！改名了，vue就找不到了！
其实，除了v-cloak外，还可用v-text代替{{}}绑定元素内容，避免短暂看到{{}}
如何: 
	<ANY v-text="`js模板字符串语法，用${变量}动态生成内容`"
		比如: 
			<h1 v-text="`姓名: ${uname}`"></h1>
  			<h2 v-text="`性别: ${sex==1?'男':'女'}`"></h2>
原理: v-text在未绑定时，是一个浏览器不认识的属性，所以，显示不出来。直到new Vue加载完，认出v-text，才用V-text的内容代替元素的innerHTML内容。
v-cloak vs v-text: 
v-cloak: 需要额外添加css样式，且需要选择放在哪个元素上，隐藏什么范围内的元素。整个网页都隐藏，用户体验还是不好的。
v-text: 仅对当前元素有效，不会影响其它元素的显示不显示。用户体验比v-cloak要好。但是使用反引号的语法，很晦涩。

绑定HTML片段

问题: 使用{{}}绑定HTML片段，VUE不会解析HTML片段为网页内容。而是原样显示HTML代码
解决: 今后，只要绑定一段HTML片段，必须用v-html。
如何: <ANY v-html="变量"></ANY>

只在页面加载之初，绑定一次。之后及时数据变化，也不反复更改页面：v-once

强调: v-once没有任何属性值，写在元素中，就起作用
原理: 
	在构建虚拟DOM树时，会扫描到v-once的元素，所以首次绑定，能绑定v-once的元素的内容。
	首次绑定后，v-once的元素会从虚拟DOM树中移除。从此，再出发变量改变时，不会再修改v-once的元素。

万一内容的正文中，有{{}}，但是不是用于绑定的，会出错。
解决: v-pre 可阻止内容中的{{}}被编译，而是让{{}}原样显示。

总结: 
1. 如果元素内容要变化: 
	用 {{变量或表达式}} 绑定
	也可用v-text="`变量或表达式`"
2. 如果元素的属性值要变化: 用 :属性名="变量或表达式" 绑定
3. 一个元素控制显示隐藏: v-show="条件"
4. 多个元素选其一显示: 
	v-if="条件"  v-else-if="条件"   v-else
5. 反复生成多个相同结构的元素时: 
	v-for="(elem, i ) of 数组" :key="i"
6. 只要绑定事件处理函数都用: @事件名="处理函数"
7. 只要不希望用户短暂看到{{}}语法:
	v-cloak 或 v-text
8. 只要绑定HTML片段: v-html
9. 只要希望只在页面加载之初绑定一次，之后不再变化，就用v-once.
10. 如果内容中包含不想被vue编译的{{}}正文，可用v-pre阻止VUE编译元素的内容。