前端Vue框架系列—— 学习笔记总结Day02

❤ 作者主页：欢迎来到我的技术博客😎
❀ 个人介绍：大家好，本人热衷于Java后端开发，欢迎来交流学习哦！(￣▽￣)~*
🍊 如果文章对您有帮助，记得关注、点赞、收藏、评论⭐️⭐️⭐️
📣 您的支持将是我创作的动力，让我们一起加油进步吧！！！🎉🎉

文章目录

第一章 Vue组件化编程
第二章使用Vue脚手架

第一章 Vue组件化编程

1.1 模块与组件、模块化与组件化

在这里插入图片描述

1.1.1 模块

理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
为什么: js 文件很多很复杂
作用: 复用 js, 简化 js 的编写, 提高 js 运行效率

1.1.2 组件

理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
为什么: 一个界面的功能很复杂
作用: 复用编码, 简化项目编码, 提高运行效率

1.1.3 模块化

当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。

1.1.4 组件化

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。

1.2 非单文件组件

1.2.1 基本使用

代码：

效果：
在这里插入图片描述

总结：

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('组件名',组件)
编写组件标签：
例如：

1.2.2 几个注意点

代码：

效果：
在这里插入图片描述

总结:

几个注意点：

关于组件名
- 一个单词组成：
  - 第一种写法(首字母小写)：school
  - 第二种写法(首字母大写)：School
- 多个单词组成：
  - 第一种写法(kebab-case命名)：my-school
  - 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
- 备注：
  - 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
  - 可以使用name配置项指定组件在开发者工具中呈现的名字。
关于组件标签
- 第一种写法：
- 第二种写法：
- 备注：不用使用脚手架时，会导致后续组件不能渲染。
一个简写方式
- const school = Vue.extend(options) 可简写为：const school = options

1.2.3 组件的嵌套

代码：

效果：

在这里插入图片描述

1.2.4 VueComponent

代码：



	
		
		VueComponent
		
	
	
		
		
			
			
		
	

	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

效果：
在这里插入图片描述

总结：

关于 VueComponent：

school组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 生成的。
我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
特别注意：每次调用 Vue.extend，返回的都是一个全新的VueComponent。
关于this指向：
1. 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
2. new Vue(options) 配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。
VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
- Vue的实例对象，以后简称vm。

1.2.5 一个重要的内置关系

代码：

效果：
在这里插入图片描述

总结：

一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

1.3 单文件组件

School.vue

Student.vue:

App.vue

main.js

import App from './App.vue'

new Vue({
    template:``,
    el:'#root',
    components:{App}
})
1
2
3
4
5
6
7

index.html

第二章使用Vue脚手架

2.1 初始化脚手架

2.1.1 说明

Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
最新的版本是 4.x。
文档: https://cli.vuejs.org/zh/

2.1.2 具体步骤

如果下载缓慢请配置 npm 淘宝镜像：npm config set registry http://registry.npm.taobao.org
全局安装@vue/cli：npm install -g @vue/cli
切换到你要创建项目的目录，然后使用命令创建项目：vue create xxxx
选择使用vue的版本
启动项目：npm run serve
暂停项目：Ctrl+C

备注：
Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，请执行：vue inspect > output.js

2.1.3 分析脚手架结构

脚手架文件结构：

.文件目录
├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.1.4 render函数

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el:'#app',
    // 简写形式
	render: h => h(App),
    // 完整形式
	// render(createElement){
	//     return createElement(App)
	// }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

总结：

关于不同版本的函数：

vue.js 与 vue.runtime.xxx.js 的区别：
1. vue.js 是完整版的 Vue，包含：核心功能+模板解析器
2. vue.runtime.xxx.js 是运行版的 Vue，只包含核心功能，没有模板解析器
因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render 函数接收到的 createElement 函数去指定具体内容

2.1.5 修改默认配置

vue.config.js 是一个可选的配置文件，如果项目的（和 package.json 同级的）根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载
使用 vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

module.exports = {
    pages: {
        index: {
            // 入口
            entry: 'src/index/main.js'
        }
    },
  // 关闭语法检查
  lineOnSave:false
}
1
2
3
4
5
6
7
8
9
10

2.2 ref属性

代码：

School.vue

App.vue

效果：
在这里插入图片描述

总结：

ref属性：

被用来给元素或子组件注册引用信息（id的替代者：document.getElementById()）
应用在 html标签 上获取的是 真实DOM元素 ，应用在组件标签上是 组件实例对象（vc）
使用方式：
1. 打标识：.....或
2. 获取：this.$refs.xxx

2.3 props配置

