Vue基础02-数据\事件绑定

叶，相触云间

已于 2024-05-23 09:15:26 修改

阅读量518

点赞数 18

分类专栏： Vue 文章标签： vue.js

于 2024-05-21 17:29:34 首次发布

本文链接：https://blog.csdn.net/qq_65582259/article/details/139092887

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue指令：html标签中的动态属性，所有的指令都是以v-开头

1.常用指令

（1）v-text : 从model层中取出数据，并渲染到指定的标签中，不解析文本中的html标签
（2）v-html : 从model层中取出数据，并渲染到指定的标签中，解析文本中的html标签

（3）v-pre : 主要用来跳过这个元素和它的子元素编译过程，可以用来显示原始的Mustanche标签。跳过没有指令的节点，加快编译
（4）v-once: v-once关联的实例只会渲染一次。之后的会重新渲染，实例及其子节点会被视为静态内容跳过.。这可以优化与更新性能。

2.属性绑定指令

（1）v-bind:HTML原生属性名称=“data中的数据名称”。简化用法：v-band====>: (后跟变量或者计算表达式或者函数，跟常量要用单引号)
（2）v-model:只能用于表单元素（文本框、密码框、单选按钮、复选框、下拉列表…）的双向绑定指令（数据双向绑定）是一个语法糖，多个指令的集合（v-bind+v-on:change(只是一个例子)）

3.事件指令

v-on:事件名称="函数名称"
事件名称：cick（单击事件）,focus（获取焦点事件）,blur（失去焦点事件）
,change（数据变化事件）,dbclick（双击事件）,load（加载事件）
简化方法： v-on:click="mysqFun1" ==>@click="myFun2"

4.条件渲染

v-if:条件成立时渲染标签，条件不成立时不渲染标签
v-else:
v-else -if:
v-show:无论条件是否成立都会渲染标签，不展示style="display: none"来隐藏标签

5.列表渲染(即循环)

