Ⅰ. 背景介绍
什么是 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
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>2. 准备容器
<div id="app">
</div>3. 创建应用
<script>
// 创建Vue应用
Vue.createApp({
// 入口函数
setup() {
// 准备数据
const msg = 'Hello World'
// 返回数据对象
return {
msg
}
}
}).mount('#app') // 内容渲染到 id=app 的盒子里
</script>4. 渲染数据
<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中插值展示数据
代码示例
<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接收的参数是对象
<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
<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。