生命周期
又名生命周期回调函数，生命周期函数，生命周期钩子
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
生命周期函数中的this指向是vm或者组件实例对象
<body><div id="root"><h2 :style="{opacity}">欢迎学习Vue</h2></div>
</body>
<script type="text/javascript">Vue.config.productionTip = false;const vm = new Vue({el:'#root',data:{opacity:1},//mounted生命周期函数// Vue完成模板的解析并把初始真实的DOM元素放入页面后（完成挂载），调用mountedmounted(){setInterval(()=>{this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1},16)}})// setInterval(()=>{// vm.opacity -= 0.01// if(vm.opacity <= 0) vm.opacity = 1// },16)
</script>
总结
组件
模块与组件
模块
向外提供特定功能的js程序，一般就是一个js文件
为什么：js文件很多很复杂
作用：复用js，简化js的编写，提高js运行效率
模块化
当应用中的js都以模块来编写，那这个应用就是模块化的应用
组件
用来实现局部（待定）功能效果的的代码集合
为什么：一个界面的功能很复杂
作用：复用编码，简化项目编码，提高运行效率
组件化
当应用中的功能都是多组建的方式来编写的，那这个应用就是一个组件化的应用
非单文件组件
一个组件中包含有n个组件
单文件组件
一个文件中只包含有一个组件
基本使用
<body><div id="root"><school></school><hr><student></student></div><div id="root2"><info></info></div>
</body>
<script type="text/javascript">Vue.config.productionTip = false;//创建组件const school = Vue.extend({template: `<div><h2>学校名称：{{name1}}</h2><h2>学校地址：{{adress1}}</h2></div>`,data(){return {name1:'清华大学',adress1:'北京'}}})const student = Vue.extend({template: `<div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,data() {return {studentName: 'zhangsan',age: 18}},})const info = Vue.extend({template: `<div><h2>你好{{address}}</h2></div>`,data() {return {address: '北京'}},})//全局注册Vue.component('info',info)const vm = new Vue({el:'#root',// data:{// name: '清华大学',// adress: '北京',// studentName: 'zhangsan',// age: 18// },// 注册组件（局部注册）components:{school,student}})new Vue({el:'#root2'})
</script>
注意点
组件的嵌套
<body><div id="root"><school></school></div></body>
<script type="text/javascript">Vue.config.productionTip = false;const student = Vue.extend({template: `<div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,data() {return {studentName: 'zhangsan',age: 18}},})//创建组件const school = Vue.extend({template: `<div><h2>学校名称：{{name1}}</h2><h2>学校地址：{{adress1}}</h2><student></student></div>`,data(){return {name1:'清华大学',adress1:'北京'}},components:{student}})new Vue({el:'#root',data:{msg:'你好啊'},// 注册组件（局部注册）components:{school,}})
</script>
VueComponent
一个重要的内置关系
VueComponent.prototype.proto===Vue.prototype
目的：让组件实例对象（vc）可以访问到Vue原型上的属性和方法
组件自定义事件
Vue脚手架
是Vue官方提供的标准化开发工具（开发平台）
安装
# 安装脚手架npm install -g @vue/cli# 进入要创建项目的文件夹下vue create 项目名称
render
- vue.js与vue.runtime.xxx.js的区别：
（1）vue.js是完整版的Vue.包含：核心功能+模板解析器
（2）vue.runtime.xxx.js是运行版的Vue,只包含核心功能，没有模板解析器 - 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容
修改默认配置
ref属性
- 被用来给元素或子组件注册引用信息（id的替代者）
- 应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc）
- 使用方式：
打标识：…
或者
获取：this.$refs.xxx
props配置
mixin混入
插件
scoped样式
让样式在局部生效，防止冲突
写法
<style scoped>
Todo-list案例
//安装
npm i nanoid//引入
import {nanoid} from 'nanoid'//调用
nanoid()//生成唯一的字符串
浏览器本地存储
全局事件总线
一种组件间通信的方式，适用于任意组件间通信
最好在beforeDestory钩子中，用$off去解绑当前组件所用到的事件
安装
new Vue({render: h => h(App),beforeCreate(){Vue.prototype.$bus = this//安装全局事件总线，$bus就是当前应用的vm}
}).$mount('#app')
使用
- 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
methods(){demo(data){.......}
}········
mounted(){this.$bus.$on('xxx',this.demo)
}
- 提供数据：this. b u s . bus. bus.emit(‘xxx’,数据)
消息订阅与发布
一种组件间的通信方式，适用于任意组件间通信
使用
- 安装pubsub: npm i pubsub-js
- 引入 import pubsub from ‘pubsub-js’
- 接收数据：A组件想接受数据，则在A组件中订阅消息，订阅的回调留在A组件自身
methods(){demo(data){·······}
},
········
mounted(){this.pid=pubsub.subscribe('xxx',this.demo)//订阅消息
}
- 提供数据 pubsub.publish(‘xxx’,数据)
- 最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)去取消订阅
$nextTick
语法：this.$nextTick(回调函数)
作用：在下一次DOM更新结束后执行其指定的回调，要在nextTick所指定的回调函数中执行
使用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行
过渡与动画
-
作用：在插入，更新，或者移除DOM元素时，在合适的时候给元素添加样式类名
-
图示
-
写法
准备好样式
（1）元素进入的样式
● v-enter:进入的起点
● v-enter-active：进入过程中
● v-enter-to：进入的终点
（2）元素离开的样式
● v-leave：离开的起点
● v-leave-active：离开过程中
● v-leave-to：离开的终点
使用包裹要过渡的元素，并配置name属性
<transition name="hello" appear><h1 v-show="isShow" class="demo">你好啊</h1>
</transition>
若有多个元素需要过渡，则需使用：，且每个元素都要指定key值