VUE基础使用与监听器和计算属性

// 开发环境版本, 包含了帮助的命令行警告
<srcipt src='https://cdn.jsdeliver.net/npm/vue/dist/vue.js'></script>

// 生产环境版本, 优化了尺寸和速度
<srcipt src='https://cdn.jsdeliver.net/npm/vue'></script>

第一个Vue程序（Hello Vue）

导入开发版本的Vue.js

创建Vue实例对象，设置el属性和data属性

使用简洁的模板语法把数据渲染到页面上

el挂载点相关问题

Vue实例的作用范围是什么呢？

Vue会管理el选项命中的元素及其内部的后代元素

是否可以使用其他的选择器？

当然是可以的我们可以使用class , 还有css里面其它一些标签等等，开发建议选择Id选择器

是否可以设置其他的dom元素呢

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

下面简单展示的第一个Vue程序、el挂载点使用例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
    //         Vue实例的作用范围是什么呢 ?
    //             Vue会管理el选项命中的元素及其内部的后代元素

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

    //         是否可以设置其他的dom元素呢 ?
    //             可以使用其他的双标签, 不能使用HTML和BODY
            var app = new Vue({
                el: "#app",
                // el: ".app", 使用类选择器
                // el: "div", 标签选择器
                data: {
                    message: "阿士大夫撒地方是"
                }
            })
        })
    </script>
</head>
<body>
    <div id="app" class="app">
        {{message}}
    </div>
</body>

</html>

data:数据对象

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

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

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

下面简单展示关于对象和数组的使用例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
            // 1.Vue中用到的数据定义在data中
            // 2.data中可以写复杂类型的数据
            // 3.渲染复杂类型数据时, 遵守js的语法即可
            var app = new Vue({
                el: "#app1",
                data: {
                    message: "阿士大夫撒地方是",
                    school: {
                        name: '鳖精打学',
                        mobile: '13456789'
                    },
                    campus: ['asaf', 'dfa', '456']
                }
            })
        })
    </script>
</head>

<body>
    <div id="app1">
        {{message}}
        <h2>{{school.name}}{{school.mobile}}</h2>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
            <li>{{campus[2]}}</li>
        </ul>
    </div>
</body>

</html>

vue模板语法

插值操作 Mustache

Mustache语法 (双大括号)

可以直接写变量

可以写简单的表达式

插值操作 Mustache代码如下：

<h2>沙发上{{message+'!'}}</h2>

v-html

v-html指令的作用是:设置元素的innerHTML，内容中有html结构会被解析为标签，v-text指令无论内容是什么,只会解析为文本

v-html指令代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: {
                    content: '<h1>v-html会解析标签</h1>',
                    content2: '<h1>v-text只解析文本</h1>'
                }
            })
        })
    </script>
</head>

<body>
    <div id="app">
        <!-- v-html指令的作用是:设置元素的innerHTML
        内容中有html结构会被解析为标签
        v-text指令无论内容是什么,只会解析为文本 -->
        <div>
            <p>132</p>
            <p>132</p>
            <p>798</p>
        </div>
        <div v-html="content">
            <p>132</p>
            <p>132</p>
            <p>798</p>
        </div>
        <div v-text="content2">
        </div>
    </div>
</body>

</html>

v-text

v- text指令的作用是: 设置标签的内容(textContent)，默认写法会替换全部内容, 使用插值表达式可以替换指定内容，内部支持写表达式

v-text指令代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: {
                
                    message: '哈哈哈'
                }
            })
        })
    </script>
</head>

<body>
    <div id="app">
        <!--
        v- text指令的作用是: 设置标签的内容(textContent)
        默认写法会替换全部内容, 使用差值表达式份可以替换指定内容
        内部支持写表达式  -->
        {{message+'!'}}
        <h2 v-text="message+'!'">变变变</h2>
        <h2>沙发上{{message+'!'}}</h2>
    </div>
</body>

</html>

v-bind

v-bind代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: {
                    imgSrc: './img/怪兽1.webp',
                    isActive: false,
                },
                methods: {
                    show: function () {
                        this.isActive = !this.isActive
                    },
                }
            })
        })
    </script>
    <style>
        .active {
            border: 1px solid rgb(218, 32, 32);
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- v-bind指令的作用是:为元素绑定属性
        完整写法是v-bind:属性名
        简写的话可以直接省略v-bind,只保留:属性名
        需要动态的增删class建议使用对象的方式 -->
        <!--三元运算符的形式 ：true就添加类名，false就为空-->
        <img :src="imgSrc" alt="" @click="show" :class="isActive?'active':''">
        <!--对象的形式： active值是否生效取决于isActive -->
        <img :src="imgSrc" alt="" @click="show" :class="{'active':isActive}">
    </div>
</body>

</html>

v-show

v-show代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: {
                    isShow: false,
                    age: 17
                },
                methods: {
                    show: function () {
                        this.isShow = !this.isShow
                    },
                    add: function () {
                        this.age++;
                    }
                }
            })
        })
    </script>
