1:官网贴图表明一切
2:vue-cli中的vue实例化
3:html页面中引入cdn方式的vue实例化
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="changeText">{{text}}</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data(){
return {
text: 'hello'
}
},
methods: {
changeText(){
this.text = this.text+1
}
}
})
console.log('this', this)
</script>
</html>
生命周期钩子函数
1: beforeCreate
此时vue实例刚被创建，它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch等
此时data和dom都还未被初始化
2: created
data已经被初始化，并且完成了数据监听设置
此时dom还未被初始化
3: beforeMount
4:mounted
完成组件的挂载
5:beforeUpdate
6:update
7:brforeDestroy
8:destroyed
vm实例刚被创建 ==> 此时DOM元素和data数据还没有被初始化 ==>
遍历对象的属性(Object.defineProperty 设置成可观察模式，数据监听) ==>
模版编译 ==> render function 生成虚拟DOM ==> 生成真实DOM ==>
数据渲染 ==> 监听数据变化==>
虚拟DOM的diff和patch操作进行异步更新
//生命周期的钩子函数中this指向调用它的vue实例
4:额外注意点补充
1: 组件的data为什么必须是函数
保证组件之间的数据独立性
5:vue组件之间的通信方式
1:父子组件 props/$emit
2:兄弟组件 中央事件总线 $emit/$on
3:父子组件 $ref/$parent/$children
4:vuex--全局通信(实现机制)
