随笔- 37 文章- 0 评论- 0 阅读- 21538

【测试平台开发】Vue指令、属性绑定、事件绑定学习教程

示例1：如何使用Vue的数据绑定、指令（如v-text和v-html）以及如何通过v-pre指令来跳过元素的编译过程。此外，它还演示了如何在Vue组件中定义和使用数据对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> <!-- 设置文档的字符编码为UTF-8 -->
		<title></title> <!-- 标题标签，当前未设置标题内容 -->
	</head>
	<!-- 引入Vue 3的global版本，用于在浏览器中直接通过<script>标签使用Vue -->
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	<body>
		<!-- Vue应用的挂载点，Vue实例将控制这个DOM元素及其内部的内容 -->
		<div id="app">
			<!-- 使用双花括号语法绑定name变量的值到h1标签的内容中 -->
			<h1>{{name}}</h1>
			<!-- 绑定stu对象的name属性的值到h1标签的内容中 -->
			<h1>{{stu.name}}</h1>
			<!-- 绑定stu对象的age属性的值到h1标签的内容中 -->
			<h1>{{stu.age}}</h1>
			<!-- v-text指令与双花括号语法功能相同，但v-text指令会替换元素的整个内容 -->
			<h1 v-text="stu.age" ></h1>
			<!-- 尝试使用v-text指令绑定stu.desc，但desc包含HTML标签，因此这里v-text会将其转义为纯文本 -->
			<h1 v-text="stu.desc" ></h1>
			<!-- v-html指令会输出原始的HTML内容，不会进行转义，因此可以正确渲染stu.desc中的<i>标签 -->
			<h1 v-html="stu.desc" ></h1>
			<!-- 双花括号语法，正常显示绑定的变量内容 -->
			<h1>显示两个花括号和name：{{name}}</h1>
			<!-- v-pre指令会跳过元素的编译过程，因此{{name}}会被原样显示，不会被替换为变量的值 -->
			<h1 v-pre>显示两个花括号和name：{{name}}</h1>
		</div>
		<script>
			// 创建一个Vue应用实例
			var app = Vue.createApp({
				// 定义应用的数据对象
				data(){
					return{
						name :"python", // 一个简单的字符串变量
						stu:{ // 一个对象，包含学生的信息
							name:"张三", // 学生姓名
							age:20, // 学生年龄
							desc:"<i>是一名python爱好者</i>" // 学生描述，包含HTML标签
						}
					}
				},
				methods:{
					// 方法对象，当前为空，可以定义一些供模板使用的方法
				}
			})
			// 将Vue应用挂载到#app元素上，Vue将开始编译并控制这个元素及其内部的内容
			app.mount('#app')
		</script>
	</body>
</html>

示例2：如何在Vue模板中使用v-bind指令（包括其简写形式:）来绑定HTML元素的属性（在这个例子中是a标签的href属性）到Vue实例的数据对象上。同时，它也展示了如何在模板中通过双花括号{{ }}语法来显示数据对象中的属性值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> <!-- 设置文档的字符编码为UTF-8，确保正确显示各种字符 -->
		<title></title> <!-- 页面标题标签，当前未设置具体标题 -->
	</head>
	<!-- 引入Vue 3的global版本，允许在浏览器中直接使用Vue -->
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	<body>
		<!-- Vue应用的挂载点，Vue实例将控制这个DOM元素及其内部的内容 -->
		<div id="app">
			<!-- 使用v-bind指令绑定href属性到url1对象的url属性上，同时显示url1对象的name属性 -->
			<a v-bind:href="url1.url">{{url1.name}}</a>
			<!-- 一个空的div元素，当前没有实际用途 -->
			<div></div>
			<!-- 简写形式的v-bind指令，直接绑定href属性到url1对象的url属性上，同时显示url1对象的name属性 -->
			<a :href="url1.url">{{url1.name}}</a>
		</div>
		
		<script>
			// 创建一个Vue应用实例
			var app = Vue.createApp({
				// 定义应用的数据对象
				data(){
					return{
						// 定义一个对象url1，包含name和url两个属性
						url1:{
							name:"百度", // 链接的文本内容
							// 注意：这里的URL可能是一个示例，实际指向的是Vue.js官方文档的某个页面
							url:"https://cn.vuejs.org/guide/essentials/template-syntax.html"
						}
					}
				},
				// 方法对象，当前为空，可以定义一些供模板使用的方法
				methods:{
					
				}
			})
			// 将Vue应用挂载到#app元素上，Vue将开始编译并控制这个元素及其内部的内容
			app.mount('#app')
		</script>
	</body>
</html>

Vue模板中使用v-on:click指令（或其简写形式@click）来绑定按钮的点击事件到Vue实例的方法上。同时，它也展示了如何在Vue实例的数据对象中定义和修改数据属性，并在模板中通过双花括号{{ }}语法来显示这些数据属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> <!-- 设置文档的字符编码为UTF-8，以正确显示各种字符 -->
		<title></title> <!-- 页面标题标签，当前未设置具体标题 -->
	</head>
	<!-- 引入Vue 3的global版本，允许在浏览器中直接使用Vue -->
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	<body>
		<!-- Vue应用的挂载点，Vue实例将控制这个DOM元素及其内部的内容 -->
		<div id="app">
			<!-- 一个按钮，当点击时，会触发Vue实例中的add方法，使number值增加 -->
			<button type="button" v-on:click="add">+</button>
			<!-- 显示Vue实例中number数据的值 -->
			<h1>{{number}}</h1>
			<!-- 另一个按钮，当点击时，会触发Vue实例中的sub方法，使number值减少 -->
			<button type="button" @click="sub">-</button>
			
		</div>
		
		<script>
			// 创建一个Vue应用实例
			var app = Vue.createApp({
				// 定义应用的数据对象
				data(){
					return{
						// 定义一个名为number的数据属性，初始值为0
						number:0
					}
				},
				// 定义应用的方法对象
				methods:{
					// add方法，用于增加number的值
					add(){
						this.number++ // 使用this关键字访问Vue实例中的number属性，并将其值增加1
					},
					// sub方法，用于减少number的值
					sub(){
						this.number-- // 使用this关键字访问Vue实例中的number属性，并将其值减少1
					}
				}
			})
			// 将Vue应用挂载到#app元素上，Vue将开始编译并控制这个元素及其内部的内容
			app.mount('#app')
		</script>
	</body>
</html>