Vue初相识
vue文档地址：Vue.js (vuejs.org)
1、引入下载好的vue.js文件或者是复制好的文件链接
2、先在html文件中准备一个容器（盒子）给vue使用
3、 使用 new Vue({})创建一个Vue对象。在Vue对象中定义的所有数据，所有的方法都会成为当前vue实例（也是一个对象）的成员。
3.1、 Vue.config.productionTip = false 关闭生产提示
3.2、 el:"容器名称" 当前vue对象操作的DOM对象。
3.3、data：{}。定义当前vue对象管理的数据
3.4、methods：{}。定义当前vue对象管理的方法。只要数据发生变化，页面模板就会重新渲染
实例：
<body>
<div id="app">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<button v-on:click="updateName">修改姓名</button>
<button v-on:click="updataAge">修改年龄</button>
</div>
<!-- 开发版本 -->
<script src="../js/vue.js"></script>
<!-- 生产版本 -->
<!-- <script src="../js/vue.min.js"></script> -->
<script>
// 关闭生产提示
Vue.config.productionTip = false
let vm = new Vue({
el: '#app',
data: {
name: '李易峰',
age: 34
},
methods: {
// 修改姓名的方法
updateName() {
this.name = "李贺"
},
// 修改年龄的方法
updataAge() {
this.age = 35
}
}
})
</script>
二、生命周期函数
1、el:'容器名称'。如果没有的话则执行下一步
2、vm.%EF%BC%9A%20%E9%80%9A%E8%BF%87Vue%E5%AE%9E%E5%88%97%E7%9A%84)
mount方法，手动挂载容器。公共el选项指定挂载容器，当模板渲染成功后，会离开挂在页面。$mount方法的好处是，可以自行选择挂载的时机。
3、template:''。指定模板。如果有模板，Vue渲染整个模板。如果没有模板，Vue则会将el里面的所有的内容当作模板。
##生命周期函数
1、 beforeCreate( { })。创建之前，（数据初始化之前）不经常使用，除非是设置Vue实例的内容。
2、 created( { })。创建完成。（数据初始化完成）在这个里面可以操作管理数据。重点这个生命周期函数，通常用于初始化Vue管理的数据。比如：发生Ajax请求会放在这里。
3、 beforeMount( { })。 挂载之前（模板已经成功渲染，但是还没有将内容挂载到页面中）这个生命周期函数，基本上不用。
4、 mounted ( { })。 挂载完成(模板已经成功渲染，并且)已经将模板内容挂载到了页面。这个声明周期函数，通常用于对DOM的重新改动。重点
5、beforeUpdate ( { })。修改之前(数据已经修改了，只是还没有重新挂载页面)。
6、updated ( { })。 修改完成（数据已经改了，页面也已经重新挂载了）。
7、beforeDestroy ( { })。销毁之前(这个生命周期函数，使用频率较高)，对数据做任何的修改，都不会重新渲染到页面。
8、destroyed ( { })。销毁完成（这个声明周期函数几乎不使用）。
示例：
<!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>vue的生命周期</title>
</head>
<body>
<div id="app">
<h2 id="name">{{name}}</h2>
<h2 id="age">{{age}}</h2>
<div>
<button @click="name='李贺' ">修改姓名</button>
<button @click="age=35">修改年龄</button>
<button @click="destroy">不过了</button>
</div>
</div>
<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js'></script>
<script>
Vue.config.productionTip = false
let vm = new Vue({
// el: '#app',
// template:'<div><h2>{{name}}</h2><h2>{{age}}</h2></div>',
data: {
name: "李易峰",
age: 34
},
methods: {
destroy() {
// 调用销毁当前Vue实例的方法
// 注意：销毁后，当前Vue实例还在，只是不能重新挂载页面
this.$destroy()
}
},
beforeCreate() {
// 设置Vue实例的内容
this.__proto__.fn = function () {
alert("Hello")
}
// Vue实例已经创建完成
console.log(this);
// Vue实例身上的数据还没有初始化完成
console.log(this.name + ' ' + this.age);
},
created() {
// 这个生命周期函数，通常用于初始化Vue管理的数据。比如：发生Ajax请求会放在这里。
console.log(this);
console.log(this.name + ' ' + this.age);
},
beforeMount() {
console.log(this.$el);
// document.querySelector('#name').innerHTML = '呵呵'
},
mounted() {
// 这个声明周期函数，通常用于对DOM的重新改动
console.log(this.$el);
// document.querySelector('#name').innerHTML = '李贺'
},
beforeUpdate() {
console.log('5555---beforeUpdate----------');
console.log(this.$el);
// 断点
// debugger
},
updated() {
console.log('6666666---updated--------');
console.log(this.$el);
},
beforeDestroy() {
// 这个生命周期函数，使用频率较高
console.log(this);
// 对数据做任何的修改，都不会重新渲染到页面
this.name = "李易峰0504"
},
destroyed() {
console.log('888888------destroyed-------');
console.log(this);
this.name = "李易峰0504"
},
})
setTimeout(() => {
vm.$mount('#app')
}, 2000);
</script>
</body>
</html>
