目录
048.引出生命周期
<!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>引出生命周期</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
生命周期：
1.又叫：生命周期回调函数、生命周期函数、生命周期钩子
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称函数
3.生命周期函数名字不可更改，但函数的具体内容是程序员根据需求编写的
4.生命周期函数中的this指向是vm或组件实例对象
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2 :style="{opacity}">欢迎学习vue</h2>
</div>
</body>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
new Vue({
el: '#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
data: { // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
opacity:1
},
// Vue完成模板的解析并把初始的真实DOM元素放入页面后（完成挂载）调用mounted
mounted(){
setInterval(() => {
this.opacity-=0.01
if(this.opacity<=0)this.opacity=1
}, 16);
}
})
// 通过外部的定时器实现（不推荐）
/* setInterval(() => {
vm.opacity-=0.01
if(vm.opacity<=0)vm.opacity=1
}, 16); */
</script>
</html>049.生命周期挂载流程
050.生命周期更新流程
051.生命周期销毁流程
052.生命周期总结
<!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>总结生命周期</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
常用的生命周期钩子：
1.mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
2.beforeDestroy：清楚定时器、解绑自定义事件、取消订阅等【收尾工作】
关于销毁Vue实例：
1.销毁后借助vue开发者工具看不到任何信息
2.销毁后自定义事件会失效，但原生DOM事件依然有效
3.一般不会再beforeDestroy操作数据，因为即便操作数据也不会再触发更新流程了
-->
<!-- 准备好一个容器 -->
<div id="root">
<h2 :style="{opacity}">欢迎学习vue</h2>
<button @click="stop">点我停止变换</button>
</div>
</body>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
new Vue({
el: '#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
data: { // data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
opacity:1
},
methods: {
stop(){
// 销毁vm
this.$destroy()
}
},
// Vue完成模板的解析并把初始的真实DOM元素放入页面后（完成挂载）调用mounted
mounted(){
this.timer=setInterval(() => {
this.opacity-=0.01
if(this.opacity<=0)this.opacity=1
}, 16);
},
// 销毁之前
beforeDestroy() {
// 清楚定时器
clearInterval(this.timer)
},
})
</script>
</html>053.对组件的理解
054.非单文件组件--基本使用
非单文件组件：一个文件中包含有n个组件
单文件组件：一个文件中只包含有1个组件
<!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>基本使用</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
Vue中使用组件的三大步骤：
1.定义组件（创建组件）
2.注册组件
3.使用组件（写组件标签）
如何定义一个组件：
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有区别：
1 el不要写，为什么? 最终所有的组件都要经过一个vm管理，由vm中的el决定服务哪个容器
2 data必须写成函数，为什么？ 避免组件被复用时，数据存在引用关系
备注：使用template可以配置组件结构
如何注册组件：
1 局部注册：靠new Vue的时候传入components选项
2 全局注册：靠Vue.component('组件名'，组件) Vue.component('School'，school)
编写组件标签：
<组件名></组件名> <School></School>
-->
<!-- 准备好一个容器 -->
<div id="root">
<!-- 3 编写组件标签 -->
<School></School>
<School></School>
<hr>
<!-- 3 编写组件标签 -->
<Studet></Studet>
</div>
</body>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
// 1 创建school组件
const school= Vue.extend({
template:`
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data(){
return{
schoolName: '西西歪',
address: '广州'
}
}
})
// 1 创建studet组件
const studet= Vue.extend({
template:`
<div>
<h2>学生姓名：{{studetNtname}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data(){
return{
studetNtname: '张三',
age:'18'
}
}
})
new Vue({
el: '#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
// 2 注册组件
components:{
School:school,
Studet:studet
}
})
</script>
</html>055.组件的几个注意点
<!--
几个注意点：
1 关于组件名：
一个单词组成：
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School
多个单词组成：
第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名): MySchool(需要vue脚手架支持)
备注：
组件名尽可能回避HTML中已有的元素名称，例如：h2/H2都不行
可以使用name配置项指定组件开发者工具中呈现的名字
2 关于组件标签：
第一种写法： <School></School>
第二种写法： <School/>
备注：不使用脚手架时，<School/>会导致后续组件不能渲染
3 一个简写方式：
const school= Vue.extend({options}) 可简写为：const school= options
-->056.组件的嵌套
<!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>组件的嵌套</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
-->
<!-- 准备好一个容器 -->
<div id="root">
<!-- 编写组件标签 -->
</div>
</body>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
// 创建studet组件
const studet= Vue.extend({
template:`
<div>
<h2>学生姓名：{{studetNtname}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data(){
return{
studetNtname: '张三',
age:'18'
}
}
})
// 创建school组件
const school= Vue.extend({
template:`
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<Studet></Studet>
</div>
`,
data(){
return{
schoolName: '西西歪',
address: '广州'
}
},
// 注册组件
components:{
Studet:studet
}
})
// 创建hello组件
const hello =Vue.extend({
template:`
<div>
<h1>{{msg}}</h1>
</div>
`,
data(){
return{
msg:'欢迎来西西歪学习'
}
}
})
// 创建app组件
const app =Vue.extend({
template:`
<div>
<Hello></Hello>
<School></School>
</div>
`,
components:{
Hello:hello,
School:school
}
})
new Vue({
template:` <App></App> `,
el: '#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
// 注册组件
components:{
App:app
}
})
</script>
</html>057.VueComponent构造函数
<!--
关于VueComponent：
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2.我们只需要写<school/>或 <school></school>，Vue解析时会帮我们创建school组件的实例对象，
即Vue帮我执行：new VueComponent(options)
3.特别注意：每次调用Vue.extend返回的都是一个全新的VueComponent
4.关于this指向：
组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【VueComponent实例对象】
new Vue()配置中：
data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是【Vue实例对象】
5.VueComponent的实例对象，以后简称VC（也可称之为：组件实例对象）
Vue的实例对象，以后简称vm
-->058.Vue实例与组件实例
059.一个重要的内置关系
一个重要的内置关系：VueComponent.prototype._proto_===Vue.prototype
为什么要有这个关系：让组件实例对象（vc)可以访问到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>一个重要的内置关系</title>
<!-- 引入Vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!--
一个重要的内置关系：VueComponent.prototype._proto_===Vue.prototype
为什么要有这个关系：让组件实例对象（vc)可以访问到Vue原型上的属性、方法
-->
<!-- 准备好一个容器 -->
<div id="root">
<!-- 3 编写组件标签 -->
<School></School>
</div>
</body>
<script>
Vue.config.productionTip = false //以阻止 Vue 在启动时生成生产提示
Vue.prototype.x = 99
// 1 创建school组件
const school= Vue.extend({
template:`
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showx">点我输出</button>
</div>
`,
data(){
return{
schoolName: '西西歪',
address: '广州'
}
},
methods: {
showx(){
console.log(this.x);
}
},
})
new Vue({
el: '#root', //el用于指定当前vue实例为哪个容器服务，值通常为CSS选择器字符串
// 2 注册组件
components:{
School:school,
}
})
</script>
</html>
060.单文件组件
单文件组件后缀是.vue，在浏览器中不能运行.vue文件，所以单文件组件要用脚手架运行
首先建立一个单文件组件School.vue，template写结构，script写脚本，style写样式
<template>
<div class="demo">
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
export default {
name:'School',
data(){
return{
schoolName: '西西歪',
address: '广州'
}
},
methods: {
showName(){
alert(this.schoolName)
}
},
}
</script>
<style>
.demo{
background-color: #fff;
}
</style>然后建立一个App.vue组件（汇总所有组件），在App.vue里引入、注册、使用School.vue，运行解析模板
<template>
<div>
<School></School>
</div>
</template>
<script>
import { School } from "./School.vue";
export default {
name:'App',
components:{
School
}
}
</script>
<style>
</style>接着新建一个入口文件main.js，里面引入、注册、使用App.vue；创建vue实例，指明为哪个容器服务
import App from "./App.vue";
new Vue({
el:'#root',
template:`<App></App>`,
components:{App},
})最后打来一个index.html文件，里面准备好一个容器，引入vue和入口文件main.js
<!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>练习一下单文件组件的语法</title>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root"></div>
<script src="../js/vue.js"></script>
<script src="./main.js"></script>
</body>
</html>