v-for: v-for=“name in<of> nameList” :key="name"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 1.指令：html标签中的动态属性，所有的指令都是以v-开头-->
			<!-- 
				v-text: 从model层中取出数据，并渲染到指定的标签中，不解析文本中的html标签
				v-html: 从model层中取出数据，并渲染到指定的标签中，解析文本中的html标签
				-->
			<h1 v-text="message"></h1>
			<p v-text="msg"></p>
			
			<h1 v-html="message"></h1>
			<p v-html="msg"></p>
			
			<!--
				v-pre:主要用来跳过这个元素和它的子元素编译过程，可以用来显示原始的Mustanche标签。
				      跳过大量没有指令的节点，加快编译
				v-once:v-once关联的实例只会渲染一次。之后的会重新渲染，实例及其子节点会被视为静态内容跳过
					   这可以优化与更新性能
			 -->
			 <span v-pre>{{message}}</span>
			 <span>{{message}}</span>
			 
			 <div v-once>
				 <h1>{{message}}</h1>
				 <span>{{message}}</span>
			 </div>
			 
			 <h1 title="你好,我是h1标签">{{message}}</h1>
			 <!-- 
			  2.属性绑定指令
			  v-bind:HTML原生属性名称=“data中的数据名称”
					 简化用法：v-band====>: (后跟变量或者计算表达式或者函数，跟常量要用单引号)
			  v-model:只能用于表单元素（文本框、密码框、单选按钮、复选框、下拉列表…）的双向绑定指令（数据双向绑定）
			        是一个语法糖，多个指令的集合（v-bind+v-on:change(只是一个例子)）
			  -->
			  <h1 v-bind:title="msg1">{{message}}</h1>
			  <span :title="msg1">{{message}}</span>
			  <h2 :title="'abc'">{{message}}</h2>
			  
			  <h1>文本框</h1>
			  <p><input type="text" v-model="message"></p>
			  <p><textarea cols="30" rows="10" v-model="message"></textarea></p>
			  <span >data中的数据：{{message}}</span>
			  
			  <h1>单选按钮</h1>
			  <p>
				  <label><input type="radio" name="gender" value="male" v-model="genderVal"/>男性</label>
				  <label><input type="radio" name="gender" value="female" v-model="genderVal"/>女性</label>
			  </p>
			  <p>data中的数据:{{genderVal}}</p>
			  
			  <!--复选框
			   1.单用:绑定的数据类型为boolean
			   2.多用:绑定的数据类型为array
			   -->
			   <h1>复选框</h1>
			   <p>
				   <label><input type="checkbox" v-model="login"/>十天内免登陆</label>
			   </p>
			   <p>
				   data中的数据：{{login}}
			   </p>
			   
			   <p>
					<label><input type="checkbox" name="habby" value="唱" v-model="hobby"/>唱</label>
					<label><input type="checkbox" name="habby" value="跳" v-model="hobby"/>跳</label>
					<label><input type="checkbox" name="habby" value="rap" v-model="hobby"/>rap</label>
			   </p>
			   <p>
			   	    data中的数据：{{hobby}}
			   </p>
			   
				<h1>下拉框</h1>
				<select v-model="edu">
					<option value="1">幼儿园</option>
					<option value="2">小学</option>
					<option value="3">初中</option>
					<option value="4">高中</option>
					<option value="5">大学</option>
				</select>
				
				<h2>多选</h2>
				<p>data中的数据：{{edu}}</p>
				<select multiple v-model="array">
					<option value="aa">选项1</option>
					<option value="bb">选项2</option>
					<option value="cc">选项3</option>
					<option value="dd">选项4</option>
					<option value="ee">选项5</option>
			    </select>
				<p>data中的数据：{{array}}</p>
				
				
			  <h1>事件按钮</h1>
			  <!-- 
			   3.事件绑定指令
			   v-on:事件名称="函数名称"
			   事件名称：cick（单击事件）,focus（获取焦点事件）,blur（失去焦点事件）
			   ,change（数据变化事件）,dbclick（双击事件）,load（加载事件）
			   
			   简化方法：
			   v-on:click="mysqFun1" ==>@click="myFun2"
			   -->
			   <p><button type="button" v-on:click="myFun1">按钮1</button></p>
			   <p><button type="button" @click="myFun2">按钮2</button></p>
			   
			   <!-- 
				4.条件渲染
				v-if:条件成立时渲染标签，条件不成立时不渲染标签
				v-else:
				v-else -if:
				v-show:无论条件是否成立都会渲染标签，不展示style="display: none"来隐藏标签
				-->
				<h1>条件渲染</h1>
				<p><button type="button" @click="islogin = !islogin">登录与登出</button></p>
				<div v-if="islogin">当前登录用户：{{username}}</div>
				<div v-else>请登录</div>
				<p>data中的数据：{{islogin}}</p>
				<hr>
				<div>
					<div v-if="gender=='1'">男性</div>
					<div v-else-if="gender=='2'">女性</div>
					<div v-else-if="gender=='3'">小孩</div>
					<div v-else>***</div>
				</div>
				<div v-show="islogin">v-show指令</div>
				
				<h1>列表渲染</h1>
				<!-- js中数组是可变长的，所以没有list集合，但有set和map -->
				<ul>
					<!-- <li v-for="name in nameList">{{name}}</li> -->
					<li v-for="name of nameList" :key="name">{{name}}</li>
				</ul>
				<hr>
				<ul>
					<!-- <li v-for="name in nameList">{{name}}</li> -->
					<li v-for="(name,index) of nameList" :key="index">{{name}}=={{index}}</li>
				</ul>
				<hr>
				<table border="1" width="500" center>
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>成绩</th>
					</tr>
					<tr v-for="student in studentList" :key="student.id">
						<td>{{student.id}}</td>
						<td v-text="student.name"></td>
						<td v-text="student.age"></td>
						<td v-text="student.score"></td>
					</tr>
				</table>
				
			   
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data:{
					message: 'hello vue.js',
					msg: '<a href="#">超链接</a>',
					msg1: '你好，属性绑定',
					genderVal: 'female',
					login:true,
					hobby:['唱'],
					edu:'',
					array:[],
					username:'张三',
					islogin:true,
					gender:'1',
					nameList:['张三','小四','王五','赵六','小七','大巴'],
					studentList:[
						{id:101,name:'小明',age:22,score:75},
						{id:102,name:'小红',age:21,score:90},
						{id:103,name:'小蓝',age:20,score:91},
						{id:104,name:'小绿',age:22,score:80}
					]
				},
				//事件处理程序
				methods:{
					myFun1: function(){
						console.log('函数1执行了...');
					},
					//简化（js6版本）
					myFun2(){
						//在函数中可以使用data中的数据，或调用其他的函数，通过this关键字调用
						//this表示vue对象,空格和;在js里都是代码间隔符
						console.log('函数2执行了...'+this.message);
						this.myFun1();
					}
				}
			});

		</script>
	</body>
</html>