目录
31.生命函数
声明周期:
1.又名生命周期回调函数,生命周期钩子
2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数
3.生命周期函数的名字不可更改,但函数的具体内容是程序员更加需求编写的。
4.生命周期函数中的this指向是vm或组件实例对象
<body>
<div id="root">
<h2 v-if="a">hello</h2>
<h1 :style="{opacity}">{{str}}</h1>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
str: "我口袋只有玫瑰一片,此行又山高路远",
opacity: 1,
a: false,
},
// Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted
mounted() {
alert("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>
32.生命周期
VM的生命周期
将要创建====>调用beforeCreate函数
创建完毕====>调用created函数
将要挂载====>调用beforeMount函数
(重要)挂载完毕====>调用mounted函数
将要更新====>调用beforeUpdate函数
更新完毕====>调用updated函数
(重要)将要销毁====>调用beforeDestroy函数
销毁完毕====>调用destroyed函数
<body>
<div id="root">
<h1 :style="{opacity}">{{str}}</h1>
<button @click="stop">点我停止变换</button>
<button @click="opacity=1">点我透明度变为1</button>
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
str: "学习Vue,积累前端知识",
opacity: 1,
},
mounted() {
this.timer = setInterval(() => {
vm.opacity -= 0.01;
if (vm.opacity <= 0) vm.opacity = 1;
}, 16);
},
methods: {
stop() {
this.$destroy();
},
},
beforeDestroy() {
console.log("vm即将被销毁");
clearInterval(this.timer);
},
});
</script>
</body>
常见的生命周期钩子
1.mounted:发送Ajax请求,启动定时器,绑定自定义事件,订阅消息等[初始化操作]
2.beforeDestroy:清除定时器,解绑自定义事件,取消订阅消息等[收尾工作]
关于销毁Vue实例
1.销毁后借助Vue开发中工具看不到任何消息
2.销毁后自定义事件会失效,但原生DOM事件依然有效
3.一般不会在beforeDestroy操作数据,因为即使操作数据,也不会在触发更新流程了
33.组件的理解
34.非单文件组件
Vue中使用组件的三大步骤:
1.定义组件(创建组件)
2.注册组件
3.使用组件(写组件标签)
一、如何定义一个组件?
使用Vue.extend(options)创建,其中options和New Vue(option)时传入的那个option几乎一样,但也有点区别:
1.el不要写,为什么?最终所有组件都要经过一个vm的管理,由VM中的el决定服务哪个容器
2.data必须写出函数,为什么?——————避免组件被复用时,数据存在引用关系
备注:使用template可以配置组件结构
二、如何注册组件
1.局部注册:靠new Vue的时候传入components选项
2.全局注册:靠Vue.component('组件名',组件)
三、编写组件标签
<组件名></组件名>
<body>
<div id="root">
<h2>{{msg}}</h2>
<!--第三步:编写组件标签-->
<school></school>
<hr />
<!--第三步:编写组件标签-->
<student></student>
</div>
<div id="root2">
<hello></hello>
</div>
<script>
//第一步:创建school组件
const school = Vue.extend({
//el:'#root',组件定义时,一定不要写el配置下,因为最终所有的组件都要被一个vm管理,由vm决定服务哪个容器
template:
'<div><h2>学校名称:{{schoolName}}</h2><h2>学校地址:{{address}}</h2><button @click="showName">点我提示学校名称</button></div>',
data() {
return {
schoolName: "河北大学",
address: "保定",
};
},
methods: {
showName() {
alert(this.schoolName);
},
},
});
//第一步:创建student组件
const student = Vue.extend({
template:
" <div><h2>学生姓名:{{studentName}}</h2><h2>学生年龄:{{age}}</h2></div>",
data() {
return {
studentName: "罗源鑫",
age: 18,
};
},
});
const vm = new Vue({
el: "#root",
data: {
msg: "hello!",
},
//第二步:注册组件(局部组件)
components: {
school: school,
student: student,
},
});
//定义全局组件
const hello = Vue.extend({
template: "<div><h2>你好啊!{{name}}</h2></div>",
data() {
return {
name: "打工仔",
};
},
});
// 第二步:全局注册组件
Vue.component("hello", hello);
new Vue({
el: "#root2",
});
</script>
</body>
35.组件的几个注意点
几个注意点:
1.关于组件名:
一个单词组成:
第一种写法(首字母小写):school
第二种写法(首字母大写):School
多个单词组成:
第一种写法(kebab-case):'my-school',要用引号包裹注册
第二种写法(CamelCase):MySchool(需要Vue脚手架支持)
备注:
(1)组件名尽可能回避HTML中已有的元素名称
(2)可以使用name配置项指定组件在开发中工具中呈现的名字
2.关于组件标签
第一种写法:
第二种写法:
备注:不使用脚手架时,会导致后续组件不能渲染
3.一个简写方式:
const school=Vue.extend(options)看简写为:const school=options
<body>
<div id="root">
<h2>{{msg}}</h2>
<my-school></my-school>
</div>
<div id="root2">
<hello></hello>
</div>
<script>
const school = {
name: "xuexiao",
template: `
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,
data() {
return {
schoolName: "河北大学",
address: "保定",
};
},
methods: {
showName() {
alert(this.schoolName);
},
},
};
const vm = new Vue({
el: "#root",
data: {
msg: "hello!",
},
components: {
"my-school": school,
},
});
</script>
</body>
36.组件的嵌套
<body>
<div id="root">
<app></app>
</div>
<script>
const student = {
template: `
<div>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
</div>
`,
data() {
return {
name: "LYX",
age: "18",
};
},
};
const school = {
name: "xuexiao",
template: `
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="showName">点我提示学校名</button>
<student></student>
</div>
`,
data() {
return {
schoolName: "河北大学",
address: "保定",
};
},
methods: {
showName() {
alert(this.schoolName);
},
},
components: {
student,
},
};
const hello = Vue.extend({
template: `
<h1>{{msg}}</h1>
`,
data() {
return {
msg: "积累前端知识,争做前端高手",
};
},
});
const app = Vue.extend({
template: `
<div>
<hello></hello>
<school></school>
</div>
`,
components: {
school: school,
hello,
},
});
const vm = new Vue({
el: "#root",
data: {
msg: "hello!",
},
components: {
app,
},
});
</script>
</body> <body>
<div id="root">
<app></app>
</div>
<script>
const student = {
template: `
<div>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
</div>
`,
data() {
return {
name: "LYX",
age: "18",
};
},
};
const school = {
name: "xuexiao",
template: `
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="showName">点我提示学校名</button>
<student></student>
</div>
`,
data() {
return {
schoolName: "河北大学",
address: "保定",
};
},
methods: {
showName() {
alert(this.schoolName);
},
},
components: {
student,
},
};
const hello = Vue.extend({
template: `
<h1>{{msg}}</h1>
`,
data() {
return {
msg: "积累前端知识,争做前端高手",
};
},
});
const app = Vue.extend({
template: `
<div>
<hello></hello>
<school></school>
</div>
`,
components: {
school: school,
hello,
},
});
const vm = new Vue({
el: "#root",
data: {
msg: "hello!",
},
components: {
app,
},
});
</script>
</body>
37.Vuecomponent
关于VueComponent
1.school组件本质是应该名为Vuecomponent的构造函数,且不是程序员定义的,是Vue。extend生成的
2.我们只需要写或,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)
3.特别注意:每次调用Vue.extend,返回的都是一个全新的Vuecomponent
4.关于this指向:
(1)组件配置中:
data函数,methods中的函数,watch中的函数,computed中的函数,它们的this均是[VueComponent实例对象]
(2)new Vue(options)配置中:
data函数,methods中的函数,watch中的函数,computed中的函数,它们的this均是[Vue实例对象]
5.VueComponent的实例对象,以后简称VC(也可以简称为:组件实例对象)
38.Vuecomponent和Vue的内置关系
1.一个重要的内置关系:VueComponent.prototype.__proto===Vue.prototype
2.为什么要有这个关系:让组件实例对象(vc)可以访问到Vue原型上的属性和方法
39.单文件组件
单文件组件要配合vue脚手架使用
main.js文件:
import Vue from 'vue'
import App from '/.app.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
#.vue文件,这个是app.vue
<template>
<div>
<img src="" alt="logo" />
<school></school>
<student></student>
</div>
</template>
<script>
//引入组件
import school from "./components/school.vue";
import student from "./components/student";
export default {
name: "app",
components: {
school,
student,
},
};
</script>
<style></style>
#school.vue文件
<template>
<!--组件的结构-->
<div class="demo">
<h2>学校名称:{{ SchoolName }}</h2>
<h2>学校地址:{{ address }}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
//组件交互相关的代码(数据,方法等)
export default {
data() {
return {
SchoolName: "河北大学",
address: "保定",
};
},
methods: {
showName() {
alert(this.SchoolName);
},
},
};
</script>
<style></style>
#student.vue文件
<template>
<!--组建的结构-->
<div class="demo">
<h2>学生姓名:{{ name }}</h2>
<h2>学生年龄:{{ age }}</h2>
</div>
</template>
<script>
//组件交互相关的代码(数据,方法等)
export default {
data() {
return {
name: "LYX",
age: 18,
};
},
};
</script>
<style></style>
在vue脚手架文件夹命令行输入npm run serve,运行编译,得到本地服务器地址和局域网地址
40.render函数
关于不同版本的Vue:
1.vue.js与vue.runtime.xxx.js的区别
(1)vue.js是完整版的Vue,包含:核心功能+模板解析器
(2)vue.runtime.xxx.js是运行版的Vue,只包含:核心功能,没有模板解析器
2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体函数
持续更新~~~