web---VUE_监听器_过滤器_生命周期_组件

AlluzeYu

已于 2023-08-23 14:56:40 修改

阅读量410

点赞数

分类专栏： WEB 文章标签： vue

于 2021-05-20 10:56:35 首次发布

本文链接：https://blog.csdn.net/allurelover/article/details/117032556

版权

WEB 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1.watch—监听器

1.1 作用

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

1.2 案例一（姓名的拼接）

需求：当属性的数据发生变化时,则通过监听器实现对数据的监控. 从而实现数据的操作.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监听器用法</title>
	</head>
	<body>
		<div id="app">
			<!--需求: 用户全名的拼接  -->
			姓氏: <input type="text"  v-model="firstName"/><br>
			名字: <input type="text" v-model="lastName"/><br>
			全名: {{fullName}}
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					firstName: '',
					lastName: '',
					fullName: ''
				},
				//配置监听器
				//key 被监听的属性的名称  方法的结构
				//value 当监听器生效时 value就是属性的数据.
				watch: {
					firstName(value){
						this.fullName = value + this.lastName
					},
					lastName(value){
						this.fullName = this.firstName + value
					}
				}
			})
		</script>
	</body>
</html>

1.3 原理

配置监听器
- /key 被监听的属性的名称方法的结构
- value 当监听器生效时 value就是属性的数据

1.4 结果一

1.5 案例二（判断昵称是否使用过）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>校验用户名是否可用</title>
	</head>
	<body>
		<div id="app">
			<!-- 
				需求:
					要求用户输入username的用户名,之后与服务器进行校验
					如果已经存在给用户提示. 如果不存在 则提示用户可用.
			 -->
			 用户名: <input type="text" v-model.lazy="username"/>{{msg}}
			 
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: '',
					//校验的结果
					msg: ''
				},
				methods: {
					checkName(val){
						//===严格意义的数据校验 新版本提倡这么写 校验数值 还校验类型
						if(val === 'admin'){
							this.msg = "数据已存在"
						}
						else if(val === 'tom'){
							this.msg = "数据已存在"
						}
						else{
							this.msg = "数据可以使用"
						}
					}
				},
				watch: {
					//定义属性的监听器
					username(val){
						this.checkName(val)
					}
				}
			})
		</script>
	</body>
</html>

1.6 结果二

2. Vue.filter—过滤器

2.1 作用

一般使用过滤器格式化数据. 价格/时间等

2.2 语法

单独定义过滤器：
参数1：过滤器的名称
参数2：过滤器执行的方法
注意：过滤器需要有返回值

2.3 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器的使用</title>
	</head>
	<body>
		<div id="app">
			 <!-- 使用 | 线 调用过滤器-->
			 用户输入内容: <input type="text" v-model="username" /><br>
			 {{username | rename}}<br>
			 <!-- 过滤器级联-->
			 {{username | rename | addChar}}
		</div>
		<script src="../js/vue.js"></script>
		<script>
			
			//1.单独定义过滤器 
			// 参数1: 过滤器名称  参数2: 过滤器执行的方法
			// 注意事项: 过滤器需要返回值.
			Vue.filter('rename',function(val){
				
				return val.split('').reverse().join('')	
			})
			
			//2.追加哈哈哈字符 
			//箭头函数写法 可以省略function关键字, 如果只有一个参数则()省略 
			//使用=>进行关联
			Vue.filter('addChar',val => {
				
				return val + '哈哈哈'
			})
			
			const app = new Vue({
				el: "#app",
				data: {
					username: '',
					
				},
				methods: {
					
				}
			})
		</script>
	</body>
</html>

2.4 结果

3.VUE—lifeCycle

3.1 vue—lifeCycle说明

Vue 实例从创建到销毁的过程，就是它的生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的lifeCycle生命周期。

3.2 VUE—lifeCycle流程图

在这里插入图片描述

3.3 lifeCycle函数

Vue 的lifeCycle总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

1、beforeCreate（创建前）

表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。

2、created（创建后）

数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在。

3、beforeMount（挂载前）

vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。

4、mounted（挂载后）

vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。

5、beforeUpdate（更新前）

当 data 变化时，会触发beforeUpdate方法。data 数据尚未和最新的数据保持同步。

6、updated（更新后）

当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。

7、beforeDestory（销毁前）

组件销毁之前调用，在这一步，实例仍然完全可用。

8、destoryed（销毁后）

组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。

3.4 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生命周期</title>
	</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <button @click="changeMsg">改变</button>
    </div>
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        methods: {
            changeMsg () {
                this.message = 'goodbye world'
            }
        },
        beforeCreate() {
            console.log('------初始化前------')
            console.log(this.$el)
            console.log(this.message)
        },
        created () {
            console.log('------初始化完成------')
            console.log(this.$el)
            console.log(this.message)
        },
        beforeMount () {
            console.log('------挂载前---------')
            console.log(this.$el)
            console.log(this.message)
        },
        mounted () {
            console.log('------挂载完成---------')
            console.log(this.$el)
			console.log(this.$el.innerHTML)
            console.log(this.message)
        },
        beforeUpdate () {
            console.log('------更新前---------')
            console.log(this.$el)
			console.log(this.$el.innerHTML)
            console.log(this.message)
        },
        updated() {
            console.log('------更新后---------')
            console.log(this.$el)
			console.log(this.$el.innerHTML)
            console.log(this.message)
        }
		})
		</script>
	</body>
