1. 首页 >
  2. AI专题 >
  3. 正文

【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 全局过滤器

三、计算属性

四、监听器

五、排座案例

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

一、模版语法

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:xxxv-bind:href 简写为 :href
v-on:xxx@xxxv-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>

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

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

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

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

相关文章

【Vue3】使用ref与reactive创建响应式对象

先来简单介绍一下ref，它可以定义响应式的变量let xxx = ref(初始值)。**返回值：**一个RefImpl的实例对象，简称ref对象或refref对象的value属性是响应式的。JSxxx.value，但模板中不需要.value，直接使用即可。对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。下面我们看一看上图红框中代表的意思是，我们哪里需要响应就在哪个里面导入上述代码即可。
编程日记 2024/02/21 09:49:43

如何设置页面恢复运行事件触发回调

由于 Android 原生的 resume 和 pause 事件不能区分是压后台导致还是页面切换导致，所以 pageResume 和 pagePause 事件是通过 JSAPI 调用记录回调的，仅适用于同一个 session 内 Window 之间的互相切换。当一个 WebView 界面重新回到栈顶时，例如从后台被唤起、锁屏界面恢复、从下个页面回退，会触发页面恢复运行（resume）事件。如果这个界面是通过 popWindow 或 popTo 到达，且传递了 data 参数，则此页可以获取到这些参数。
编程日记 2024/02/21 09:47:28

日常遇到Maven出现依赖版本/缓存问题通用思路。

如果怀疑是本地仓库中缓存的依赖有问题，可以手动删除本地仓库（默认位置在用户的.m2/repository目录下），但这是一个较为极端的做法，因为这会删除所有项目的所有本地依赖，之后Maven将不得不重新下载这些依赖。针对于这样的问题 首先我们的第一思路 就是怀疑到是缓存的问题，那么我在这里去描述一下 我们遇到这类通用类的问题如何解决。检查项目的pom.xml文件，确认依赖声明正确无误，没有冲突的版本号或不正确的依赖范围。版本问题导致的，但是我确认过了一下的一些操作 依然没有解决我的问题。
编程日记 2024/02/21 09:45:27

什么是tomcat？tomcat是干什么用的？

Tomcat是一个开源的、轻量级的应用服务器，是Apache软件基金会的一个项目。它实现了Java Servlet、JavaServer Pages（JSP）和Java Expression Language（EL）等Java技术，用于支持在Java平台上运行的动态Web应用程序。AJP是用于Apache服务器与Tomcat之间进行通信的协议，通常用于将动态生成的内容传递给Apache服务器进行处理。它能够运行Servlet和JSP，提供了一个环境，使得开发者能够构建和运行基于Java的Web应用。
编程日记 2024/02/19 20:51:12

C# winfrom中excel文件导入导出

在C#交流群里，看到很多小伙伴在excel数据导入导出到C#界面上存在疑惑，所以今天专门做了这个主题，希望大家有所收获！环境：win10+vs2017界面：主要以演示为主，所以没有做优化，然后主界面上添加两个按钮，分别命名为ExportExcel和ImportExcel，添加两个dataGridView，分别是dataGridView1和dataGridView2然后在窗体加载程序中给dataGr...
编程日记 2024/02/17 14:00:34

Java 与 JavaScript 的区别与联系

Java 和 JavaScript 两种编程语言在软件开发中扮演着重要的角色。尽管它们都以“Java”命名，但实际上它们是完全不同的语言，各有其独特的特点和用途。本文将深入探讨 Java 和 JavaScript 的区别与联系，帮助大家更好地理解它们在编程世界中的作用。
编程日记 2024/02/13 20:01:28

C语言中的作用域与生命周期

但是全局变量被 static 修饰之后，外部链接属性就变成了内部链接属性，只能在自己所在的源文件内部使用了，其他源文件，即使声明了，也是无法正常使用的。结论：static修饰局部变量改变了变量的生命周期，生命周期改变的本质是改变了变量的存储类型，本来一个局部变量是存储在内存的栈区的，但是被 static 修饰后存储到了静态区。extern 是用来声明外部符号的，如果一个全局的符号在A文件中定义的，在B文件中想使用，就可以使用extern进行声明，然后使用。全局变量的生命周期是：整个程序的生命周期。
编程日记 2024/02/13 20:00:24

Python和Java的区别（不断更新）

运行效率：一般来说，Java的运行效率要高于Python，这主要是因为Java是编译型语言，其代码在执行前会进行预编译，而Python是解释型语言，边解释边执行。而Python没有类似的强大虚拟机，但它的核心是可以很方便地使用C语言函数或C++库，这使得Python可以轻松地与底层硬件进行交互。**类型系统：**Java是一种静态类型语言，所有变量需要先声明（类型）才能使用，且类型在编译时就已经确定。总的来说，Python和Java各有其优势和特点，选择哪种语言取决于具体的项目需求、开发环境以及个人偏好。
编程日记 2024/02/11 20:37:25

服务器与电脑的区别?

服务器是指一种专门提供计算和存储资源、运行特定软件服务的物理或虚拟计算机。服务器主要用于接受和处理来自客户端（如个人电脑、手机等）的请求，并向客户端提供所需的服务或数据。服务器在网络环境中扮演着中心节点的角色，负责存储和管理数据、提供网络服务、处理计算任务等。
编程日记 2024/02/10 19:41:26

windows下ngnix自启动（借助工具winSw）

在windows下安装nginx后，不想每次都手动启动。本文记录下windows下ngnix自启动（借助工具winSw）的操作流程提示：以下是本篇文章正文内容，下面案例可供参考本文记录下windows下ngnix自启动（借助工具winSw）的操作流程。
编程日记 2024/02/08 18:11:23

