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