文章目录
- [Ⅰ. 背景介绍](#Ⅰ. 背景介绍)
-
- [什么是 Vue](#什么是 Vue)
- [Vue 学习内容和方法](#Vue 学习内容和方法)
- 必备插件
- [Ⅱ. 声明式渲染](#Ⅱ. 声明式渲染)
- [Ⅲ. 数据响应式](#Ⅲ. 数据响应式)
-
- 一、安装Vue开发者工具
- 二、数据响应式
-
- [1. 什么是数据响应式](#1. 什么是数据响应式)
- [2. 解决方案](#2. 解决方案)
- [三、响应式函数 `reactive`](#三、响应式函数
reactive) - [四、响应式函数 `ref`](#四、响应式函数
ref) - [五、reactive 与 ref 的选择](#五、reactive 与 ref 的选择)
Ⅰ. 背景介绍
什么是 Vue
概念：Vue（读音/vjuː/，类似于view）是一套构建用户界面的渐进式JavaScript框架
Vue3官网：https://cn.vuejs.org/
- 什么是构建用户界面：基于数据渲染出用户可以看到的界面
- 什么是渐进式：循序渐进的学习，即不必把
Vue中的所有API都学完才能开发Vue，可以学一点开发一点
Vue 学习内容和方法
- 声明式渲染 + 数据响应式
- 数据渲染：插值 + 指令 + 计算属性 + 侦听器 ...
- 组件及组件化：生命周期 + 组件 + 组件化 + 组件通信 + 插槽 ...
- 路由：配置 + 跳转 + 传参 + 嵌套 + 守卫 ...
- 状态管理：Pinia
- ElementPlus：核心组件Form、Table、Dialog、Menu...
- 阶段实战：Vue3全家桶 + ElmentPlus
必备插件
- Vue (Official)
- 提供Vue文件的语法高亮
- 支持Vue文件的智能感知和自动完成
- 提供了Vue文件的格式化工具
- Vue 3 Snippets
- 提供Vue3相关的代码片段，方便快速输入常见代码结构
- Path Intellisense
- 路径自动补全
- Auto Import
- 自动导入插件，可帮助自动完成和自动导入模块
- AutoCloseTag
- 自动闭合HTML标签
- AutoRenameTag
- 自动重命名HTML标签
Ⅱ. 声明式渲染
一、Vue 的 HelloWorld 程序
1. CDN 引入 vuejs
html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>2. 准备容器
html
<div id="app">
</div>3. 创建应用
html
<script>
// 创建Vue应用
Vue.createApp({
// 入口函数
setup() {
// 准备数据
const msg = 'Hello World'
// 返回数据对象
return {
msg
}
}
}).mount('#app') // 内容渲染到 id=app 的盒子里
</script>4. 渲染数据
html
<div id="app">
<h1>{{ msg }}</h1>
</div>二、setup函数
setup 函数是 Vue3 API 的入口函数
setup函数是Vue3特有的选项，作为编写代码的起点- 标签中用到的数据或函数，需要在
setup中声明并返回 - 函数中
this不是Vue实例，setup中是不会用到this的
三、插值表达式
刚刚通过 {``{ msg }} 渲染出 Hello World，在 Vue3 中，{``{ 表达式 }} 称之为插值表达式。
作用：把 表达式的结果 展示在 双标签 中
语法
{``{ 表达式 }}，表达式指凡是有结果的操作/运算，前端中常见的表达式有：
- 所有的字面量
- 对象.属性名
- 算术运算或三元运算
- 方法的调用
步骤
script下的setup中定义并返回初始数据
template 中插值展示数据
代码示例
html
<div id="app">
<!-- 1. 直接放变量 -->
<h1>{{ msg }}</h1>
<!-- 2. 对象.属性 -->
<p>我叫 {{ obj.name }}, 今年 {{ obj.age }} 岁</p>
<!-- 3. 三元表达式 -->
<p>{{ obj.age >= 18 ? '已成年' : '未成年' }}</p>
<!-- 3. 算数运算 -->
<p>来年我就 {{ obj.age + 1 }} 岁了</p>
<!-- 4. 函数的调用 -->
<p>fn的返回值是: {{ fn() }}</p>
<!-- 5. 方法的调用 -->
<p>{{ msg }} 中含有 {{ msg.split(' ').length }} 个单词</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
setup() {
// 字符串
const msg = 'Hello World'
// 对象
const obj = {
name: '小vue',
age: 9
}
// 函数
function fn() {
return 100
}
// 返回
return {
msg,
obj,
fn
}
}
}).mount('#app')
</script>Ⅲ. 数据响应式
一、安装Vue开发者工具
- 通过谷歌应用商店安装（科学上网）
- 极简插件下载（推荐）https://chrome.zzzmh.cn/index
安装之后，Chrome 进入开发者工具后，会看到多一个 Vue 的调试面板
二、数据响应式
1. 什么是数据响应式
简单的说：就是数据变了，视图跟着变
借助开发者工具，发现数据不可改，也就是说，默认声明的数据，不具备响应式特性；
换句话说，即使数据变了，视图也不会更新。
2. 解决方案
那如何才能实现数据响应式呢？
需要借助我们接下来学习的 reactive、ref 响应式函数
三、响应式函数 reactive
- 从
Vue中解构出reactive函数 - 在
setup函数中，使用reactive函数，传入一个普通对象，返回一个响应式数据对象 - 最后
setup函数返回一个响应式对象，供模板使用
💥注意：reactive 接收的参数是对象
html
<div id="app">
<p>我叫 {{ obj.name }}, 今年 {{ obj.age }} 岁</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
// 解构出 reactive 响应式函数
const { createApp, reactive } = Vue
createApp({
setup() {
// 接收一个对象作为参数
// 返回一个响应式对象(当对象的属性值变了, 视图会跟着变)
const obj = reactive({
name: '小vue',
age: 9
})
return {
obj
}
}
}).mount('#app')
</script>四、响应式函数 ref
通常使用 ref 函数定义响应式数据，不限类型 ；但****如果是对象，推荐使用 reactive
- 从
Vue中解构出ref函数 - 给
ref传入指定类型的数据，得到一个响应式数据
💥注意：操作 ref 创建的数据，js 中需要 .value ，template 则不用 .value
html
<div id="app">
<!-- ref数据: 在 template 中使用不用 .value -->
<h3>{{ msg }}</h3>
<p>我叫 {{ obj.name }}, 今年 {{ obj.age }} 岁</p>
<button @click="onClick">修改ref数据</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
// 解构出 createApp, ref 函数
const { createApp, ref } = Vue
createApp({
setup () {
// ref 定义一个响应式字符串
const msg = ref('Hello Vue3')
// ref 定义一个响应式对象
const obj = ref({
name: '小vue',
age: 9
})
// 点击事件
const onClick = () => {
// 修改 msg
msg.value = '你好, Vue3'
// 修改 obj 的 name 和 age 属性
obj.value.name = 'Vue3'
obj.value.age = 10
}
return {
msg,
obj,
onClick
}
}
}).mount('#app')
</script>五、reactive 与 ref 的选择
分析
reactive只接收对象作为参数，不支持简单数据类型。ref既可以接收基本类型，也可以接收引用类型，但在操作的时候需要.value。- 它们各有特点，现在也没有最佳实践，没有明显的界限，所有小伙伴们可以自由选择
推荐用法
如果数据是对象、并且字段名称也确定，推荐使用 reactive 赋予数据响应式，其他一律使用 ref。