程序员经验分享-hwhale

【Vue入门】语法 —— 插值、指令、过滤器、计算属性、监听器

2023-10-27

目录

一、模版语法

1.1 插值

1.1.1 文本

1.1.2 html解析

1.1.3 属性

1.1.4 表达式

1.2 指令

1.2.1 核心指令

1.2.3 动态参数

二、过滤器

2.1 局部过滤器

2.2 全局过滤器

三、计算属性

四、监听器

五、排座案例

小结：计算属性和监听属性的区别

一、模版语法

1.1 插值

        Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

html模板语法: 这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。

1.1.1 文本

        直接使用{{xxx}}的形式，标签将会被替换成为数据对象（data）上xxx属性值，当绑定的数据对象上的xxx属性值发生变化时，插值处的值也会发生变化（双向绑定）

<div id="xw">
       {{msg}}
</div>

1.1.2 html解析

如果要输出html格式的数据，需要使用v-html指令。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html解析</title>
		<!-- 1.导入工具 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		<!-- 2.定义边界 -->
		<div id="xw">
			<div v-html="htmlstr"></div>
		</div>
		<!-- 3.构建vue实例并绑定边界 -->
		<script>
			new Vue({
				el: "#xw",
				data() {
					return {
						htmlstr: '<h3 style="color:blue;">这是一个html片段</h3>'
					}
				}
			})
		</script>
	</body>
</html>

1.1.3 属性

HTML属性中的值应使用v-bind指令。类型与jQuery中的$("#xxx").attr(Name，Val)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html解析</title>
		<!-- 1.导入工具 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<style>
			.blueClass{
				font-size: 30px;
				color: skyblue;
			}
		</style>
	</head>
	<body>
		<!-- 2.定义边界 -->
		<div id="xw">
			<p v-bind:class="hontColor">哈哈</p>
		</div>
		<!-- 3.构建vue实例并绑定边界 -->
		<script>
			new Vue({
				el: "#xw",
				data() {
					return {
						hontColor:"blueClass",
					}
				}
			})
		</script>
	</body>
</html>

也可以这样写：

//在html使用v-bind:style指令设置样式
<p v-bind:style="color">哈哈</p>
data() {
  return {
		//定义一个属性，其值为所需样式
		color:"color: yellowgreen;"
	}
}

1.1.4 表达式

 Vue提供了完全的JavaScript表达式支持:

  • {{str.substr(0,3)}}
  • {{ number + 1 }}
  • {{ ok ? 'YES' : 'NO' }}
  • <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

示例1：字符截取

<!-- 在html中加入元素，定义表达式 -->
<p>{{str.substring(5,9)}}</p>
data() {
	return {
		str: '大家都叫我king'
    }
}

示例二：很简单就不一一演示了

<p>数字:{{number+1}}</p>
<p>{{ok ? 'yes' : 'no'}}</p>
<span :id="'users_id_'+id">小威</span>
new Vue({
    el: "#xw",
        data() {
            return {
                number: 99,
                ok: false,
                id: 66
            }
        }
    })

1.2 指令

1.2.1 核心指令

 v-if|v-else|v-else-if ：根据其后表达式的bool值进行判断是否渲染该元素

 v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

 v-for：类似JS的遍历

 v-bind：在上面已用到，添加属性或元素

 v-on：v-on:（也可以用@替代）,在上篇已讲述过，用来调用函数。

 v-model：用来自动更新绑定的元素的值  

示例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>核心指令</title>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
			分数：<input v-model="score" />
			<div v-if="score>80">优秀</div>
			<div v-else-if="score>60">良好</div>
			<div v-else="score<60">还需努力</div>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#xw',
			data() {
				return {
					score: 60
				}
			}
		})
	</script>

</html>

示例二：

<div v-show="score==90">v-show-上优秀学员名单</div>

示例3：

结合v-model实现下拉框和复选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>核心指令</title>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
			<p>v-for</p>
			<select v-model="hobbySelected">
				<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
			</select>
			<div v-for="h in hobby">
				<input :value="h.id" type="checkbox" />{{h.name}}
			</div>
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#xw',
			data() {
				return {
					hobby: [{
							id: "1",
							name: "beautifulgirl"
						},
						{
							id: "2",
							name: "按摩"
						},
						{
							id: "3",
							name: "洗jio"
						}
					],
					hobbySelected: 3
				};
			}
		})
	</script>

</html>

示例4：

<!--参数：href-->
<div>
    <a v-bind:href="url">baidu</a>
</div>
 
<!--
参数：动态参数.
attname需要在data中定义,
注意：attname要全部小写!!
-->
<div>
    <a v-bind:[attrname]="url">baidu</a>
    <button v-on:[evname]="clickme">点我看看</button>
</div>

1.2.3 动态参数