</head>

<body>
    <div id="app">
        <!-- v-show指令的作用是:根据真假切换元素的显示状态
        原理是修改元素的display,实现显示隐藏
        指令后面的内容,最终都会解析为布尔值
        值为true元素显示,值为false元素隐藏
        数据改变之后,对应元素的显示状态会同步更新 -->
        <img v-show="isShow" src="./img/怪兽1.webp" alt="">
        <img v-show="age>18" src="./img/怪兽2.webp" alt="">
        <button @click="show">显示</button>
        <button @click="add">增加年龄</button>
    </div>
</body>

</html>

v-if

v-if代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: {
                    isShow: false,
                    age: 19
                },
                methods: {
                    show: function () {
                        this.isShow = !this.isShow
                    },
                }
            })
        })
    </script>
</head>

<body>
    <div id="app">
        <!-- v-if指令的作用是:根据表达式的真假切换元素的显示状态
        本质是通过操纵dom元素来切换显示状态
        表达式的值为true,元素存在于dom树中,为false,从dom树中移除
        频繁的切换v-show,反之使用v-if,前者的切换消耗小
         -->
         <input type="button" value="切换显示" @click="show">
         <p v-if="isShow">if是从dom树中移除</p>
         <p v-show="isShow">show是display显示隐藏</p>
         <h2 v-if="age>18">符合条件显示</h2>
    </div>
</body>

</html>

v-for

v-for代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: {
                    arr: ['困困1', '困困2', '困困3', '困困4'],
                    arr2: [
                        { name: '大坤吧' },
                        { name: '大坤吧' },
                        { name: '大坤吧' }
                    ]
                },
                methods: {
                    add:function() {
                        this.arr2.push({name:'大坤吧'})
                    },
                    remove:function(){
                        this.arr2.shift()
                    }
                }
            })
        })
    </script>
</head>

<body>
    <div id="app">
        <!-- v-for指令的作用是:根据数据生成列表结构
        数组经常和v-for结合使用
        语法是( item,index ) in数据
        item和index可以结合其他指令一起使用
        数组长度的更新会同步到页面上,是响应式的 -->
        <button @click="add">添加</button>
        <button @click="remove">删除</button>
        <ul>
            <li v-for="(item,index) in arr">{{item}}阿斯蒂芬{{index}}</li>
        </ul>
        <p v-for="item in arr2">{{item}}</p>
    </div>
</body>

</html>

v-on

v-on代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: {

                },
                methods: {
                    add: function (k) {
                        console.log('adsaf');
                        console.log(k);
                    },
                    key: function (key) {
                        console.log(key);

                    }
                }
            })
        })
    </script>
</head>

<body>
    <div id="app">
        <!-- 
        事件绑定的方法写成函数调用的形式，可以传入自定义参数
        定义方法时需要定义形参来接收传入的实参
        事件的后面跟上.修饰符可以对事件进行限制
        .enter可以限制触发的按键为回车
        事件修饰符有多种 -->
        <input type="button" value="点击" @click="add('ikun')">
 <!--<div class="item1" @click="click1">
            <div class="item2" @click.self="click2">
                <div class="item3" @click="click3"></div>
            </div>
        </div> -->
        <input type="text" @keyup.enter="key('回车了')">
    </div>
</body>

</html>

修饰符	作用	实际调用
.stop	阻止事件冒泡	@事件名.self
.prevent	阻止默认事件	@事件名.prevent
.self	阻止y元素冒泡到自己	-
.native	监听组件根元素的原生事件	-
.once	只触发一次回调	-

v-for遍历数组

v-for代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: {
                    arr: ['困困1', '困困2', '困困3', '困困4'],
                    arr2: [
                        { name: '大坤吧' },
                        { name: '大坤吧' },
                        { name: '大坤吧' }
                    ]
                },
                methods: {
                    add:function() {
                        this.arr2.push({name:'大坤吧'})
                    },
                    remove:function(){
                        this.arr2.shift()
                    }
                }
            })
        })
    </script>
</head>

<body>
    <div id="app">
        <!-- v-for指令的作用是:根据数据生成列表结构
        数组经常和v-for结合使用
        语法是( item,index ) in数据
        item和index可以结合其他指令一起使用
        数组长度的更新会同步到页面上,是响应式的 -->
        <button @click="add">添加</button>
        <button @click="remove">删除</button>
        <ul>
            <li v-for="(item,index) in arr">{{item}}阿斯蒂芬{{index}}</li>
        </ul>
        <p v-for="item in arr2">{{item}}</p>
    </div>
