【测试平台开发】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>
posted @   进击的bug~  阅读(44)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示