Vue3学习笔记(三)——计算/监听/样式/自定义指令

最新推荐文章于 2024-06-03 11:05:26 发布

Me-Wow！

最新推荐文章于 2024-06-03 11:05:26 发布

阅读量1.5k

点赞数 4

分类专栏：前端学习文章标签：学习 vue.js javascript 前端

本文链接：https://blog.csdn.net/teamo__/article/details/123189606

版权

前端学习专栏收录该内容

20 篇文章 15 订阅

订阅专栏

本文详细介绍了Vue3中的计算属性computed、监听watch、样式操作（class与style）以及自定义指令directives。通过实例展示了如何使用这些特性，包括计算反转字符串、过滤学生信息、监听数值变化实现计算器、动态切换样式以及创建自定义指令实现聚焦效果。文章深入浅出，帮助读者掌握Vue3中数据响应与DOM操作的核心技巧。

摘要由CSDN通过智能技术生成

点击查看上一篇文章👇

从零开始学Vue3——(一)入门https://blog.csdn.net/TeAmo__/article/details/123119271?spm=1001.2014.3001.5501Vue3学习笔记(二)——事件按键表单修饰符与表单https://blog.csdn.net/TeAmo__/article/details/123149276?spm=1001.2014.3001.5501

一、计算 computed

对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性（从现有数据计算出新的数据）

实例1:展示翻转后的信息

        <div id="app">
			<input type="text" v-model="msg" />
			<p>{{msg}}</p>
			<p>{{rmsg}}</p>
		</div>

	Vue.createApp({
		data() {
			return {
				msg: "hello Mewow",
			}
		},
		computed: {
			"rmsg": function() {
				return this.msg.split("").reverse().join("");
			}
		}
	}).mount("#app");

运行结果：