注意：在动态参数中，作为参数的变量名（如：attrname）要全部小写，否则无效 ！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态参数</title>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
			<p>动态参数</p>
			<input v-model="evname" />
			<button v-on:[evname]="handle">动态参数</button>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#xw',
			data() {
				return {
					evname:'dblclick'
			    }
			    methods: {
				    handle() {
				    	alert("触发事件");
				    }
			    }
		    })
	</script>
</html>

Vue为v-bind和v-on这两个最常用的指令，提供了特定简写

指令 简写 示例
v-bind:xxx :xxx v-bind:href 简写为 :href
v-on:xxx @xxx v-on:click 简写为 @click

二、过滤器

        vue允许自定义过滤器，一般用于常见的文本格式化，过滤器可用的两个地方：双花括号插值与v-bind表达式，过滤器应该被添加在js表达式的尾部，使用管道运算符 " | "

2.1 局部过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器</title>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
            {{msg}}<br />
			{{msg|single}}<br />
			{{msg|param(2,3)}}
		</div>
		<script type="text/javascript">
			// 绑定边界	ES6具体体现
			new Vue({
				el: '#xw',
				data() {
					return {
						msg: "bug快离开~bug快离开~"
					};
				},
				filters: {
					'single': function(val) {
						return val.substring(2, 3);
					},
					'param': function(val, start, end) {
						return val.substring(start, end);
					}
				}
			})
		</script>
	</body>
</html>

注1：过滤器函数接受表达式的值作为第一个参数 
注2：过滤器可以串联     
        {{ message | filterA | filterB }}
注3：过滤器是JavaScript函数，因此可以接受参数： 
        {{ message | filterA('arg1', arg2) }} 

2.2 全局过滤器

时间转换案例： 

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
	//debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

function fmtDate(date, pattern) {
	var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

拷入date.js（日期格式化）放入项目js目录中，在页面中引入。
定义全局过滤器 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器</title>
		<script src="js/date.js"></script>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
			<p>{{date | fmtDate}}</p>
			无过滤器:<br />
			{{date}}
		</div>
		<script type="text/javascript">
			// 全局过滤器
			Vue.filter('fmtDate', function(value) {
				return fmtDate(value, 'yyyy年MM月dd日')
			});
			// 绑定边界	ES6具体体现
			new Vue({
				el: '#xw',
				data() {
					return {
						date: new Date()
					};
				}
			})
		</script>
	</body>
</html>

三、计算属性

   计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。

使用场景：当一个属性需要复杂的逻辑运算之后才能获取其值，可以使用计算属性，在一个计算属性中可以完成各种复杂的逻辑，包括运算，方法调用等，只要最终返回一个结果就可以了


语法：computed:{}

购物车案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
			<p>计算属性</p>
			<table border="1" style="width: 600px;height: 300px;">
				<tr>
					<td>物品</td>
					<td>单价</td>
					<td>
						数量
					</td>
					<td>
						小计
					</td>
				</tr>
				<tr>
					<td>帽子</td>
					<td>{{maoziDanjia}}</td>
					<td>
						<input v-model="maozi" />
					</td>
					<td>
						{{maoziTotal}}
					</td>
				</tr>
				<tr>
					<td>衣服</td>
					<td>{{yifuDanjia}}</td>
					<td>
						<input v-model="yifu" />
					</td>
					<td>
						{{yifuTotal}}
					</td>
				</tr>
				<tr>
					<td>裤子</td>
					<td>{{kuziDanjia}}</td>
					<td>
						<input v-model="kuzi" />
					</td>
					<td>
						{{kuziTotal}}
					</td>
				</tr>
				<tr>
					<td>总价</td>
					<td colspan="3">{{total}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#xw',
			data() {
                //定义所需属性值
				return {
					maoziDanjia: 10,
					yifuDanjia: 30,
					kuziDanjia: 20,
					maozi: 1,
					yifu: 1,
					kuzi: 1,
					km: 2,
					m: 2000
				};
			},
			computed: {
				maoziTotal() {
					return this.maoziDanjia * this.maozi;
				},
				yifuTotal() {
					return this.yifuDanjia * this.yifu;
				},
				kuziTotal() {
					return this.kuziDanjia * this.kuzi;
				},
				total() {
					return this.maoziTotal + this.yifuTotal + this.kuziTotal;
				}
			}
		})
	</script>
</html>

四、监听器

监听属性 watch，我们可以通过 watch 来响应数据的变化
   

语法：watch:{}

示例： 米和厘米的单位换算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
		<script src="js/vue&jquery.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="xw">
			<p>监听属性</p>
			米：<input v-model="m" />
			厘米：<input v-model="cm" />
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#xw',
			data() {
				return {
					m: 2,
					cm: 200
				};
			},
			watch: {
				// v指的是m变量
				m: function(v) {
					this.cm = parseInt(v) * 100;
				},
				// v指的是km变量
				cm: function(v) {
					this.m = parseInt(v) / 100;
				}
			}
		})
	</script>