synchronized 和 Lock 有什么区别？synchronized 和 ReentrantLock 区别是什么？说一下 atomic 的原理？

例如，AtomicInteger 的 incrementAndGet() 方法就是通过 CAS 操作实现的，它首先尝试原子地将共享变量加 1，如果操作成功，则返回新的值，否则重试直到操作成功为止。CAS 操作的原理是，当 V 的值等于 A 时，将 V 的值更新为 B，否则什么也不做。synchronized 和 Lock 都是 Java 中用于实现线程同步的关键字/类库，它们都能够提供对共享资源的安全访问和防止数据竞争的功能，但是在实现方式、特性、适用场景等方面存在一些差异。
编程日记 2024/02/07 09:09:26

Kafka常见生产问题详解

比如，在原有Topic下，可以调整Producer的分区策略，让Producer将后续的消息更多的发送到新增的Partition里，这样可以让各个Partition上的消息能够趋于平衡。思路是可行的，但是重试的次数，发送消息的数量等都是需要考虑的问题。PageCache缓存中的消息是断电即丢失的。因为如果业务逻辑异步进行，而消费者已经同步提交了Offset，那么如果业务逻辑执行过程中出现了异常，失败了，那么Broker端已经接收到了消费者的应答，后续就不会再重新推送消息，这样就造成了业务层面的消息丢失。
编程日记 2024/02/02 14:04:11

深入理解 Java 变量类型、声明及应用

Java 变量 变量是用于存储数据值的容器。在 Java 中，有不同类型的变量，例如： String - 存储文本，例如 &amp;quot;你好&amp;quot;。字符串值用双引号引起来。 int - 存储整数（全数字），没有小数，例如 123 或 -123。 float - 存储浮点数，带有小数，例如 19.
编程日记 2024/02/01 21:45:51

Zookeeper分布式队列实战

ZooKeeper实现队列步骤1.创建队列根节点：在Zookeeper中创建一个持久节点，用作队列的根节点。所有队列元素的节点将放在这个根节点下。2.实现入队操作：当需要将一个元素添加到队列时，可以在队列的根节点下创建一个临时有序节点。节点的数据可以包含队列元素的信息。3.实现出队操作：当需要从队列中取出一个元素时，先获取根节点下的所有子节点。再找到具有最小序号的子节点，获取该节点的数据，删除该节点，然后返回节点的数据。
编程日记 2024/02/01 14:42:13

SpringMVC校验注解不生效

用来实现参数校验功能。Spring使用hibernate-validator作为它的默认实现，我们只需要进行一些简单的注解声明，就可以达到参数校验的功能。但是在实际使用场景中，经常会出现校验没生效的问题。
编程日记 2024/01/31 20:39:50

为什么Java中的String类被设计为final类？

String类作为Java中不可或缺的类之一，被设计成final类带来了不可变性、安全性、可靠性和性能优势。不可变的特性使得String对象在多线程环境下安全共享，提高了应用程序的并发性和性能。此外，String类的设计还符合Java类库的一致性和规范，确保了整个语言的稳定性和可靠性。因此，String类被设计成final类是出于多方面的考虑，以提供最佳的使用体验和编程效率。
编程日记 2024/01/27 08:53:11

bat脚本打开多个黑窗口并执行不同的命令

在使用java -jar运行jar包之前，需要先启动redis，而redis的安装目录与jar包不在同一目录下，所以每次启动项目的时候都需要来回的切换目录。现写了一个bat脚本，用来一键启动redis和jar包。start cmd /k &quot;cd /d redis安装目录 &amp;&amp; redis-server redis.windows.conf&quot;其中，cmd /k命令是不关闭黑窗口的命令，timeout /T 3表示等待3秒，/NOBREAK表示键盘输入不会中断等待。
编程日记 2024/01/26 16:42:44

鸿蒙（ArkUI）开发：实现二级联动

列表的二级联动（Cascading List）是指根据一个列表（一级列表）的选择结果，来更新另一个列表（二级列表）的选项。这种联动可以使用户根据实际需求，快速定位到想要的选项，提高交互体验。例如，短视频中拍摄风格的选择、照片编辑时的场景的选择，本文即为大家介绍如何开发二级联动。
编程日记 2024/01/25 21:53:21

Vue和React的区别 | | React函数式写法和类写法的区别

React 更多的是一个库而不是框架，它更专注于视图层的管理，通过社区和第三方库来进行补充和扩展。类式组件: 类式组件是 ES6 中引入的 class 类的一种用法，它继承自 React.Component，拥有完整的生命周期和内部状态管理能力。它是无状态的，没有生命周期和内部状态。而在 React 中，我们使用 JSX 语法，它是一种 JavaScript 的扩展语法，可以在 JavaScript 中直接编写类似 HTML 的结构。在 React 中，我们可以定义组件的两种方式，即函数式组件和类式组件。
编程日记 2024/01/24 20:03:08

SpringBoot：详解Bean生命周期和作用域

前面我们讲诉了将Bean正确地装配到IoC容器，却未讲诉IoC如何装配和销毁Bean。本篇文章主要讲诉一下Bean的生命周期和作用域。以上就是Bean生命周期和作用域的讲解。
编程日记 2024/01/22 09:39:43

微信小程序 自定义组件和生命周期

类似vue或者react中的自定义组件⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成可以在微信开发者⼯具中快速创建组件的⽂件结构在⽂件夹内 components/myHeader ，创建组件 名为 myHeader⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径index.wxml// 引用声明// 要使用的组件的名称 // 组件的路径&lt; view &gt;
编程日记 2024/01/20 18:18:16
返回
顶部