一. Vue简介

1. Vue理解

1.1 特点

JavaScript 框架

简化Dom操作（使用Vue提供的特殊语法，Vue会自动的去操纵使用特殊语法的DOM元素）

响应式数据驱动（页面是由数据生成的）

渐进式的框架，你可以将Vue作为你应用的一部分嵌入其中

1.2 高级功能

解耦视图和数据

可复用的组件

前端路由技术

状态管理

虚拟DOM

1.3 第一个Vue程序

步骤

导入开发版本的Vue.js
创建Vue实例对象,设置el属性和data属性
使用简洁的模板语法把数据渲染到页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>HelloVue</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function(){
            const app = new Vue({
                <!-- el类型：String或HTMLElement -->
                el: '#app',<!-- data类型：Object或function -->
                <!-- 注意：组件当中data必须是一个函数 -->
                data: {
                    message: 'Hello Vue!'
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
</html>

el:挂载点

el是用来设置Vue实例挂载（管理）的元素

作用范围：Vue会管理el选项命中的元素及其内部的后代元素

可以使用其他的选择器,但是建议使用ID选择器

可以使用其他的双标签,不能使用HTML和BODY

data:数据对象

Vue中用到的数据定义在data中

data中可以写复杂类型的数据

渲染复杂类型数据时，遵守js的语法即可

<body>
    <div id="app">
        {{ message }}
        <h2>{{ person }}</h2>
        <h2>{{ person.name }}</h2>
        <h3>{{ words}}</h3>
        <h3>{{ words[2] }}</h3>
    </div>
    <script>
        const app = new Vue({
                el: '#app',data: {
                    message: 'Hello Vue!',person:{
                        name:"lak",gender:"女"
                    },words:["GG","TT","YY","MM"]
                }
            })
	</script>
</body>

2. Vue中的MVVM

3. Vue声明周期

3.1 Vue生命周期理解

也称为生命周期钩子，即生命周期函数

生命周期图示

3.2 总结

初始化阶段

beforeCrete函数，created函数，beforeMount函数，mounted函数

运行状态阶段

beforeUpdade函数，updateed函数

销毁阶段

beforeDestory函数，destoryed函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>HelloVue</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script>
        window.onload = function(){
            const app = new Vue({
                el:"#app",data:{
                    msg:"GG"
                },method:{},//1.生命周期中的第一个函数，该函数在执行时Vue实例仅仅完成了
                //  自身事件的绑定和生命周期函数的初始化工作，Vue实例中还没
                //  有Data，el，methods相关属性
                beforeCreate(){
                    console.log("beforeCreate:" + this.msg);//拿不到该属性
                },//2.生命周期中的第二个函数，该函数在执行时Vue实例已经初始化
                //  化了data属性和methods中相关方法
                created(){
                    console.log("create:" + this.msg);
                },//3.生命周期的第三个函数，该函数在执行时Vue将el中指定作用范围
                //  作为模板编译
                beforeMount(){
                    console.log("beforeMount:" + 
                        document.getElementById("sp").innerText);
                    //beforeMount:{{msg}}
                },//4.生命周期的第四个函数，该函数在执行过程中，已经将数据渲染到
                //  界面中并且已经更新页面
                mounted(){
                    console.log("beforeMount:" + 
                        document.getElementById("sp").innerText);
                    //beforeMount:GG
                },//5.生命周期的第五个函数，该函数是data中数据发生变化时执行的，
                //  此事件执行时仅仅时Vue实例中的data数据变化，而页面中显示的还是
                //  原始数据
                beforeUpdate(){},//6.生命周期的第六个函数，此事件执行时Vue实例中的data数据
                //变化，页面中的数据也相应发生了变化
                update(){},//7
                beforeDestory(){},//8
                destoryed(){},})
            
        }
    </script>
</head>
<body>
    <div id="app" >
        <span id="sp">{{msg}}</span>
    </div>
</body>
</html>