Vue 核心技术与实战day01

目录

Vue 是什么

创建 Vue 实例，初始化渲染

插值表达式 {{ }}

Vue 核心特性：响应式

安装 Vue 开发者工具

Vue 指令

v-html

v-show

v-if

v-else   v-else-if

v-on

​编辑

v-on 调用传参

v-bind

v-for

v-for 中的 key

v-for 中的 key - 不加 key

v-model

---

Vue 是什么

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

Vue 的两种使用方式：

① Vue 核心包开发

场景：局部 模块改造

② Vue 核心包 & Vue 插件 工程化开发

场景：整站 开发

优点：大大提升开发效率 (70%↑)

缺点：需要理解记忆规则 → 官网

Vue是什么？

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

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

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

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

创建 Vue 实例，初始化渲染

1. 准备容器

2. 引包 (官网) - 开发版本 / 生产版本

对于制作原型或学习         使用开发版本

3. 创建 Vue 实例 new Vue()

4. 指定配置项 el data => 渲染数据

① el 指定挂载点，选择器指定控制的是哪个盒子

② data 提供数据

插值表达式 {{ }}

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

1. 作用: 利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会将其计算出一个结果

表达式的本质是一个值

2. 语法：{{ 表达式 }}

3. 注意点：

Vue 核心特性：响应式

我们已经掌握了基础的模板渲染，其实除了基本的模板渲染，Vue背后还做了大量工作。

比如：数据的响应式处理 → 响应式：数据变化，视图自动更新

如何访问 or 修改？data中的数据, 最终会被添加到实例上

① 访问数据： "实例.属性名" 

② 修改数据： "实例.属性名" = "值"

数据改变，视图会自动更新

聚焦于数据 → 数据驱动视图

使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可

安装 Vue 开发者工具

装插件调试 Vue 应用

（1）通过谷歌应用商店安装 （国外网站）

（2）极简插件: 下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件

https://chrome.zzzmh.cn/index

打开 Vue 运行的页面，调试工具中 Vue 栏，即可查看修改数据，进行调试。

Vue 指令

Vue 会根据不同的【指令】，针对标签实现不同的【功能】

指令：带有 v- 前缀 的 特殊 标签属性

v-html

v-html:

作用：设置元素的 innerHTML，可以动态解析标签

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

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. 语法：

① v-on:事件名 = "内联语句"

② v-on:事件名 = "methods中的函数名"

3. 简写： @事件名

v-on:         可以简写为@

4. 注意：methods函数内的 this 指向 Vue 实例

v-on 调用传参

v-bind

1. 作用： 动态的设置html的 标签属性 → src url title ...

2. 语法： v-bind :属性名 ="表达式"

3. 注意： 简写形式 :属性名="表达式"（即把v-bind去掉）

v-for

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

2. 遍历数组语法：

v-for = "( item, index ) in 数组 "

item 每一项， index 下标

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

v-for 中的 key

语法： key属性 = "唯一标识"

作用： 给列表项添加的 唯一标识 。便于Vue进行列表项的 正确排序复用 。

注意点：

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

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

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

v-for 中的 key - 不加 key

v-for 的默认行为会尝试 原地修改元素 （ 就地复用 ）

v-model

1. 作用: 给 表单元素 使用, 双向数据绑定 → 可以快速 获取 或 设置 表单元素内容

双向数据绑定

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

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

2. 语法: v-model = '变量'