<div id="app">
<h2>姓名: {{name}}</h2>
<h2>年龄: {{age}}</h2>
<!-- v-on:指令用于绑定事件 -->
<button v-on:click= "updateName">修改姓名</button>
<button v-on:click= "updateage">修改年龄</button>
</div>
<script>
<!-- 开发版本 -->
<script src="../js/vue.js"></script>
创建一个vue对象
let vm = new Vue({
当前vue对象操作Dom
el: "#app",
当前vue对象管理的数据
data: {
name: "张三",
age: 20
},
（方法）
methods:{
//改姓名的方法
updateName(){
this.name="李四"
},
//改年龄的方法
updateage(){
this.age=40
}
},
})
</script>
v-on:指令用于绑定事件
关闭生产提示
Vue.config.productionTip = false
通过v-model指令，可以实现对数据的双向绑定，
v-bind:用于绑定属性，通过v-bind:绑定过的属性，可以在属性值可以写表达式
v-on:用于绑定事件，通过v-on:绑定过的事件，可以指定Vue实例定义的方法
v-for指令，用于列表渲染；类型渲染时，通常都要绑定key，key的作用是提高渲染性能。
注意：key必须是唯一，暂时可以将列表的索引作为key值去使用。
v-if 和 v-show 如何选择
如果页面需要反复切换显示和隐藏，用v-show。
如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，用v-if，
所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块后，再渲染指定的模块。
Vue的生命周期
<!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=30">改年龄</button>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script>
let vm = new Vue({
//指定挂载的容器
el: "#app",
//指定模板(如果有模板，vue会渲染整个模板：如果没有模板，vue会将el里面的所有内容当成模板使用)
// template:"<div><h2>{{name}}</h2><h2>{{age}}</h2></div>",
//数据
data: {
name: "张三",
age: 20,
list: []
},
methods: {
destroy() {
// 调用销毁当前Vue实例的方法
// 注意：销毁后，当前Vue实例对象还在，只是该对象不能在重新挂载页面了
this.$destroy()
}
},
//创建之前(数据初始化之前)
beforeCreate() {
console.log("---------------beforeCreate--------------");
//这个生命周期函数，基本上不用，除非要在vue实例身上的内容
this.__proto__.age = 200
this.__proto__.fn = function () {
alert("啊哈哈")
},
//vue实例，已经创建完成
console.log(this);
//vue身上数据还没有初始化完成
console.log(this.name + '' + this.age);
},
//创建完成(数据初始化完成)
created() {
console.log("-----------created ---------------");
//这个生命周期，通常用于初始化vue管理的数据，比如：ajax请求会放在这里
//vue实例，已经创建完成
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('-------beforeUpdate------------')
console.log(this.name + "" + this.age);
console.log(this.$el);
},
//修改完成(数据已经改了，并且重新挂载页面)
updated() {
console.log('------updated------------')
console.log(this.name + "" + this.age);
console.log(this.$el);
},
//销毁之前
beforeDestroy() {
console.log('-------beforeDestroy------------')
// 这个生命周期函数，会用的多一些
console.log(this);
// 对数据做任何的修改，都不会重新渲染到页面
this.name = '王五'
},
//销毁完成
destroyed() {
console.log('-------destroyed------------')
// 这个生命周期函数，几乎不用
console.log(this)
this.name = '王五'
},
})
setTimeout(() => {
//通过vue实例的$Mount方法,手动挂载容器
//通过el选项指定挂载容器，当模板渲染成功后，会离开挂载页面
//$mount能手动控制挂载时机
vm.$mount("#app")
}, 1000)
</script>
</body>
</html>
