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

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>

  • 18
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值