Vue 简单的语法

1.插值表达式

1.插值表达式的作用是什么？

利用表达式进行插值，将数据渲染到页面中；

2.语法结构？

{{表达式}}

3.插值表达式的注意点是什么？

（1）使用的数据要存在，在data中；

（2）支持的是表达式，而不是语句；

（3）不能在标签属性中使用；<p title={{ 变量 }}></p> ×

2.Vue 指令

Vue 会根据不同的指令，针对标签实现不同的功能。指令：带有 v-前缀的特殊标签属性；

（1）v-html：

        作用：动态的解析标签，（像插值表达式的话会以文本形式进行展示）

         v-html = "表达式 " → 动态设置元素 innerHTML

（2）v-show & v-if：

        作用：控制元素的隐藏

        -v-show：控制元素显示隐藏

         语法：v-show = "表达式" 表达式值 true 显示， false 隐藏

         原理：切换 display:none 控制显示隐藏

         场景： 频繁切换显示隐藏的场景

      

       -v-if：控制元素显示隐藏（条件渲染）

        语法： v-if = "表达式" 表达式值 true 显示， false 隐藏

        原理： 基于条件判断，是否 创建 或 移除 元素节点

        场景： 要么显示，要么隐藏，不频繁切换的场景

（3）v-else & v-else-if：

        作用：辅助v-if 进行判断渲染

        语法： v-else v-else-if = "表达式"

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

（4）v-on：

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

        语法：<1> v-on：事件名 = “内联语句”  ； <2>  v-on：事件名 = “methods中的函数名”

        简写： @事件名=“methods中的函数名”

        注意：methods函数中的 this 指向 Vue 实例；同时，我们也可以通过v-on 来调用传参；

（5）v-bind：

        作用：动态地设置 html 的标签属性和 -> src  url title ...

        语法：v-bind：属性名 = “表达式 ”

        注意：简写形式 ：属性名 = “表达式”

（6）v-for：

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

        语法：v-for = "（item,index） in 数组"；item 是每一项，index是索引；

        省略 index 则 v-for = "item in 数组"

        注意：v-for 的默认行为会尝试 原地修改元素 （就地复用），因而我们最好加上v-for 中的key，并且给元素添加的唯一标识，便于Vue进行列表项的正确排序复用。

        注意点：

        1. key 的值只能是 字符串 或 数字类型

        2. key 的值必须具有 唯一性

        3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）；

（7）v-model：

        作用：给表单元素使用，双向数据绑定 -> 可以快读获取或设置表单元素内容

        ① 数据变化 → 视图自动更新

        ② 视图变化 → 数据自动更新

        语法: 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