【无标题】

 插值表达式

**概述：**插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"

语法：{{ 变量名/对象.属性名 }}使用的数据必须在data（已配置）；2.支持的是表达式，而非语句，比如if、for；3.不能在标签属性中使用{{}}插值

显示数据(v-text和v-html)
概述：v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.

​ 当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。

​ 插值闪烁: 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据.

语法：

v-text：    
v-html：    
/*v-text：把数据当作纯文本显示.
v-html：遇到html标签,会正常解析*/

v-show ---控制元素的显示与隐藏

作用：控制元素的显示隐藏.语法：v-show = "表达式" 表达式值为true显示，false隐藏底层原理：通过切换 css 的 display：none 来控制显示或隐藏使用场景：频繁切换显示隐藏的场景

v-if ---条件渲染-控制元素的显示与隐藏

作用：控制元素的显示隐藏（条件渲染）语法：v-if= "表达式" 表达式值为true显示，false隐藏底层原理：根据 判断条件 控制元素的 创建 和 移除使用场景：要么显示要么隐藏，不频繁切换的场景

v-else && v-else-if ---辅助v-if进行判断渲染

作用：辅助 v-if 进行判断渲染.语法：v-else（表示否则，不跟表达式） v-else-if = "表达式"

注意：需要紧挨着 v-if 一起使用

v-on ---简写@-注册监听事件

作用：注册事件 = 添加监听 + 提供处理逻辑

2.语法：01. v-on：事件名 = "内联语句" 02. v-on：事件名 = "methods中的函数名"

语法简写：@事件名 = "内联语句 / methods中的函数名   

v-bind ---简写:动态设置html的标签属性

作用：动态的设置 html 的标签属性 => src、url、title...

语法：v-bind ：属性名 = "表达式"    语法简写：：属性名 = "表达式"

v-bind操作class ---数组或对象形式添加类名

语法： ：class = "对象 / 数组"

对象情况：对象 =>键就是类名，值是布尔值。如果值为 true ，添加这个类，否则不添加

适用场景：一个类名，来回切换

数组情况：数组 =>数组中所有的类，都会添加到盒子上，本质是一个 class 列表

适用场景：批量添加或删除类

v-bind操作style ---添加样式对象

语法： ：style = "样式对象"

v-for ---数据循环,多次渲染

.作用：基于数据循环，多次渲染整个元素 ==》数组、对象、数字...

.遍历数组语法：v-for = "（item，index）in 数组" （item：每一项；index：下标）

.v-for 中的 key

1.语法：：key属性 = "唯一标识"

2.作用：给列表项添加的唯一标识。便于 Vue 进行列表项的正确排序复用

数据双向绑定数据(v-model)
概述：

​ Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

注意：

双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等
文本框/单选按钮/textarea, 绑定的数据是字符串类型
单个复选框, 绑定的是boolean类型
多个复选框, 绑定的是数组
select单选对应字符串，多选对应也是数组会自动根据控件类型自动选取正确的方法来更新元素