一、Vue背景
1. 为什么学Vue
1.前后端开发就业必备技能
2.岗位多,绝⼤互联⽹公司都在使⽤Vue,还可以助⼒SpringBoot、C++等项⽬开发
3.提⾼开发效率
更少的时间,干更多的活,提高项目开发速度
原生JS做法

Vue做法

总而言之: 使用Vue能够赋能、提升就业竞争、做出更优质的项目
2. 什么是Vue
Vue 是一套 构建用户界面 的 渐进式 JavaScript 框架
Vue官网: https://cn.vuejs.org/

2.1 什么是构建用户界面
基于数据生成标签结构, 配合CSS样式, 可以渲染出好看的用户界面(UI)

2.2 什么是渐进式
循序渐进的学, 学多少用多少
局部改造: Vue 的部分功能
整站开发: Vue3 + VueRouter + Pinia + 工程化 + 模块化
2.3 什么是框架
框架: 一种规则, 学习 Vue 就是学习语法, 运用规则的阶段, 它是程序员必须遵守的规则/规范
3. Vue 的学习内容
**数据渲染:**插值+指令+计算属性+监听器...
组件及组件化: 生命周期+组件+组件化(开发大型网站,可以分成一小块一小块进行局部开发)+组件通信+插槽...
路由: 配置+跳转+传参+嵌套+守卫...状态管理: Pinia 不同的页面共享数据,而Pinia就可以管理共享的数据
ElementPlus: 核心组件 Form, Table, Dialog, Menu..
阶段实战: Vue3全家桶+ElementPlus.
4. 准备Vue代码编写环境
4.1 安装VSCode
直接去官网进行下载: Visual Studio Code - Code Editing. Redefined
4.2 必备插件
- Vue-Offical
◦ 提供 Vue ⽂件的语法⾼亮
◦ ⽀持 Vue ⽂件的智能感知和⾃动完成
◦ 提供了 Vue ⽂件的格式化⼯具
- Vue 3 Snippets
◦ 提供 Vue 3 相关的代码⽚段,⽅便快速输⼊常⻅代码结构
- Path Intellisense
◦ 路径⾃动补全
- Auto Import
◦ ⾃动导⼊插件,可帮助⾃动完成和⾃动导⼊模块
- Auto Close Tag
◦ ⾃动闭合HTML标签
- Auto Rename Tag
◦ ⾃动重命名HTML标签。

4.3 Vue代码写哪里?
传统开发模式:基于html⽂件开发Vue,类似jQuery的使⽤, <script src="vue.js"></script>

⼯程化开发⽅式: 在 构建⼯具(Vite/Webpack 等)环境下开发Vue, 这是最推荐的、也是企业采⽤的⽅式

总结:
-
传统开发⽅式,直接⽤script引⼊vue.js⽂件
-
在⼯程化环境下,借助Vite对Vue代码进⾏打包
我们先用传统方式来上手, 后续再用工程化
二、声明式渲染
1. 编写第一个 Hello Word 程序
1> 引入Vue3的源代码(本地或者在线)
javascript
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
2> 准备容器 把Hello Word 渲染到div里面
html
<div id="app">
</div>
3> 创建应用并提供数据
javascript
<script>
// 3. 创建 vue3 应用并提供数据
// console.log(Vue) 可以查看Vue的方法
Vue.createApp({
//vue3的入口函数
setup() {
const msg = 'Hello World!'
return {
// msg: msg
//简写
msg
}
}
}).mount('#app')//告诉程序是渲染到哪个div里面, 此时是把内容渲染到 id = app的 容器里面
</script>
4> 渲染数据 {{ 数据名 }}
html
<div id="app">
<h1>{{ msg }}</h1>
</div>
具体的流程: 根据mount()指定数据放在哪个容器里面
完整代码:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1. 引入 vue3 源代码 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 2. 准备容器 -->
<div id="app">
<!--4. 渲染数据 -->
{{ msg }}
</div>
<div id="another">
{{ msg }}
</div>
<script>
// 3. 创建 vue3 应用并提供数据
// console.log(Vue) 可以查看Vue的方法
Vue.createApp({
//vue3的入口函数
setup() {
const msg = 'Hello World!'
return {
// msg: msg
//简写
msg
}
}
}).mount('#app')//告诉程序是渲染到哪个div里面, 此时是把内容渲染到 id = app的 容器里面
</script>
</body>
</html>
2. setup函数
setup函数
1> vue3特有的, 也是 vue3 代码编写的入口/起点
2> 在标签中用到的数据或函数, 需要在 setup 函数中申明并返回
3> setup中的 this 不指向 Vue实例, 并且在setup中也不会用到this
3. 插值表达式
声明式渲染: 又叫胡子语法, 也叫做插值表达式
语法: {{ 表达式 }}
作用: 把表达式的结果展示/渲染到 双标签中
表达式: 任何有结果的运算或者操作都属于表达式, js常见表达式:
1> 变量名/字面量
2> 对象.属性名
3> 三元运算/算数运算等
4> 函数/方法的调用
代码演示
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<!-- 调用数据 -->
<!-- 1. 变量名 -->
<h1>{{ msg }}</h1>
<!-- 2. 对象.属性 -->
<p>
我叫{{ obj.name }},今年{{ obj.age }}
</p>
<!-- 3. 三元表达式 -->
<p> {{ obj.age > 18 ? '已成年' : '未成年' }}</p>
<!-- 4. 算数运算 -->
<p>明年我就{{ obj.age +1 }}了</p>
<!-- 5. 函数的调用 -->
<p>fn返回值{{ fn() }}</p>
<!-- 6. 方法的调用 -->
<p>{{ msg }}由{{ msg.split(' ').length }}个单词组成</p>
</div>
<script>
Vue.createApp({
setup() {
//定义变量
const msg = "hehihei xiao"
//定义对象
const obj = {
name: 'xiaobai',
age: 13
}
//定义函数/方法
const fn = () => {
return 666
}
//把数据返回给容器
return {
msg,//返回变量
obj,//返回对象
fn//返回函数
}
}
}).mount('#app')
</script>
</body>
</html>
数据传递过程