代码：

Student.vue

App.vue

效果：
在这里插入图片描述

总结：
props配置项：

功能：让组件接收外部传过来的数据
传递数据：
接收数据：
1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
```
props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'老王' //默认值
	}
}
1
2
3
4
5
6
7
```
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

2.4 mixin混入(合)

1. 局部混入
代码：

School.vue

Student.vue

mixin.js

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果：
在这里插入图片描述

2. 全局混入

代码：

School.vue

Student.vue

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {hunhe,hunhe2} from './mixin'
//关闭Vue的生产提示
Vue.config.productionTip = false

Vue.mixin(hunhe)
Vue.mixin(hunhe2)


//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果：
在这里插入图片描述

总结：

功能：可以把多个组件共用的配置提取成一个混入对象，实现组件功能的复用。
使用方式：

第一步定义混合：
```
export const xxx = {
    data() {
    
    },
    
    methods: {
    
    }
    ....
}
1
2
3
4
5
6
7
8
9
10
```
第二步使用混入：

全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']
mixin的优点：
- 复用组件间的共同行为和属性
- 避免重复代码
- 易维护
注意事项：
- mixin对象中的方法和数据会与组件自身产生冲突，需要避免名称重复
- mixin会影响整个组件树，应谨慎使用全局mixin
- 过多mixin会增加组件的复杂度

2.5 plugin插件

src/components/School.vue

src/components/Student.vue

src/plugin.js

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

src/main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from './plugins'
//关闭Vue的生产提示
Vue.config.productionTip = false

//应用（使用）插件
Vue.use(plugins,1,2,3)
//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

效果：
在这里插入图片描述

总结：

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

定义插件：

对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用插件：Vue.use()

2.6 scoped样式

src/components/Student.vue

src/components/School.vue

App.vue

效果：
在这里插入图片描述

总结：

在传统的CSS中，样式规则是全局的，会对整个页面中所有匹配的元素生效。这可能导致样式冲突和命名空间污染的问题。

为了解决这些问题，HTML5中引入了 scoped 样式。当在

src/components/MyList.vue

src/components/MyItem.vue

src/components/MyFooter.vue

src/App.vue

效果：
在这里插入图片描述

在这里插入图片描述

总结：

组件化编码流程：

(1)拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

(2)实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
- （1）一个组件在用：放在组件自身即可。
- （2）一些组件在用：放在他们共同的父组件上（状态提升）。
(3)实现交互：从绑定事件开始。
props 适用于：

(1)父组件 ==> 子组件通信

(2)子组件 ==> 父组件通信（要求父先给子一个函数）
使用 v-model 时要切记：v-model 绑定的值不能是 props 传过来的值，因为 props 是不可以修改的！
props 传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错，但不推荐这样做。

2.8 浏览器本地存储

代码：
localStorage.html



	
		
		localStorage
	
	
		localStorage
		
		
		
		

		
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

效果：
在这里插入图片描述

sessionStorage.html



	
		
		sessionStorage
	
	
		sessionStorage
		
		
		
		

		
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

效果：
在这里插入图片描述

总结：

存储内容大小一般支持5MB左右（不同浏览器可能不一样）
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API：
1. xxxxxStorage.setItem('key', 'value')
  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2. xxxxxStorage.getItem('person')
  
  该方法接受一个键名作为参数，返回键名对应的值。
3. xxxxxStorage.removeItem('key')
  
  该方法接受一个键名作为参数，并把该键名从存储中删除。
4. xxxxxStorage.clear()
  
  该方法会清空存储中的所有数据。
备注：
1. SessionStorage 存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage 存储的数据是持久性的，可以长时间保存，需要手动清除才会消失。
3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么 getItem()的返回值是null。
4. JSON.parse(null)的结果依然是null。

2.9 TodoList_本地存储

src/App.vue

2.10 组件自定义事件

2.10.1 绑定

src/App.vue

src/components/School.vue

src/components/Student.vue

效果：
在这里插入图片描述

2.10.2 解绑

src/App.vue

src/components/Student.vue

效果：
在这里插入图片描述

总结：

一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
绑定自定义事件：
1. 第一种方式，在父组件中：或
2. 第二种方式，在父组件中：
```
<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('custom-event',this.test)
}
1
2
3
4
5
```
3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
触发自定义事件：this.$emit('custom-event',数据)
解绑自定义事件this.$off('custom-event')
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意：通过this.$refs.xxx.$on('custom-event',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

2.11 TodoList_自定义事件

src/App.vue

src/components/MyHeader.vue

src/components/MyFooter

2.12 全局事件总线（GlobalEventBus）

src/main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

src/App.vue

src/components/School.vue

src/components/Student.vue

效果：
在这里插入图片描述

总结：

一种组件间通信的方式，适用于任意组件间通信。

安装全局事件总线：

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
}) 
1
2
3
4
5
6
7