实例2：通过输入的关键字展示学生信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>信息</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="keyword" placeholder="搜索关键字"/>
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>电话</th>
				</tr>
				<tr v-for="item in fstudents" :key="item.phone">
					<td>{{item.name}}</td>
					<td>{{item.sex}}</td>
					<td>{{item.age}}</td>
					<td>{{item.phone}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		Vue.createApp({
					data() {
						return {
							keyword: "",
							students: [
							{name: '张三', sex: '女', age: 19, phone: '18921212121'},
							{name: '李四', sex: '男', age: 29, phone: '18921221122'},
							{name: '王五', sex: '女', age: 39, phone: '18921788723'},
							{name: '赵六', sex: '男', age: 49, phone: '18921556124'},
							{name: '曾七', sex: '男', age: 29, phone: '18921221125'},
							{name: '刘八', sex: '女', age: 39, phone: '18921788726'},
							{name: '黄九', sex: '男', age: 29, phone: '18921221127'},
							{name: '王五', sex: '女', age: 39, phone: '18921788728'},
							{name: '王五', sex: '女', age: 39, phone: '18921788729'},
							{name: '赵六', sex: '男', age: 49, phone: '18921556110'},
							{name: '李思思', sex: '男', age: 29, phone: '18921221111'},
							{name: '张三', sex: '女', age: 19, phone: '18921212112'},
							{name: '李四', sex: '男', age: 29, phone: '18921221113'},
							{name: '王五', sex: '女', age: 39, phone: '18921788714'},
							{name: '赵六', sex: '男', age: 49, phone: '18921556115'},
							{name: '李四', sex: '男', age: 29, phone: '18921221116'},
							{name: '王五', sex: '女', age: 39, phone: '18921788717'},
							{name: '李四', sex: '男', age: 29, phone: '18921221118'},
							{name: '王五', sex: '女', age: 39, phone: '18921788719'},
							{name: '王五', sex: '女', age: 39, phone: '18921788720'},
							{name: '赵六', sex: '男', age: 49, phone: '18921556131'},
							{name: '李五五', sex: '男', age: 29, phone: '18921221133'},
							]
							}
						},
						computed: {
							"fstudents":function(){
								if(this.keyword===""){
									return this.students;
								}else{
									return this.students.filter(item=>{
										var str=JSON.stringify(item);
										return str.includes(this.keyword);
									});
								}
							}
						}
					}).mount("#app");
	</script>
</html>

运行结果：

二、监听 watch

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

值数据类型：通过监听可得到原始数据和最新数据

		<div id="app">
			<button type="button" @click="num++">{{num}}</button>
			<button type="button" @click="nobj1.num+=5">{{nobj1.num}}</button>
			<button type="button" @click="nobj2.num+=10">{{nobj2.num}}</button>
		</div>

		Vue.createApp({
			data() {
				return {
					num: 1,
					nobj1: {
						num: 1
					},
					nobj2: {
						num: 1
					}
				}
			},
			watch: {
				num: function(nval, oval) {
					console.log("num数据由", oval, "变化为", nval);
				},
				nobj1: function(nval, oval) {
					console.log("nobj1数据由", oval, "变化为", nval);
				},
				nobj2: {
					handler(nval, oval) {
						console.log("nobj2数据由", oval, "变化为", nval);
					},
					deep: true
				}
			}
		}).mount("#app");

运行结果：

引用数据类型：由上边代码运行结果可知，引用数据类型需要添加处理器handler与deep，且引用数据类型不能获取原始数据，只能得到最新数据

实例：监听版计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监听版计算器</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="cobj.n1" />
			<select v-model="cobj.type">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model="cobj.n2" />
			<span>
				={{cobj.n3}}
			</span>
		</div>
	</body>
	<script type="text/javascript">
		Vue.createApp({
			data() {
				return {
					cobj: {
						n1: 1,
						n2: 2,
						type: "+",
						n3: 3
					}
				}
			},
			watch: {
				cobj: {
					handler() {
						this.cobj.n3 = eval(this.cobj.n1 + this.cobj.type + this.cobj.n2);
					},
					deep: true
				}
			}
		}).mount("#app");
	</script>
</html>

运行结果：

三、样式Class与Style

操作元素的 class 列表和内联样式因为它们都是 attribute
Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

class

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class</title>
		<script src="https://unpkg.com/vue@next"></script>
		<style type="text/css">
			.color {
				background-color: pink;
				color: #fff;
			}

			.size {
				font-size: 48px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="color=!color">颜色{{color}}</button>
			<button type="button" @click="size=!size">大小{{size}}</button>
			<br />
			<span :class="{'color':color,'size':size}">内联对象</span>
			<p :class="cobj">对象 cobj</p>
			<p :class="clist">数组 clist</p>
			<p :class="['color','size']">内联数组</p>
		</div>

	</body>
	<script type="text/javascript">
		Vue.createApp({
			data() {
				return {
					color: true,
					size: true,
					cobj:{
						color:true,
						size:true
					},
					clist:[
						'color','size'
					],
				}
			}
		}).mount("#app");
	</script>
</html>

运行结果：

Style内联样式

对象：CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>style</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="fs+=5">大</button>
			<button type="button" @click="fs-=5">小</button>
			<p :style="{'fontSize':fs+'px','color':'pink'}">hello Mewow</p>
		</div>

	</body>
	<script type="text/javascript">
		Vue.createApp({
			data() {
				return {
					fs:16
				}
			}
		}).mount("#app");
	</script>
</html>

运行结果：

四、自定义指令 directives

除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。

仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

实例：自定义指令实现聚焦效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义指令</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-focus="flag" />
			<button type="button" @click="flag=!flag">获取焦点</button>
		</div>
	</body>
	<script type="text/javascript">
		Vue.createApp({
			data() {
				return {
					flag: true
				}
			},
			directives: {
				"focus": {
					mounted(el, binding) {
						console.log(el);
						if(binding.value){
							el.focus();
						}
					}
				}
			}
		}).mount("#app");
	</script>
</html>

运行结果：

上方实例为局部注册，全局注册的代码为：

    const app = Vue.createApp({});
	app.directive('focus', {
	  // 当被绑定的元素挂载到 DOM 中时……
	  mounted(el) {
		el.focus() // 聚焦元素
	  }
	});
	app.mount("#app");

钩子函数:

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

created：创建。
beforeMount：父组件挂载前
mounted：挂载后。
beforeUpdate：更新前

总结

计算computed
computed从现有数据计算出新的数据
watch监听
watch 监听数据变化执行回调
class与style
:class="{ active: isActive, 'text-danger': hasError }"
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
指令
directive 操作dom

点个赞吧👍