Vue学习笔记总结

CSDN话题挑战赛第1期
活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f

参赛话题：前端学习记录
话题描述：记录前端学习过程中的某个知识点、解决方案等等

模板语法

 Vue中的模板文件都是由模板、业务逻辑

绑定

 文本数据绑定
 首先清空App.vue，获得一个纯净的环境。
 在App.vue文件中的模板上可以绑定业务逻辑中的数据

 绑定的数据可以是对象
 可以给模板内容添加样式
 html数据绑定，指将值包含html内容的属性绑定到模板，使用{ {}}不能实现，用v-html属性

 v-bind绑定属性，指将属性值绑定到标签的属性值上。
 v-bind绑定动态属性，指要绑定的参数和参数值都是动态获取的。语法v-bind:[attributeName]

执行逻辑
 Vue3的template模板中可以使用js表达式
{ {num+2}} { {num*3}} # 运算符
{ {ok ? ‘YES’ : ‘NO’}} # 条件运算符
{ {message.split(‘‘).reverse().join(‘’)}} # 方法调用

案例

选择结构  v-if能根据表达式的值(true或false)来决定是否显示DOM元素。

 v-else可以给v-if添加一个else块

例：随机生成一个数字，判断是否大于0.5

 v-else-if是v-if的else-if块，可以链式使用多次

注：v-else、v-else-if必须跟在v-if或v-else-if之后。否则将不被识别
 v-if可以切换多个元素，可以包裹在元素中并使用v-if。(template不可见)

 可以使用v-show来根据条件展示元素，类似v-if

区别：v-if操作DOM，v-show通过css控制显示隐藏，如果要频繁切换推荐用v-show
循环结构
 v-for用于循环，语法：site in sites。还支持第二参数，是当前项的索引：(site, index) in sites
 v-for可以绑定数组来渲染一个项目列表。注：如果语法错误，则须指定:key

另：模板中也可以使用v-for
另：数组中元素也可以是对象
 数组的元素如果还包含数组时，需要循环嵌套遍历

 v-for循环对象，语法：(value,[key, index]) in object。3个变量分别保存属性值、属性名、索引。

 v-for也可