oppo开放平台seo网上培训课程
1.插值表达式
1.插值表达式的作用是什么？
利用表达式进行插值，将数据渲染到页面中；
2.语法结构？
{{表达式}}
3.插值表达式的注意点是什么？
（1）使用的数据要存在，在data中；
（2）支持的是表达式，而不是语句；
（3）不能在标签属性中使用；<p title={{ 变量 }}></p> ×
2.Vue 指令
Vue 会根据不同的指令，针对标签实现不同的功能。指令：带有 v-前缀的特殊标签属性；
（1）v-html：
作用：动态的解析标签，（像插值表达式的话会以文本形式进行展示）
（2）v-show & v-if：
（3）v-else & v-else-if：
（4）v-on：
（5）v-bind：
（6）v-for：
1. key 的值只能是 字符串 或 数字类型
（7）v-model：
作用：给表单元素使用，双向数据绑定 -> 可以快读获取或设置表单元素内容
3.指令的修饰符
通过 “ . ” 指明一些指令的 后缀 ，不同 后缀 封装了不同的处理操作 -> 简化代码
（1）按键修饰符
@keyup.enter -> 键盘回车监听
（2）v-model 修饰符
v-model.trim -> 去除首尾空格
v-model.number -> 转数字
（3）事件修饰符
@事件名.stop -> 阻止冒泡
@事件名.prevent -> 阻止默认行为
4.v-bind 对于样式操作的增强*
（1）v-bind - 操作 class
语法： : class = "对象/数组"
1.对象 -> 键就是类名，值是布尔值。如果值是 true ，有这个类，否则没有这个类；
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>适用的场景：一个类名，来回切换；
2.数组 -> 数组中所有类，都会添加到盒子上，本质就是一个 class 列表
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>适用场景：批量添加或删除类；
示例：京东秒杀导航栏的切换
（2）v-bind - 操作 style （个人认为这个还是比较重要的）
语法： ：style = "样式对象"
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>适用场景：某个具体属性的动态设置
注意的一些点：
<1>一些格式：首先，对于CSS属性值，我们需要对其加引号；其次，对于带有横杠的属性名，在JS对象中是不支持的，因而此时可以采取两种方法：一种是驼峰；另一种是我们可以对这种属性名加引号；
<div :style="{height:"400px";width:"600px";backgroundColor:'white';'background-color':'white';}"></div><2>如果对单个的属性进行动态的改变，则
<div :style="{height:"400px";width:len;}"></div>/* 然后在 data 中定义 len */5.v-model 应用于其他表单元素
这个暂时和之前的是一样的
参考：
026-v-model应用于其他表单元素_哔哩哔哩_bilibili