</body>

</html>

v-modl表单绑定

v-modl表单绑定代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'hehehe',
                },
                methods: {
                    add: function (k) {
                        this.message ='飞机砸蛋'
                    },
                    key: function (key) {
                     alert('修改成功')
                     this.message=''
                    }
                }
            })
        })
    </script>
</head>

<body>
    <div id="app">
        <!-- 
        v-model指令的作用是便捷的设置和获取表单元素的值
        绑定的数据会和表单元素值相关联
        绑定的数据一→表单元素的值 -->
        <input type="button" value="修改message" @click="add">
        <input type="text" v-model="message" @keyup.enter="key">
        <p>{{message}}</p>
    </div>
</body>

</html>

v-model结合radio类型使用

v-model结合radio类型使用代码：

<div id="app">
    <label for="male">
        <inout type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="male">
        <inout type="radio" id="female" value="女" v-model="sex">nv
    </label>
    <h2>您选择的性别是: {{sex}}</h2>
</div>

cosnt app = new Vue({
    el: '#app',
    data: {
        sex: '男'
    }
})

v-model结合checkbox类型使用

v-model结合checkbox单选框类型使用：

// 需求: 是否同意该协议, 同意后下一步

<div id="app">
    <label for="agree">
        <inout type="checkbox" id="agree"  v-model="isAgree">同意协议
    </label>
    <buttion :disabled="!isAgree">下一步</button>
</div>

cosnt app = new Vue({
    el: '#app',
    data: {
        isAgree: false
    }
})

// 点击文字部分也可以选中

v-model结合checkbox多选框类型使用：

<div id="app">
    <label for="agree">
        <inout type="checkbox" value="足球" v-model="hobbies">足球
    </label>
    <label for="agree">
        <inout type="checkbox" value="篮球" v-model="hobbies">篮球
    </label>
    <label for="agree">
        <inout type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    </label>
    <h2>您的爱好是: {{hobbies}}</h2>
</div>

cosnt app = new Vue({
    el: '#app',
    data: {
        isAgree: false,
        hobbies: []
    }
})

v-model结合select类型使用

下拉框单选

v-model绑定的是一个值

当选中option中一个时, 会将它对应的value赋值到mySelect中

v-model结合 下拉框单选类型使用：

<select v-model="mySelect">
    <option value="apple">苹果<option>
    <option value="orange">橘子<option>
    <option value="banana">香蕉<option>
</select>
<p>您最喜欢的水果: {{mySelect}}</p>

下拉框多选

v-model绑定的是一个数组

当选择多个值时,会将选中的option对应的value添加到数组mySelect中

v-model结合 下拉框多选类型使用：

<select v-model="mySelect" multiple>
    <option value="apple">苹果<option>
    <option value="orange">橘子<option>
    <option value="banana">香蕉<option>
</select>
<p>您最喜欢的水果: {{mySelect}}</p>

值绑定

                含义: 动态的给value赋值
                1 在前面的value中的值, 都是在定义input的时候直接给定的
                2 但真实开发中, input的值可能是从网络获取或定义在data中的
                3 可以通过v-bind:value动态的给value绑定值

值绑定代码:

<div id="app">
    <label v-for="item in nums" :for="item">
        <inout type="checkbox" value="item" :id="item" v-model="hobbies">{{item}}
    </label>
    <h2>您的爱好是: {{hobbies}}</h2>
</div>

cosnt app = new Vue({
    el: '#app',
    data: {
        hobbies: [],
        nums: ['篮球', '足球', '羽毛球']
    }
})

检测数组更新

Vue是响应式, 所以当数据发生变化时, Vue会自动检测数据变化, 视图会发生对应的更新.

Vue中观察数据编译的方法 – 用它们改变数组会触发视觉更新

数组响应式方法	作用
push()	在数组中最后增加元素
pop()	删除数组中最后一个元素
shift()	删除数组中的第一个元素
unshift()	在数组最前面添加元素
splice()	删除 / 插入 / 替换元素
sort()	xx
reverse()	xx

计算属性 computed

计算属性 computed代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: {
                    firstName: 'li',
                    lastName: 'er',
                    result3:''
                },
                computed: {
                    fullName: {
                        // 一般没有set方法 
                        set: function (value) {

                        },
                        // 只读属性
                        get: function () {
                            return this.firstName + '' + this.lastName
                        }
                    }
                },
              
                methods: {
                },
            })
        })

    </script>
</head>

<body>
    <div id="app">
        {{fullName}}
        {{result3}}
    </div>
</body>

</html>

监听器watch

