Vue-day01

Vue 是什么？

Vue 是一个用于 构建用户界面 的 渐进式 框架

1. 构建用户界面：基于 数据 动态 **渲染 ** 页面

2. 渐进式：循环渐进的学习

3. 框架：一套完整的项目解决方案，提升开发效率 ↑(理解记忆规则)

   规则=》官网

创建 Vue 实例，初始化渲染的核心步骤：

1. 准备容器
2. 引包(官网) - 开发版本/生产版本
3. 创建 Vue 实例 new Vue()
4. 指定配置项 el data =》渲染数据
   1. el 指定挂载点，选择器指定控制是那个盒子
   2. data 提供数据

插值表达式

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

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

2. 语法格式？

{{表达式}}

3. 插值表达式注意点：

   1. 使用的数据要存在（data）

   2. 支持的是表达式，而非语句 if…for

   3. 不能在标签属性里面使用

Vue 响应是特性

1. 什么是响应式呢？

   数据改变，视图自动更新

   使用 Vue 开发=》专注于业务核心逻辑即可

2. 如何访问或修改数据呢？

   data 中的数据，最终会被添加到实例上

   1. 访问数据：“实例.属性名”
   2. 修改数据：“实例.属性名“=“值”

指令初步认识

1. 什么是 Vue 指令呢？

   指令就是带有 v-前缀 的特殊 属性，不同属性对应不同的功能

   学习不同指令=》解决不同业务场景需求

2. 如果需要动态解析标签，可以用哪个指令？语法？

   v-html = ”表达式“ =》 动态设置元素 innerHTML

Vue 指令

v-show

1. 作用：控制元素显示隐藏

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

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

4. 场景：频繁切换显示隐藏的场景(购物车显示与隐藏)

v-if

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

2. 语法：v-if = “表达式” 表达式值 true 显示，false 隐藏

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

4. 场景：要么显示，要么隐藏，不频繁切换的场景（请登录页面）

v-else v-else-if

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

2. 语法 v-else v-else-if=“表达式”

3. 注意：需要紧挨着 v-if 一起使用(不能单独使用)

v-on

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

2. 语法：

   1. v-on:事件名=“内联语句” eg：v-on:click="number++"
   2. v-on=事件名=“methods 中的函数名”

3. 简写 “v-on:” 等价于“ @”

v-on 调用传参

<button @click="fn(10)">咖啡10元</button>
//--------------------------------- methods: { // 提供逻辑处理函数 fn(a) {
this.money = this.money - a }, }

---

v-bind

1. 作用：动态的设置 html 的标签属性 =》src url title …
2. 语法：v-bind:属性名 =”表达式“
3. 简写：:属性名=“表达式” eg：v-bind:src='' 等价于 :src=''

v-for

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

2. 遍历数组语法：

   v-for="(item,index) in 数组" 注意空格 item 每一项，index 下标

3. 简写：如果不用 index 的话可以省略 index v-for='item in 数组'

v-for 中的 key

1. 语法：key 属性 = “唯一标识”
2. 作用：给列表项添加唯一标识。便于 Vue 进行列表项的正确排序复用
3. 注意点：
   1. key 的值只能是 字符串 或 数字类型
   2. key 的值必须具有 唯一性
   3. 推荐使用 id 作为 key (唯一) ，不推荐使用 index 作为 key (会变化，不对应)

v-model

1. 作用：给 表单元素 使用，双向数据绑定 =》可以快速 获取 或 设置表单元素内容
   1. 数据变化 =》视图自动更新
   2. 视图变化 =》数据自动更新
2. 语法：v-model=’变量‘