Vue

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

Vue优点

易用：上手相较React和Anglar来说更简单。
灵活：渐进式技术。
性能好：采用虚拟DOM、双向数据绑定等技术。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引用Vue.js文件 -->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 获取msg中的数据并展示 -->
        {{msg}}
    </div>
    
    <script>
    // 创建Vue对象，挂载到上面div（id：app）中
    Vue.createApp({
        data(){
            return {
                msg: 'Hello!',
            }
        }
    }).mount('#app')
    </script>
</body>
</html>

Vue指令

v-bind（可用“：”代替）

数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url" :title="title">百度</a>
    </div>
    
    <script>
    Vue.createApp({
        data(){
            return {
                title: '百度一下',
                url: 'https://www.baidu.com'
            }
        }
    }).mount('#app')
    </script>
</body>
</html>

v-on（可用“@”代替）

事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="btnNext">下一张</button>
        <button @click="btnBack">上一张</button>
    </div>
    
    <script>
    Vue.createApp({
        methods: {
            btnNext() {
                this.i += 1;
                if (this.i > 2){
                    this.i = 0;
                }
            },
            btnBack() {
                this.i -= 1;
                if (this.i < 0){
                    this.i = 2;
                }
            }
        }
    }).mount('#app')
    </script>
</body>
</html>

v-if

判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  -->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3 v-if="score > 90">优秀</h3>
        <h3 v-else-if="score >= 90">优秀</h3>
        <h3 v-else-if="score >= 70 && score < 90">良好</h3>
        <h3 v-else-if="score >= 60 && score < 70">及格</h3>
        <h3 v-else>不及格</h3>
    </div>
    
    <script>
    Vue.createApp({
        data(){
            return {
                score: 91
            }
        }
    }).mount('#app')
    </script>
</body>
</html>

v-for

数据遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  -->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in dataList" :key="index">{{item}}</li>
        </ul>
    </div>
    
    <script>
    Vue.createApp({
        data(){
            return {
                dataList: [
                    "张飞",
                    "关羽",
                    "刘备"
                ],
            }
        }
    }).mount('#app')
    </script>
</body>
</html>

v-model

用于数据双向绑定，data中定义的数据发生变化时，页面中的数据也跟着变化。修改页面中的数据时，data中的数据也跟着变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  -->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="score">
    </div>
    
    <script>
    Vue.createApp({
        data(){
            return {
                score: 85
            }
        }
    }).mount('#app')
    </script>
</body>
</html>

MVVM开发模式（Model-View-ViewModel的简写）
Vue是一种采用MVVM开发模式的框架，简化DOM开发操作。

Model：模型，要操作的数据。

View：视图，页面结构。

ViewModel：视图模型，连接Model和View的桥梁。

CompositionAPI

Vue2采用的是OptionsAPI，Vue3采用的是CompositionAPI，Vue3兼容Vue2的OptionsAPI。

CompositionAPI

响应式数据声明
分为**ref()和reactive()**两种声明方式。

**setup()**是CompositionAPI的入口函数。

通过**ref()和reactive()**声明的数据必须在Setip中return。

ref()响应式数据声明方式

通常用来定义简单数据类型（数值型、字符串等）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  -->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>姓名：{{name}}</h3>
        <h3>年龄：{{age}}</h3>
        姓名<input type="text" v-model="name"/>
        年龄<input type="text" v-model="age"/>
    </div>
    
    <script>
        const { ref } = Vue;
        let name = ref('小明');
        let age = ref(20);

        const app = {
            setup() {
                return {name, age};
            }
        }

        Vue.createApp(app).mount('#app')
    </script>
</body>
</html>

reactive()响应式数据声明方式

通常用来定义复杂数据类型（数组、对象）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  -->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li>ID:{{state.id}}</li>
            <li>姓名:{{state.name}}</li>
            <li>年龄:{{state.age}}</li>
        </ul>
    </div>
    
    <script>
        const { reactive } = Vue;
        let state = reactive({
            id: 1001,
            name: "张三",
            age: 18
        })

        const app = {
            setup() {
                return {state};
            }
        }

        Vue.createApp(app).mount('#app')
    </script>
</body>
</html>

Vue生命周期
生命周期：挂载、更新、销毁。

Vue实例的生命周期会伴随各种事件，这些事件对应的函数叫做生命周期函数/生命周期钩子/生命周期钩子函数。
生命周期函数会在某一时刻自动运行。
- 挂载：创建Vue实例并挂载到页面上。
  1. beforeCreate：创建之前
  2. created：创建完成，一般用来初始化页面需要的数据。
  3. beforeMount：挂载之前。
  4. Mounted：挂载完成，挂在完成后可以直接操作DOM对象。
- 更新：页面发生变化
  1. beforeUpdate：更新之前。
  2. update：更新完成。
- Vue2.0与Vue3.0不同
  1. CompositionAPI取消了beforeCreate和created，直接使用setup即可。
  2. 所有的钩子函数必须从Vue对象中解构出来。
  3. 所有的钩子函数前都要加on。

Vue框架

Vue

Vue优点

示例代码

Vue指令

v-bind（可用“：”代替）

v-on（可用“@”代替）

v-if

v-for

v-model

MVVM开发模式（Model-View-ViewModel的简写）

CompositionAPI

响应式数据声明

ref()响应式数据声明方式

reactive()响应式数据声明方式

Vue生命周期

挂载：创建Vue实例并挂载到页面上。

beforeCreate：创建之前

created：创建完成，一般用来初始化页面需要的数据。

beforeMount：挂载之前。

Mounted：挂载完成，挂在完成后可以直接操作DOM对象。

更新：页面发生变化

beforeUpdate：更新之前。

update：更新完成。

Vue2.0与Vue3.0不同