插值表达式{{}}

• 插值表达式是一种 Vue 的模板语法

• 作用： 利用表达式进行插值，渲染到页面中
• 语法：{{ 表达式 }}

<div id="app">
      <p>{{msg}}</p> // 在vue中 {{表达式}} 称为插值表达式
 </div>
 
  const vm = new Vue({
        el: "#app",
        data: {
          //数据
          msg: "hello world",
        },
  });

表达式：

• 通俗理解：凡是可以写在赋值运算符的右边可以是表达式

注意点：

1. 使用的数据必须存在 （data）
2. 支持的是表达式，而非语句，比如：if for ...
3. 不能在标签属性中使用 {{ }} 插值

vue指令

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

v-text

作用：设置元素的 innerText,不能解析html标签

• 语法：v-html = "表达式 "

v-html

作用：设置元素的 innerHTML,可解析html标签

• 语法：v-html = "表达式 "

v-show

作用：控制元素显示隐藏

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

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

v-if

作用： 控制元素显示隐藏（条件渲染）

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

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

v-else-if v-else

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

• 语法： v-else= "表达式" v-else-if = "表达式"
• 注意：需要紧挨着 v-if 一起使用

v-on

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

• 语法：
  • v-on:事件名 = "内联语句"
  • v-on:事件名 = "methods中的函数名"
• 简写：@事件名 --> @click="fn"
• 注意： methods函数内的 this 指向 Vue 实例

v-on回调函数传参

• 如fn不传参数可省略回调函数的（）括号
• 没有括号默认传参是事件对象$event
• 在vue中事件对象的名字是固定的 叫$event

v-bind

作用： 在视图中动态地绑定HTML属性或组件属性到Vue实例的数据

• 语法： v-bind:属性名="表达式
• 简写: :属性名="表达式"
  • 简写是属性名前面加冒号 ：

v-for

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

• 遍历数组语法： v-for = "(item, index) in 数组"
• 遍历数字语法： v-for = "item in 数字"
  • 遍历数字后边的数字为多少就会遍历多少次，iten是计数。

v-for 中的 key

作用：为元素添加唯一的标识，如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

• 语法： ：key属性 = "唯一标识"
• v-for 的默认行为会尝试 原地修改元素 （就地复用）
• 注意：
  • key 的值只能是 字符串 或 数字类型
  • key 的值必须具有 唯一性
  • 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

v-model

作用： 给表单元素使用，双向绑定数据，可快速获取或设置表单元素的值

• 数据变化 → 视图自动更新
• 视图变化 → 数据自动更新
• 语法： v-model = '变量'

指令修饰符

• 通过 . 指明一些指令 后缀，不同 后缀 封装了不同的处理操作 → 简化代码

按键修饰符

• @keyup.enter ---- 键盘回车监听

原理： if(e.key === 'enter')

事件修饰符

• @事件名.stop ---- 阻止事件冒泡

原理： e.stopPropagation()

• @事件名.prevent ---- 阻止事件默认行为

原理： e.preventDefault()

v-model修饰符

• v-model.number ---- 转为数字型

原理： Number（）

• v-model.trim ---- 去除首尾空格

原理： trim（）

• v-model.lazy ---- 失去焦点再返回数据

原理： 默认情况下v-model内部是 oninput事件，lazy把它变成了 onchange事件

v-bind样式操作

• v-bind样式操作有三种：字符串拼接、数组、对象

1.字符串拼接

• v-bind:class="a + ' ' + b + ' ' + c"

原理： 字符串拼接，加空格，中间拼接一个空格

2.数组

• v-bind:class="[a,b,c]"

数组中所有的类，都会添加到盒子上，本质就是一个 class 列表，批量添加或删除类

3.对象

• v-bind:class="{a:true,b:true,c:true}

如果是true就保留

v-bind内联样式操作

• :style="{backgroundColor:'red',width: '100px',height:'100px',}"

使用{} 对象的方式 属性名和值 k -> value