目录
附：1、*全局事件总线（任意组件间通信）
附：2、消息的订阅与发布（任意组件间通信）（vue中用的不是很多）
（五）、浏览器本地存储
一、生命周期
| beforeCreate() | vue 生命周期 初始化 开始 ， （挂载流程） |
| 已经发生 | 1、初始化：生命周期 目的是为了组件的生命周期 和 组件中的事件做准备 2、和事件 |
| 还未发生 | 数据代理未开始：（vue 中还没有出现data中的属性和_data属性） |
| create() | |
| 已经发生 | 1、初始化：生命周期 和 事件 2、数据监测：监测数组、对象 怎么匹配的及对象的一些getter，setter方法 3、数据代理 ：vue 可以 代理data中的 属性
|
| 还未发生 | vue 在 内存中 生成虚拟dom
|
| beforeMount() | 此时vue 还没有编译dom 操作，所有页面上的dom还是不奏效 |
| mounted() | |
| 已经发生 | 1、初始化：生命周期 和 事件 2、数据监测：监测数组、对象 怎么匹配的及对象的一些getter，setter方法 3、数据代理 ：vue 可以 代理data中的 属性 4、vue 在 内存中 生成虚拟dom 5、vue 编译了 dom 操作，页面上的dom奏效 6、 页面能显示解析好的dom
|
vue 生命周期 初始化 结束 | |
| beforeUpdate() | vue 生命周期 运行 开始 （更新流程） |
| 已经发生 | 1、初始化：生命周期 和 事件 2、数据监测：监测数组、对象 怎么匹配的及对象的一些getter，setter方法 3、数据代理 ：vue 可以 代理data中的 属性 4、vue 在 内存中 生成虚拟dom 5、数据更新了，页面还没来得及更新
|
| 还未发生 | 页面还没来得及更新 |
| updated() | |
| 已经发生 | 1、初始化：生命周期 和 事件 2、数据监测：监测数组、对象 怎么匹配的及对象的一些getter，setter方法 3、数据代理 ：vue 可以 代理data中的 属性 4、vue 在 内存中 生成虚拟dom 5、数据更新了，页面还没来得及更新 6、数据更新，页面更新
|
vue 生命周期 运行 结束 （更新流程） | |
| beforeDestroy() | vue 生命周期 销毁 开始 （销毁流程） |
| 已经发生 | 1、初始化：生命周期 和 事件 2、数据监测：监测数组、对象 怎么匹配的及对象的一些getter，setter方法 3、数据代理 ：vue 可以 代理data中的 属性 4、vue 在 内存中 生成虚拟dom 5、数据更新了，页面还没来得及更新 6、数据更新，页面更新 |
| 还未发生 | vm 中的所有 data ，methods，指令等 还可以使用 |
| destroy() | |
| 已经发生 | 1、初始化：生命周期 和 事件 2、数据监测：监测数组、对象 怎么匹配的及对象的一些getter，setter方法 3、数据代理 ：vue 可以 代理data中的 属性 4、vue 在 内存中 生成虚拟dom 5、数据更新了，页面还没来得及更新 6、数据更新，页面更新 7、vm 中的所有 data 、methods，指令等 不可以使用（以前成功使用的内容，不会销毁） 8、vm 销毁
|
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>Document</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<button @click=" message++ ">update</button>
<input type="text" @keydown.ctrl="ctrlchufa" placeholder="按下ctrl键触发">
<button @click="$destroy()">destroy</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 1,
arr: [1, 2, 3],
objArr: [{ name: 'jack' },
{ name: 'liMing' }],
},
methods: {
ctrlchufa: function () {
alert('ctrl键触发');
console.log('ctrl键触发');
}
},
beforeCreate() {
console.log("beforeCreate", this);
},
created() {
console.log("Create", this);
},
beforeMount() {
console.log("beforeMount", this);
// debugger;
},
mounted() {
console.log("mounted", this);
// debugger;
},
beforeUpdate() {
console.log("beforeUpdate", this);
},
updated() {
console.log("updated", this);
},
// vm.$destroy() 被调用的时候
beforeDestroy() {
console.log("beforeDestroy", this);
},
destroyed() {
console.log("destroyed", this);
debugger;
},
})
</script>
</body>
</html>二、组件
用来实现局部（特定） 功能代码 和 资源 的集合
（一）、非单文件组件
一个文件包含多个组件
使用组件的步骤：
1、创建组件 2、 注册组件 3、编写（调用）组件标签
<!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>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="root1">
<!-- 3、编写组件标签 -->
<Thehello></Thehello>
<welcome></welcome>
</div>
<hr>
<div id="root2">
<welcome></welcome>
</div>
<script>
// 1、创建hello组件
const hello = Vue.extend({
template: `
<div>
<div>{{helloObject}}</div>
<div>{{helloFunction}}</div>
</div>
`,
// 组件中的data 不能以对象的形式写,且需要返回
data() {
return {
helloObject: 'LiMing',
helloFunction: 'Waved'
}
},
})
// 1、创建welcome组件
const welcome = Vue.extend({
template: `
<div>
<h2>{{welcomeObject}}</h2>
<h2>{{welcomeFunction}}</h2>
</div>
`,
// 组件中的data 不能以对象的形式写,且需要返回
data() {
return {
welcomeObject: 'people',
welcomeFunction: 'hug'
}
},
})
// 注册公共组件welcome
Vue.component('welcome', welcome)
new Vue({
el: '#root1',
components: {
Thehello: hello, // hello
},
})
new Vue({
el: '#root2',
})
</script>
</body>
</html>（二）、组件嵌套
注意：
1、子组件必须在父组件 前面 创建
2、经常在项目中使用 一个总的组件app 来嵌套其他组件
<!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>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 组件嵌套 -->
<!-- 3、编写组件app标签 -->
<app></app>
</div>
<script>
// 1、创建welcome的子组件 thanks
// 子组件必须在父组件 前面 创建
const thanks = Vue.extend({
name: 'thanks',
template: `
<div>
<h4>{{thanksObject}}</h4>
<h4>{{thanksFunction}}</h4>
</div>
`,
//组件中的data 不能以对象的形式写,且需要返回
data() {
return {
thanksObject: 'thanks a person',
thanksFunction: 'thanks a hug'
}
},
})
// 1、创建welcome组件
const welcome = Vue.extend({
// 3、编写组件thanks标签
template: `
<div>
<h3>{{welcomeObject}}</h3>
<h3>{{welcomeFunction}}</h3>
<thanks></thanks>
</div>
`,
data() {
return {
welcomeObject: 'welcome-person',
welcomeFunction: 'welcome-hug',
}
},
// 2、注册thanks 组件
components: {
thanks: thanks
}
})
// 1、创建hello组件
const hello = Vue.extend({
template: `
<div>
<div>{{helloObject}}</div>
<div>{{helloFunction}}</div>
</div>
`,
data() {
return {
helloObject: 'hello-LiMing',
helloFunction: 'hello-Waved'
}
},
})
// 1、创建app组件
const app = Vue.extend({
name: 'app', //编译器中看到组件的名称
// 3、编写组件 theHello和welcome 标签
template: `
<div>
<Thehello></Thehello>
<welcome></welcome>
</div>
`,
// 父组件app 嵌套 子组件Thehello和welcome
components: {
// 2、注册组件Thehello和welcome
Thehello: hello,
welcome
}
})
new Vue({
el: '#root',
// template:'<app></app>', //编写组件app标签
// 2、注册局部组件app
components: { app },
})
</script>
</body>
</html>（三）、单文件组件
1、一个文件就是一个组件 xxx.vue，vue文件需要转化为js文件浏览器才可以识别。
2、单组件 有三部分标签
<template>（组件的结构）,<script>（组件的交互）,<style>（组件的样式）
3、vue 文件 需要暴露给其他文件进而引入，暴露的方式有三种。
在<script> 标签中:
| 1、分别暴露 | export const hello = Vue.extend({ data() { return { helloObject: 'hello-LiMing', helloFunction: 'hello-Waved' } }, }) |
| 2、统一暴露 | const hello = Vue.extend({ data() { return { helloObject: 'hello-LiMing', helloFunction: 'hello-Waved' } }, }) export {hello} |
| 3、默认暴露 | const hello = Vue.extend({ data() { return { helloObject: 'hello-LiMing', helloFunction: 'hello-Waved' } }, }) export default hello |
| 常用默认暴露 | export default { name: "welcome", data() { return { welcomeObject: "welcome-person", welcomeFunction: "welcome-hug", }; }, }; |
附：脚手架Vue CLI
| Vue CLIi 包含几大组件 CLI （@vue/cli） CLI服务（@vue/cli-service） CLI插件 cli （command line interface）是一个基于 Vue.js 进行快速开发的完整系统。 Vue CLI 4.x 需要 Node.js v10 以上的版本。 一、不同版本Vue
二、render 函数
三、ref 属性1、加在 html 元素上 2、加在组件上 （1）、id 属性 获得的是整个dom 标签
（2）、ref 属性 获得 hello 组件的实例对象 vc
四、props 配置已经使用过的配置项有：el，data，methods，computed，watch 等
props 的优先级 要高于 data 中的 数值
五、mixin 混入两个组件共享一个配置项，可以写在一个混合文件中。
六、插件 |
这四个都要挂载
（四）、组件的实质
组件本质是一个叫VueComponent 的构造函数
Vue（vm） 管理着 VueComponent（vc）
（五）、浏览器本地存储
742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
