Vue 简单的语法

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

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

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

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

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

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

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

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

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

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

        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