Vue基本指令

Vue基本指令

     Vue基本模板语法
     Vue绑定类样式和内联样式
     条件渲染指令
     事件绑定





Vue基本模板语法

    1. 文本插值
  1. 使用双大括号{{}} 表示:基本形式
  2. 使用v-once指令实现:只需要渲染一次数据,后续数据变化不再关心时
  3. 使用v-text / v-html 指令实现:v-text可替代{{}},v-html解析html代码片段
<body>
		<div id="app">
			<p>{{ title}}</p>
			<p v-once>{{ title}}</p>
			<p v-text="title"></p>
			<p v-html="title"></p>
			
		</div>
		<script src="../js/vue.min.js"></script>
		<script>
			
			var vm=new Vue({
				el:"#app",
				data:{
					title:'欢迎你'
				}
				
			});
			
		</script>
	</body>

    2. 表达式:各种数值,变量和运算符的综合体
<body>
		<div id="app">
			<p>{{number+1}}</p>
			<p>{{ok?"yes":"no"}}</p>
			<p>{{message.split("").reverse().join("")}}</p>
			<div v-text="'list-'+id"></div>
			
		</div>
		<script src="../js/vue.min.js"></script>
		<script>
			
			var vm=new Vue({
				el:"#app",
				data:{
					number:1,
					ok:true,
					message:"hello world",
					id:"01"
					
				}
				
			});
			
		</script>
	</body>

Vue只支持单个表达式,不支持语句和流程控制,另外,在表达式中,不能使用用户自定义的全局变量,只能使用js的全局变量。
如:Math 和 Date,以下是无效表达式代码
{{ var book=“Vue基本指令”}}
{{ if (ok) return msg }}





Vue绑定类样式和内联样式

Vue绑定类样式

    1. v-bind :接受一个参数,在指令后以冒号指明
对象语法
<div v-bind:class="{类样式:绑定数据,...}"></div>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.min.js"></script>
		<style>
			.class1{
 		 		 background: #444;
		 		 color: #eee;
			}
		</style>
	</head>
<body>
	<div id="app">
  		<label for="r1">修改颜色</label>
  		<input type="checkbox" v-model="use" id="r1">
 	 	<br>
  		<div v-bind:class="{'class1': use}">颜色</div>
	</div>
    
	<script>
		new Vue({
   			 el: '#app',
 		 	 data:{
     		 	use:true //使用 class1 类的样式
     		 	use: false //不使用 class1 类的样式
 			 }
		});
	</script>
</body>

数组语法
<div v-bind:class="[绑定数据1,绑定数据2,...]"></div>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.min.js"></script>
		<style>
			#app{
				width: 600px;
				
				margin: 50px auto;
			}
			
			#app .border{
				width: 300px;
				height: 300px;
				border: solid 2px red;
			}
			
			#app .shadow{
				box-shadow: 0 0 10px gray;
			}
			
			#app .black{
				background: green;
			}
		</style>
	</head>
<body>
	<div id="app">
  		
  		<div v-bind:class="[borderClass,shadowClass,BlackClass]"></div>
	</div>
    
	<script>
		new Vue({
   			 el: '#app',
 		 	 data:{
     		 	borderClass:"border",
     		 	shadowClass:"shadow",
     		 	BlackClass:"black"
 			 }
		});
	</script>
</body>
</html>

内联样式

对象语法
<div v-bind:style="{样式属性:绑定数据}"></div>
		或者
		<div v-bind:style="styleObject">
			<script>
				var vm=new Vue({
					el:"#app",
					data:{
						styleObject{
							样式属性:样式值,
							....
						}
					}
				})
			</script>
		</div>

数组语法
<div v-bind:style="[baseStyle,overridingStyle]"></div>

缩写方式v-bind
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>





条件渲染指令

   指令:Vue中一个重要的特性,主要提供一种机制将数据的变化映射为DOM行为。指令时是带有v- 前缀的特殊属性

    1. v-if ( v-else紧跟在v-if后面):根据表达式seen的真假来移除或插入 p 元素
<div id="app">
			<p v-if="seen">现在可看到内容</p>
</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					seen:true //显示内容
					seen:false//不显示内容
					
				}
				
			});
			
		</script>

    2. v-show :简单的切换元素的css属性display

根据true或false切换时间

<div id="app">
  		<input type="checkbox" v-model="inTheSummer">
 	 	<br>
  		<div id="box">
  			<h3>今天</h3>
  			<div v-show="inTheSummer">
  				8:00
  			</div>
  			<div v-show="!inTheSummer">
  				20:00
  			</div>
  		</div>
	</div>
    
	<script>
		new Vue({
   			 el: '#app',
 		 	 data:{
     		 	inTheSummer:true
 			 }
		});
	</script>





事件绑定

   1. v-on:一个指令以特殊的方式绑定。
<form v-on:submit.prevent="onSubmit"></form>
.prevent 修饰符告诉 v-on 指令对于触发的事件调用
 event.preventDefault():

使用v-on写计算器
在这里插入图片描述
在这里插入图片描述

   2. 事件修饰符

主要修饰符:

  1. .stop:等同于调用event.stopPropagation()方法。
  2. .prevent: 等同于调用event. preventDefault()方法。
  3. .capture: 使用capture模式添加事件监听器
  4. .sef: 只有当事件是从监听元素本身触发时才触发回调。
  5. .once: 点击事件将只会触发一次。

   3.事件修饰符使用代码
<!--阻止单击事件继续传播-->
<a v-on:click.stop="doThis"></a>

<!--阻止表单默认提交事件-->
<form v-on:submit prevent="onSubmit"> </form>

<!--阻止默认提交事件且阻止冒泡-->
<form v-on:submit.stop. prevent="onSubmit"> </form>

<!--也可以只有修饰符,并不绑定事件-->
<form v-on:submit. prevent> </form>

<!--添加事件监听器时使用事件捕获模式-->
<!--即元素自身触发的事件先在此处理,然后才交由内部元素进行处理-->
<div v-on:click.capture="doThis">... </div>


<!--只有在event.target是当前元素自身时才触发处理函数,即事件不是从内部元素触发的-->
<div v-on:click.self="doThat">... </div>

<!--点击事件将只会触发一次-->
<a v-on:click.once="doThis"> </a>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页