三、数据响应式
1. 安装Vue开发者工具(调试用)
直接在这里下载: https://chrome.zzzmh.cn/index
然后在Vue的拓展里面打开开发者模式, 把crx文件直接拖进去,点击详情, 开启允许访问文件网站
最后运行我们的vue代码,然后打开开发者工具, 看见vue就说明成功

2. 什么是数据响应式
数据响应式: 数据变了, 视图就会跟着变
数据: 在setup里面的就是数据
视图: HTML标签就是视图
数据变了, DOM就会变
默认在setuo里面声明的数据不具备响应式特性, 如果要具备的话就要使用 reactive 和 ref 函数 => 实现数据响应式

3. 响应式函数 reactive
reactive函数
1> 作用: 让一个对象具备响应式特性.(不能是其他数据, 数字, 字符串...)
2> 注意: 参数只能是对象
3> 使用:
从 Vue 中解构出 reactive 函数
给 reactive 函数传入对象作为参数(ceactive 会将这个对象变为响应式对象)
在调试工具中进行测试
具体代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<!-- 使用数据 -->
<p>我是{{ obj.name }},今年{{ obj.age }}了</p>
</div>
<script>
const { createApp, reactive } = Vue//从Vue中解构出 createApp, reactive
console.log(Vue)
createApp({
setup() {
//创建响应式对象
//reactive的参数只能是对象
const obj = reactive({
name: '小白',
age: 90
})
//返回响应式数据
return {
obj
}
}
}).mount("#app")//一定要指定给的是哪个容器
</script>
</body>
</html>
我们发现由reactive传过来的对象, 改变之后, 视图也会进行改变

4. 响应式函数ref
ref函数:
-
作用: 用来定义一个响应式数据, 可以是基本类型(数字, 字符串, 布尔等), 也可以是引用类型(数组, 对象等), 这说明ref的适用面更广. 把数据变成响应式数据,这个数据可以是基本类型,也可以是引用类型.
-
使用
1> 从 Vue 中解构出 ref 函数
2> 给 ref 函数传入指定的数据类型, ref 就可以把传入的数据变成响应式(什么数据都可以)
- 注意: ref 声明的响应式数据, 在标签中使用无需 .value, 但是在 js 中操作的时候, 需要 .value
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<!-- 在标签中 ref 返回的数据,不需要用.value来把数据表示出来, 标签中自动.value了
不需要 {{msg.value}} -->
<p>{{ msg }}</p>
<p>我是{{ obj.name }},今年{{ obj.age }}岁</p>
<button @click = "onClick">修改ref</button>
</div>
<script>
//从Vue对象中解构出 createApp, ref 函数
const { createApp, ref } = Vue
createApp({
setup() {
//ref 定义响应式字符串
const msg = ref('Hello xiaobai')
//ref 定义响应式对象
const obj = ref({
name: "xiao",
age: 9
})
// 在 js 中需要使用.value来拿到数据
//点击事件
const onClick = ()=>{
// 修改 msg
msg.value = '你好,Vue3'
//修改 obj 的 name 和 age 属性
//obj.value 才是拿到的 ref 对象
obj.value.name = 'vue3'
obj.value.age = 10
}
return {
obj,
msg,
onClick
}
}
}).mount("#app")
</script>
</body>
</html>
5. reactive 和 ref 的选择
问题: 在定义响应式数据的时候, 使用 reactive 还是 ref?
分析:
-
reactive : 只能接收对象作为参数, 不能接收基本数据类型
-
ref: 既可以接收解基本数据类型, 也可以接收引用数据类型, 但是在用 js 进行操作的时候, 需要'.value'来进行取值
结论:
-
如果要把一个对象变为响应式, 并且对象的属性是确定的, 那么推荐使用reactive(在js使用的时候便捷一些不需要.value
-
除此之外, 推荐一律使用 ref (对象的属性不确定, 定义响应式数组, 定义基本类型的响应式数据)

总结