</html>

五、排座案例

<!DOCTYPE html>
<html>
	<head>
		<title>排座</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>排座</h2>
			<input type="text" v-model="seatInput1">
			<input type="text" v-model="seatInput2">
			<input type="text" v-model="seatInput3">
			<hr>
			<h3>用户:</h3>
			<ul>
				<!-- 遍历过滤器传来的值 -->
				<li v-for="user in filteredUsers" :key="user.id">{{ user.name }}</li>
			</ul>
			<hr>
		</div>

		<script>
			new Vue({
				el: '#app',
				data: {
					seatInput1: '',
					seatInput2: '',
					seatInput3: '',
					users: [{
							id: 1,
							name: '老王'
						},
						{
							id: 2,
							name: '老六'
						},
						{
							id: 3,
							name: '老八'
						},
						{
							id: 4,
							name: '老聂'
						},
						{
							id: 5,
							name: '老五'
						}
					]
				},
				/* 定义一个filteredUsers计算属性 */
				computed: {
					/* 使用filter方法来过滤users数组中的元素。filter方法接受一个回调函数作为参数，该回调函数会对数组中的每个元素进行判断，并返回一个新的数组，其中包含满足条件的元素。 */
					filteredUsers() {
						return this.users.filter(
							/* 使用=>箭头函数的语法来定义一个匿名函数。这个匿名函数接受一个参数user，表示users数组中的每个元素。 */
							user => {
								/* 使用逻辑运算符&&来判断user.name是否不等于seatInput1、seatInput2和seatInput3的值。如果满足这个条件，说明user.name不等于任何一个输入框的值，那么这个元素就会被保留在过滤后的数组中。 */
								return user.name !== this.seatInput1 &&
									user.name !== this.seatInput2 &&
									user.name !== this.seatInput3
							});
					}
				}
			});
		</script>
	</body>
</html>

小结：计算属性和监听属性的区别

计算属性：是一种依赖于其他属性计算得出的属性。它的值是根据其依赖的属性动态计算而来的，并且会进行缓存，只有在依赖的属性发生变化时才会重新计算。计算属性适用于需要根据其他属性进行复杂计算或处理的场景。通过使用计算属性，可以将复杂的逻辑封装起来，使代码更加清晰和可维护。

监听属性：是一种用于监听指定属性变化并执行相应操作的属性。当监听的属性发生变化时，可以执行指定的回调函数来响应变化。监听属性适用于需要在属性变化时执行异步或开销较大的操作的场景。通过使用监听属性，可以实时监测属性的变化并执行相应的操作，例如发送网络请求或执行复杂的计算。

        计算属性适用于根据其他属性进行计算得出结果的场景，而监听属性适用于需要实时监测属性变化并执行相应操作的场景。两者的区别在于计算属性是根据其他属性进行计算得出结果，而监听属性是在属性变化时执行相应操作。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

VueElementUI

Java

vuejs

前端框架

【Vue入门】语法 —— 插值、指令、过滤器、计算属性、监听器 的相关文章