监听器watch代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: {
                    name: '123',
                    name1: '2',
                    form: {
                        name: '132132'
                    },
                    arr1: [1, 2, 3],
                },
                watch: {
                    // 方法1
                    // 把要监听的name值看作方法名，来进行监听。
                    name(newVal, oldVal) {
                        console.log('newVal', newVal);// 1234
                        console.log('oldVal', oldVal);// 123
                    },

                    //方法2
                    name1: {
                        // 把要监听的name值看作对象，利用hanler方法来进行监听
                        handler(newVal, oldVal) {
                            console.log('newVal', newVal); // 1234
                            console.log('oldVal', oldVal); // 123
                        }
                    },

                    // 高级用法
                    // 监听普通变量的变化可以使用以上两种方法，但是要监听变量值是某对象或者数组的时候，则不起作用。
                    // 例如，我们监听form对象内部属性的变化，是监听不到的。
                    // watch方法提供了一个deep属性（深度监听），该属性可以监听到对象内部属性的改变。
                    form: {
                        deep: true,
                        handler(newVal, oldVal) {
                            console.log('newVal', newVal);
                            console.log('oldVal', oldVal);
                        }
                    },

                    // 数组用法1
                    // （一维、多维）数组的变化不需要深度监听
                    arr1(newVal, oldVal) {
                        console.log('newVal1', newVal);
                        console.log('oldVal1', oldVal);
                    },
                    arr2(newVal, oldVal) {
                        console.log('newVal2', newVal);
                        console.log('oldVal2', oldVal);
                    },

                    //数组用法2
                    // 数组对象中对象属性变化监测需要使用deep:true深度监听，多少层内产生变化都可以监测到
                    arr1: {
                        handler(newVal, oldVal) {
                            console.log('newVal1', newVal);
                            console.log('oldVal1', oldVal);
                        },
                        deep: true
                    },
                    arr2: {
                        handler(newVal, oldVal) {
                            console.log('newVal2', newVal);
                            console.log('oldVal2', oldVal);
                        },
                        deep: true
                    }
                },
            methods: {
                fun(){
                    console.log(this.arr1);
                }
        },
            })
        })

    </script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="name">
        <input type="text" v-model="name1">
        <input type="text" v-model="form.name">
        <input type="text" v-model="arr1">
        <button @click="fun">arr1</button>
    </div>
</body>

</html>

生命周期

生命周期：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(function () {
            var app = new Vue({
                el: '#app',
                data: {
                },

                methods: {
                    msg() {

                    }
                },
                beforeCreate() {//创建前
                    // 前beforecreate
                    //  data methods计算属性监听器没有初始化完成，不能用，修改没有用
                    //  vue生命周期种只执行一次
                    console.log('创建前');
                },
                created() {//创建后
                    //后created*
                    //  data methods计算属性监听器初始化完成，可以修改，不触发update
                    //  可以做数据处理
                    //  发送请求获取数据
                    //  vue生命周期种只执行一次
                    console.log('创建后');
                },
                beforeMount() {//挂载前beforeMount
                    //vue生命周期种只执行一次
                    //虚拟dom还没有转为真实dom
                    console.log('挂载前');
                },
                mounted() {//挂载后mounted
                    //vue生命周期种只执行一次已经渲染为真实dom
                    //修改数据会触发update
                    //开启定时器
                    console.log('挂载后');
                },
                beforeUpdate() {//修改前beforeUpdate
                    //使用vue的数据是修改前的数据
                    console.log('修改前');
                },
                updated() {//修改后updated*
                    //使用vue的数据是修改后的数据
                    console.log('修改后');
                },
                beforeDestroy() {//销毁前beforeDestopy
                    //关闭定时器
                    console.log('销毁前');
                },
                destroyed() {//销毁后destroyed
                    console.log('销毁后');
                },
            })
        })

    </script>
</head>

<body>
    <div id="app">
        <!-- 生命周期:
                    创建
                        
                    挂载
                        前beforeMount
                            vue生命周期种只执行一次
                            虚拟dom还没有转为真实dom
                        后mounted*
                            vue生命周期种只执行一次已经渲染为真实dom
                            修改数据会触发update
                            开启定时器
                    更新
                        前beforeupdate
                            使用vue的数据是修改前的数据
                        后updated*
                            使用vue的数据是修改后的数据
                    销毁
                        前beforeDestopy *
                            关闭定时器
                        后destroyed

                    ref="注册名"：写在标签上，用来向vue实例中注册元素对象
                    $refs，vue实例的属性，用来获取注册的元素对象，在挂载后可用
                面试题: 说说你对vue生命周期的理解 -->
        <p></p>
        <button @click="msg"></button>
    </div>
</body>

</html>