</html>

3.5 结果

未点击按钮 ‘ 改变 ’ 之前

点击按钮 ‘ 改变 ’之后

4.官方API对数组的操作

4.1 API位置

4.2 数组用法案例说明

1).push() 在数组末尾追加数据.
2).pop() 删除数组最后一个元素
3).shift() 删除数组第一个元素
4.unshift() 在数据开头追加数据.
5.splice() 在指定的位置替换数据.
6.sort() 对数据进行排序按照编码进行排序由小到大

4.3 案例

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组案例</title>
	</head>
	<body>
		<div id="app">
			<span v-for="item in array" v-text="item"></span><br>
			
			数据: <input type="text" v-model="data"/> 
			<button @click="push">追加</button>
			<button @click="pop">移除最后一个</button>
			<button @click="shift">删除第一个元素</button>
			<button @click="unshift">在开头追加元素</button>
			<button @click="splice">替换元素</button>
			<button @click="sort">排序</button>
			<button @click="reverse">反转</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					array: [5,7,4,1],
					data: ''
				},
				methods: {
					push(){
						this.array.push(this.data)
					},
					pop(){
						//移除最后一个数据
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						this.array.unshift(this.data)
					},
					splice(){
						//关于参数说明 参数1:操作数据起始位置 index
						//			  参数2:操作数据的个数
						//			  参数3:要替换的值
						//删除元素     删除第一个元素的后2位
						//this.array.splice(1,2,'')
						//替换元素     替换前2个元素(将元素当做整体进行替换)
						//替换后的元素可以有多个
						this.array.splice(0,2,this.data)
					},
					sort(){
						this.array.sort()
					},
					reverse(){
						this.array.reverse()
					},
				}
				
			})
		</script>
	</body>
</html>

4.4 结果

5.VUE全局组件

5.1 什么是全局组件

全局组件就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能，将来我们需要什么功能，就可以去调用对应的组件即可

5.2 语法

5.3 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
	</head>
	<body>
		<div id="app">
			<!-- 3.调用组件 -->
			<!-- 注意事项:
				1.如果组件名称使用了驼峰规则,则默认的条件下vue渲染数据时都采用小写字母
				hellocomponent.所以导致组件不能匹配.
				2.如果需要使用驼峰规则,则使用 '-'线连接 
				强调: 组件的调用时才能添加'-'
				helloComponent
			 -->
			<hello-component></hello-component>
			<hello-component></hello-component>
			<hello-component></hello-component>
			<hello-component></hello-component>
		</div>
		
		<!-- 
			模板标签的用法
			1.模板标签不要与vue div 耦合
			2.template标签需要添加id 进行标识
			3.template模板标签中 必须有根标签div
		 -->
		 <template id="helloTem">
			 <div>
				 <h1>{{msg}}</h1>
			 </div>
		 </template>
		 
		
		<script src="../js/vue.js"></script>
		<script>
			//1.定义全局组件  参数1: 定义组件名称 暂时不要使用驼峰规则
			//				 参数2: 定义组件对象
			Vue.component('helloComponent',{
				//1.组件数据.
				data(){
					return {
						msg: 'hello 组件'
					}
				},
				//2.组件结构 html数据
					// ''当前行有效
					// ``支持多种格式的html
				//template: `<h1>{{msg}}</h1>`
				//3.组件模板优化
				template: '#helloTem'
			})
			
			/* 注意事项: 组件的使用必须有Vue对象的渲染 */
			const app1 = new Vue({
				el: "#app"
			})
		</script>
	</body>
</html>

5.4 结果

5.5 组件驼峰规则命名

5.6 组件模板标签的使用

5.6.1 ` 号的使用

5.6.2 组件template的写法

6. VUE局部组件

6.1 语法

6.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
	</head>
	<body>
		<div id="app">
			<hello1></hello1>
			<hello1></hello1>
		</div>
		
		<template id="hello1Tem">
			<div>
				<h3>{{msg}}</h3>
			</div>
		</template>
		
		<script src="../js/vue.js"></script>
		<script>
			
			//1.定义组件对象
			const valuesss = {
				data(){
					return {
						msg: 'hello1局部组件'
					}
				},
				template: '#hello1Tem'
			}
			
			/* 局部组件的写法 */
			const app1 = new Vue({
				el: "#app",
				//vue对象中的组件  组件名称/组件对象
				components: {
					hello1  : valuesss
					//js简化写法 如果key与value值相同,则可以简化.
				}
			})
			
		</script>
	</body>
</html>