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也可以循环整数，语法：item in number 。例：item in 5
事件和方法
 在Vue的业务逻辑处理中可以在methods处声明方法

 在模板中可以事件触发(调用)方法

事件和方法详解

 @click是v-on:click的简写形式， v-on用来监听DOM事件。
另：调用的方法如果没有参数可以不写括号

 调用方法时可以传递参数值

 一个方法可以调用另一个方法。 例：this.getMsg();
 事件中可以有多个方法，由逗号分隔即可

事件对象
 当需要访问原始DOM事件时，可以使用$event变量传递给方法。

 当方法有多个参数时，$event作为最后一个参数。例：@click="fn2{(}^{\prime }jerry老{鼠}^{\prime },23,$event)"
 在事件处理时可以使用逗号分隔多个函数调用。例：

事件修饰符

 事件修饰符：可以用来处理事件的细节。如果要阻止事件的默认行为或冒泡，可以通过e.preventDefault()或e.stopPropagation()实现，也可以使用事件修饰符实现。Vue通过.后缀来调用修饰符。

 Vue提供的事件修饰符有
.stop // 阻止冒泡
.prevent // 阻止默认事件
.capture // 阻止捕获
.self // 只监听触发该元素的事件
.once // 只触发一次
.left // 左键事件
.right // 右键事件
.middle // 中间滚轮事件
 按键修饰符，监听键盘事件时通常要检查特定按键。可以在v-on或@监听事件后添加按键修饰符。

 Vue提供的常用键修饰符有
按键别名：.enter .tab .esc .space .up .down .left .right
.delete (同时捕获"删除"和"退格"键)
系统修饰键：.ctrl .alt .shift .meta
鼠标按钮修饰符：.left .right .middle
类和样式绑定
 v-bind绑定class。定义一个类名为red的样式。
在data中声明一个属性
在模板中声明一个div绑定属性

另：也可以声明方法改变属性，点击按钮时调用方法
 绑定多个class时可以绑定对象

另：class属性可以和:class同时存在
 数组形式为class绑定多个值

 数组形式可以结合三目运算符使用

 v-bind绑定style

 绑定多个style时可以直接绑定对象

 绑定多个style也可以用数组

表单和双向数据绑定
Vue3操作DOM
 Vue中操作DOM方式一，可以利用原生js实现

 Vue中支持利用ref操作DOM节点(推荐)

双向数据绑定

 双向数据绑定(MVVM)主要用于表单。Vue是一个MVVM框架。M(model)、V(view)，即model改变会影响view，view改变也会影响model。
使用v-model在表单的、及等元素上创建双向数据绑定。

 双向数据绑定实现人员登记系统

 .lazy修饰符：v-model在input事件中同步值，可以添加lazy修饰符，变为在change事件中同步
 .number修饰符：想将用户输入转为Number类型时使用
 .trim修饰符：自动过滤首尾空格时使用

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