使用事件总线：
1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
```
methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}
1
2
3
4
5
6
7
```
2. 提供数据：this.$bus.$emit('xxxx',数据)
最好在 beforeDestroy 钩子中，用$off去解绑当前组件所用到的事件。

2.13 TodoList_事件总线

src/mian.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    el:"#app",
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})
1
2
3
4
5
6
7
8
9
10
11
12

src/components/App.vue

src/components/MyItem.vue

2.14 消息订阅与发布（pubsub）

src/components/School.vue

src/components/Student.vue

效果：
在这里插入图片描述

总结：

一种组件间通信的方式，适用于任意组件间通信。
使用步骤：
1. 安装pubsub：npm i pubsub-js
2. 引入: import pubsub from 'pubsub-js'
3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
```
methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}
1
2
3
4
5
6
7
```
4. 提供数据：pubsub.publish('xxx',数据)
5. 最好在 beforeDestroy 钩子中，用 PubSub.unsubscribe(pid) 去取消订阅。

2.15 使用消息的订阅与发布优化Todo-List

src/App.vue

src/components/myItem.vue

2.16 nextTick（回调函数）

语法：this.$nextTick(回调函数)
作用：在下一次 DOM 更新结束后执行其指定的回调。
什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

2.17 过度与动画

作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
写法：
1. 准备好样式：
  - 元素进入的样式：
    1. v-enter：进入的起点
    2. v-enter-active：进入过程中
    3. v-enter-to：进入的终点
  - 元素离开的样式：
    1. v-leave：离开的起点
    2. v-leave-active：离开过程中
    3. v-leave-to：离开的终点
2. 使用包裹要过度的元素，并配置name属性：
```
	你好啊！

1
2
3
```
3. 备注：若有多个元素需要过度，则需要使用：，且每个元素都要指定key值。

非常感谢您阅读到这里，如果这篇文章对您有帮助，希望能留下您的点赞👍 关注💖 分享👥 留言💬thanks！！！

前端Vue框架系列—— 学习笔记总结Day02

文章目录

第一章 Vue组件化编程

1.1 模块与组件、模块化与组件化

1.1.1 模块

1.1.2 组件

1.1.3 模块化

1.1.4 组件化

1.2 非单文件组件

1.2.1 基本使用

{{msg}}

1.2.2 几个注意点

{{msg}}

1.2.3 组件的嵌套

1.2.4 VueComponent

1.2.5 一个重要的内置关系

1.3 单文件组件

学校名称：{{name}}

学校地址：{{address}}

学生姓名：{{name}}

学生年龄：{{age}}

第二章 使用Vue脚手架

2.1 初始化脚手架

2.1.1 说明

2.1.2 具体步骤

2.1.3 分析脚手架结构

2.1.4 render函数

2.1.5 修改默认配置

2.2 ref属性

学校名称：{{name}}

学校地址：{{address}}

.....

2.3 props配置

{{msg}}

学生姓名：{{name}}

学生性别：{{sex}}

学生年龄：{{myAge+1}}

2.4 mixin混入(合)

学校名称：{{name}}

学校地址：{{address}}

学生姓名：{{name}}

学生性别：{{sex}}

学校名称：{{name}}

学校地址：{{address}}

学生姓名：{{name}}

学生性别：{{sex}}

2.5 plugin插件

学校名称：{{name | mySlice}}

学校地址：{{address}}

学生姓名：{{name}}

学生性别：{{sex}}

2.6 scoped样式

学校名称：{{name}}

学校地址：{{address}}

学生姓名：{{name}}

学生性别：{{sex}}

你好啊

2.8 浏览器本地存储

localStorage

sessionStorage

2.9 TodoList_本地存储

2.10 组件自定义事件

2.10.1 绑定

学校名称：{{name}}

学校地址：{{address}}

学生姓名：{{name}}

学生性别：{{sex}}

2.10.2 解绑

学生姓名：{{name}}

学生性别：{{sex}}

2.11 TodoList_自定义事件

2.12 全局事件总线（GlobalEventBus）

{{msg}}

学校名称：{{name}}

学校地址：{{address}}

学生姓名：{{name}}

学生性别：{{sex}}

2.13 TodoList_事件总线

2.14 消息订阅与发布（pubsub）

学校名称：{{name}}

第二章使用Vue脚手架