Vue背景介绍+声明式渲染+数据响应式

一、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 必备插件

1. Vue-Offical

◦ 提供 Vue ⽂件的语法⾼亮

◦ ⽀持 Vue ⽂件的智能感知和⾃动完成

◦ 提供了 Vue ⽂件的格式化⼯具

2. Vue 3 Snippets

◦ 提供 Vue 3 相关的代码⽚段，⽅便快速输⼊常⻅代码结构

3. Path Intellisense

◦ 路径⾃动补全

4. Auto Import

◦ ⾃动导⼊插件，可帮助⾃动完成和⾃动导⼊模块

5. Auto Close Tag

◦ ⾃动闭合HTML标签

6. Auto Rename Tag

◦ ⾃动重命名HTML标签。

4.3 Vue代码写哪里?

传统开发模式：基于html⽂件开发Vue,类似jQuery的使⽤, <script src="vue.js"></script>

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

总结:

1. 传统开发⽅式，直接⽤script引⼊vue.js⽂件

2. 在⼯程化环境下，借助Vite对Vue代码进⾏打包

我们先用传统方式来上手, 后续再用工程化

二、声明式渲染

1. 编写第一个 Hello Word 程序

1> 引入Vue3的源代码(本地或者在线)

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2> 准备容器把Hello Word 渲染到div里面

<div id="app">
</div>

3> 创建应用并提供数据

<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> 渲染数据 {{ 数据名 }}

<div id="app">
<h1>{{ msg }}</h1>
</div>

具体的流程: 根据mount()指定数据放在哪个容器里面

完整代码:

<!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> 函数/方法的调用

代码演示

<!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> 使用:

1. 从 Vue 中解构出 reactive 函数

2. 给 reactive 函数传入对象作为参数(ceactive 会将这个对象变为响应式对象)

3. 在调试工具中进行测试

具体代码

<!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函数:

1. 作用: 用来定义一个响应式数据, 可以是基本类型(数字, 字符串, 布尔等), 也可以是引用类型(数组, 对象等), 这说明ref的适用面更广. 把数据变成响应式数据,这个数据可以是基本类型,也可以是引用类型.

2. 使用

1> 从 Vue 中解构出 ref 函数

2> 给 ref 函数传入指定的数据类型, ref 就可以把传入的数据变成响应式(什么数据都可以)

3. 注意: ref 声明的响应式数据, 在标签中使用无需 .value, 但是在 js 中操作的时候, 需要 .value

<!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>