生命周期
- 又名:生命周期回调函数、生命周期函数、生命周期钩子
- 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
- 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的
- 生命周期函数中的this指向是vm或组件实例对象
<!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="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 属性名opacity和属性值opacity一致,可简写 -->
<h2 :style="{opacity}">欢迎学习vue</h2>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
opacity: 1
},
// Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted
mounted() {
setInterval(() => {
vm.opacity -= 0.01
if (vm.opacity <= 0) {
vm.opacity = 1
}
}, 16);
},
})
/* setInterval(() => {
vm.opacity -= 0.01
if (vm.opacity <= 0) {
vm.opacity = 1
}
}, 16); */
</script>
</body>
</html>
常用的生命周期钩子:
1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作
2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等收尾工作
关于销毁vue实例:
1.销毁后借助vue开发工具看不到任何信息
2.销毁后自定义事件会失效,但原生DOM事件依然有效
3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程
<!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="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 :style="{opacity}">欢迎你来到VUE世界</h2>
<button @click="stop">点我停止变换</button>
</div>
<script>
// 生命周期函数中的this都是指向vm
const vm = new Vue({
el: '#root',
data: {
opacity: 1,
timer: ''
},
beforeCreate() {
},
created() {
},
beforeMount() {
},
mounted() {
// 开启定时器
this.timer = setInterval(() => {
this.opacity -= 0.05
if (this.opacity <= 0) {
this.opacity = 1
}
}, 160)
},
beforeDestroy() {
// 清除定时器
clearInterval(this.timer)
},
destroyed() {
},
methods: {
stop() {
// 清除定时器
// clearInterval(this.timer)
// $destroy():会触发销毁阶段的两个钩子函数
this.$destroy()
}
},
})
</script>
</body>
</html>
组件
组件:用来实现应用中局部功能代码和资源的一个集合
组件的作用:复用编码,简化项目编码,提高运行效率
模块:向外提供特定功能的js程序,一般就是一个js文件
模块的作用:复用js,简化js的编写,提高js运行效率
非单文件组件:一个文件中包含有n个组件
单文件组件:一个文件中只包含有一个组件
vue中使用组件的三大步骤:
1.定义组件(创建组件)
2.注册组件
3.使用组件(写组件标签)
一、如何定义一个组件?
使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有一定的区别:
区别如下:
1.1 el配置项不需要写——最终所有的组件都要通过一个vm管理,由vm中的el决定服务于哪个容器
2.1 data必须写成函数——避免组件被复用时,数据存在引用关系
备注:使用template可以配置组件结构
二、如何注册组件?
1.局部注册:靠new Vue的时候传入components选项
2.全局注册:靠Vue.component(‘组件名’,组件)
三、编写组件标签
<组件名></组件名>或<组件名 />
<!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="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- <h2>学校名称:{{schoolName}}</h2>
<h3>学校地址:{{schoolAddress}}</h3>
<hr>
<p>学生姓名:{{studentName}}</p>
<p>学生年龄:{{studentAge}}</p> -->
<!-- 3.编写组件标签 -->
<xuexiao></xuexiao>
<xuesheng></xuesheng>
</div>
<div id="app">
<hello />
</div>
</body>
<script>
// 1.创建school组件
const school = Vue.extend({
// el: '#root',不需要写el配置项,因为最终所有的组件都会被一个vm管理,由vm决定服务于那个容器
// data要用函数形式
data() {
return {
schoolName: '相思湖学院',
schoolAddress: '南宁市西乡塘区',
}
},
template: `<div>
<h2>学校名称:{{schoolName}}</h2>
<h3>学校地址:{{schoolAddress}}</h3>
</div>`
});
//1.创建student组件
const student = Vue.extend({
data() {
return {
studentName: '某某某',
studentAge: 20
}
},
template: `<div>
<p>学生姓名:{{studentName}}</p>
<p>学生年龄:{{studentAge}}</p>
</div>`
});
const hello = Vue.extend({
template: `<div>
<h5>你好啊!{{name}}</h5>
</div>`,
data() {
return {
name: '打工人'
}
},
})
// 全局注册
Vue.component('hello', hello)
new Vue({
el: '#root',
/* data() {
return {
schoolName: '相思湖学院',
schoolAddress: '南宁市西乡塘区',
studentName: '某某某',
studentAge: 20
}
}, */
// 注册组件(局部注册)
components: {
xuexiao: school,
xuesheng: student
}
})
new Vue({
el: '#app',
})
</script>
</html>
组件的注意点
1.关于组件名:
1.1 一个单词组成:
1.1.1 首字母小写:school
1.1.2 首字母大写:School
1.2 多个单词组成:
1.2.1 kebab-case:my-school
1.2.2 CameCase:MySchool(在脚手架中使用)
1.3 备注:
1.3.1 组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行
1.3.2 可以使用name配置项指定组件在开发者工具中呈现的名字
2.关于组件标签:
2.1
2.2
备注:不使用脚手架时,会导致后续的组件不能渲染
3.简写方式:
const school = Vue.extend(options) <==> const school = options
<!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="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>{{msg}}</h2>
<school>
</school>
</div>
<script>
const student = Vue.extend({
name: 'stu',
template: `<div>
<p>学生姓名:{{name}}</p>
<p>学生年龄:{{age}}</p>
</div>`,
data() {
return {
name: '相思湖学院',
age: 22
}
},
});
// 组件嵌套:在组件内注册组件,使组件内的模板使用组件
const school = Vue.extend({
// 在vue开发者工具中显示的
name: 'sch',
template: `<div>
<p>学校名称:{{name}}</p>
<p>学校地址:{{address}}</p>
<student></student>
</div>`,
data() {
return {
name: '相思湖学院',
address: '南宁市西乡塘区'
}
},
components: {
student
}
});
new Vue({
el: '#root',
data: {
msg: '欢迎大家'
},
components: {
school
}
})
</script>
</body>
</html>
关于VueComponent:
1.组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的
-
我们只需要写了组件标签,Vue解析时会帮我们创建对应组件的实例对象,即vue会帮我们执行的:new VueComponent(options)
-
特别注意:每次调用vue.extend,返回的都是一个全新的VueComponent
-
关于this指向:
4.1 组件配置项:
data函数,methods中的函数,watch中的函数,computed中的函数,他们的this均是VueComponent实例对象
4.2 new Vue()配置项:
data函数,methods中的函数,watch中的函数,computed中的函数,他们的this均是Vue实例对象
5. VueComponent的实例对象,以后简称vc;Vue的实例对象简称vm