随机推荐

  • 计算机网络期中测验

    目录 一 单选题 二 填空题 三 判断题 一 单选题 1 单选题 采用全双工通信方式 数据传输的方向为 A 可以在两个方向上传输但不能同时进行 B 只能在一个方向上传输 C 可以在两个方向上同时传输 D 以上均不对 答案 C 解析 三种通信

  • 百度移动统计热力图和事件分析的坑

    埋点是这2年比较火的一项技术 友盟 极光推送 腾讯云 百度移动统计都相继开发了增加埋点的SDK 方便开发者使用 其中最为先进的是百度移动统计的无埋点技术 无埋点技术是不用开发者手动埋点的一项技术 很方便使用 对开发减少了开发量 太赞 集成步

  • jieba如何自行 split 或 join ?

    目录 jieba suggest freq 源码 split 关键运行过程解释 注意 使用此函数也有可能分不开 join 关键运行过程解释 jieba add word del word 源码 参考文献 jieba suggest freq

  • 联想拯救者R720 - i5-7300HQ/1050ti（macOS Big Sur/Windows) 双系统在 OpenCore （6.0.3）/ OCC (2.5.0)引导下的安装过程

    前言 重要 硬件列表 拯救者R720 处理器 型号 i5 7300HQ 架构 kaby lake 显卡 核显 UHD630 独显无效 忽略 主板 系列 100 Series 网卡 型号自选自购 不做陈列 声卡 批次不同 型号不同 不做陈列

  • [Unity好插件之PlayMaker]PlayMaker如何扩展额外创建更多的脚本

    学习目标 如果你正在学习使用PlayMaker的话 那么本篇文章将非常的适用 关于如何连线则是你自己的想法 本篇侧重于扩展适用更多的PlayMaker行为Action 那么什么是PlayMaker行为Action呢 就是这个列表 当我们要给

  • js echarts 固定颜色按顺序组合 或者随机生成颜色

    在使用echarts的时候或者大转盘的时候 数据量总是很多 但是颜色可以随机生成 也可以使用自己固定的颜色 这边我就分享了一下几种按照顺序组成颜色的代码 第一种 通过循环颜色 用一个splice 删一个 如果颜色没有了 再重新给他原来的数组

  • 常用事务代码（转）

    Pfcg 绝色维护 Su53 查看权限对象 st01 跟踪 St22 看dump 以分析错误 eg 找到ABAP程序出错的地方 找出founction 用se37查看找到的founction 找到有关权限检查 authority check

  • scscanner：一款功能强大的大规模状态码扫描工具

    关于scscanner scscanner是一款功能强大的大规模状态码扫描工具 该工具可以帮助广大研究人员从一个URL列表文件中批量读取目标网站的状态码响应信息 除此之外 该工具还可以过滤出指定的状态码 并将结果存储到一个文件中以供后续深入

  • neon常用指令（updating）

    函数参考手册 https developer arm com architectures instruction sets simd isas neon intrinsics 并在左侧选择neon Neon 128bit寄存器 所以可支持并

  • mysql将一张表插入到另一张表

    1 表1和表2的字段完全相同且要把表2所有的数据都插入到表1 可以用这种方法 insert into table1 select from table2 2 但是更多的时候我们只希望导入指定字段 可以用这种方法 insert into ta

  • 冯思远：Apache TVM 与机器学习编译发展

    下午好 欢迎大家今天来参加 2023 Meet TVM 作为 Apache TVM PMC 由我来给大家做关于 TVM 的发展以及 TVM 未来 Unity 框架的分享 Apache TVM Evolution 首先为什么会有 MLC Ma

  • 双指针算法模板及例题

    双指针算法时间复杂度O n 一般双指针算法运用于有序的某一个或两个序列中 从O n2 优化到O n 算法模板 for int i 0 j 0 i lt n i while j lt i check i j j 具体问题的逻辑 常见问题分类

  • stm32 mpu6050 cubemx 卡尔曼滤波法读取角度

    文章目录 前言 一 cubemx配置 二 mpu6050文件移植 mpu6050 c mpu6050 h 三 主函数 前言 本文简述使用mpu6050读取原始数据后解算出角度 网上大多都是dmp库来解算 但是这种情况操作起来相对复杂 更方便

  • electron入门案例

    目录解构 main js 主进程文件 用来控制整个应用程序 仅有一个 index html 渲染模板 render index js 渲染进程文件 用来控制页面的渲染 可有多个 package json 依赖包 主进程代码 在electro

  • 四. ZooKeeper 作为 SpringCloud 注册中心配置

    目录 一 简单概述 二 配置服务注册到 ZooKeeper 1 服务提供方 yml 文件配置注册到 ZooKeeper 2 服务消费方 yml 文件配置注册到 ZooKeeper 3 服务消费方配置 RestTemplate 注入到容器中

  • 【JAVA】我们常常谈到的方法是指什么？

    个人主页 个人主页 系列专栏 初识JAVA 文章目录 前言 方法 方法的分类 方法的定义 方法调用 方法重载 前言 在之前的文章中我们总是会介绍到类中的各式各样的方法 也许在应用中我们对它已经有了初步的了解 今天我们就来详细的介绍一下 方法

  • 经典卷积神经网络(CNN)图像分类算法详解

    本文原创 转载请引用 https blog csdn net dan teng article details 87192430 CNN图像分类网络 一点废话 CNN网络主要特点是使用卷积层 这其实是模拟了人的视觉神经 单个神经元只能对某种

  • QT获取一些机器相关信息的方法

    获取机器码的方法 按照注释传入相应的参数 即可获得对应的码 获取cpu名称 wmic cpu get Name 获取cpu核心数 wmic cpu get NumberOfCores 获取cpu线程数 wmic cpu get Number

  • 手把手教你对接快手小店开发者商家应用

    不懂就问 什么是快手小店 A 快手小店是快手电商于2018年6月推出的 后续以京东作为供应链 在短视频 直播中打开电商的新纪元 与其可以同态竞技的有抖音小店 以及淘宝直播 那么 要对接快手小店的接口 就需要申请快手开发者 在开发者账户内新建

  • 【Vue入门】语法 —— 插值、指令、过滤器、计算属性、监听器

    目录 一 模版语法 1 1 插值 1 1 1 文本 1 1 2 html解析 1 1 3 属性 1 1 4 表达式 1 2 指令 1 2 1 核心指令 1 2 3 动态参数 二 过滤器 2 1 局部过滤器 2 2 全局过滤器 三 计算属性

热门标签