Vue入门第3天------模板语法（二）

一、属性绑定

1.1 Vue如何动态处理属性

• v-bind指令用法

<a v-bind:href='url'>跳转</a>

• 缩写形式

<a :href='url'>跳转</a>

1.2 v-model的底层实现原理分析

<input v-bind:value='msg' v-on:input="msg=$event.target.value">

注意：实际上底层原理就是
：用v-bind来绑定value值，v-on:去绑定input标准事件，input这个事件用来监听输入域内容，当内容发生变化的时候，通过$event获取到输入域的最新的值，之后把最新的值赋值给原来的msg，从而实现了数据的更新，完成了双向数据绑定。但是实际开发中我们还是会使用v-model来实现双向绑定。

二、样式绑定

2.1 class样式处理

• 对象语法

<div v-bind:class="{active: isActive}"></div>

这里的active是类名，is后要加类名，并且isActive有两个取值：true、false

例子：

		<style>
			.active{
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			.error{
				background-color:orange;
			}
		</style>
		<div id="app">
			<div v-bind:class="{active: isActive,error:isError}">
				测试样式
			</div>
			<button v-on:click="handle">切换</button>
		</div>
		<script src="js/vue.min.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					isActive:true,
					isError:true
				},
				methods:{
					handle:function(){
						//控制isActive值在true和false之间切换
						this.isActive = !this.isActive;
						this.isError = !this.isError;
					}
				}
			})
		</script>

• 数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

active是类名，类名后加Class

例子：

		<style>
			.active{
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			.error{
				background-color:orange;
			}
		</style>
		<div id="app">
			<div v-bind:class="[activeClass,errorClass]">测试样式</div>
			<button v-on:click="handle">切换</button>
		</div>
		<script src="js/vue.min.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					activeClass:'active',
					errorClass:'error'
				},
				methods:{
					handle:function(){
						this.activeClass="";
						this.errorClass="";
					}
				}
			})
		</script>

2.2 class样式绑定相关语法细节

1. 对象绑定和数组绑定可以结合使用

<div v-bind:class="[activeClass,errorClass,{test:isTest}]"></div>

2. class绑定的值可以简化操作（数组和对象）

//数组的简化操作
<div v-bind:class="arrClasses"></div>
arrClasses:['active','error'],
//对象的简化操作
<div v-bind:class="objClasses"></div>
objClasses:{
			active:true,
			error:true
		}

3. 默认的class会保留

.base{
		font-size: 28px;
	}
<div class="base" v-bind:class="objClasses"></div>

注意：运行后会发现它有三个样式，有自己默认的base，还有objClasses里面的两个样式。

2.3 style样式处理

• 对象语法

<div v-bind:style='{color:activeColor,fontSize:fontSize}'></div>

• 数组语法

<div v-bind:style='[baseStyles,overridingStyles]'></div>

style样式处理用法其实和刚才的class样式处理基本是一样的！

		<div id="app">
			<div v-bind:style="{border:borderStyle,width:widthStyle,height:heightStyle}"></div>
			<div v-bind:style="objStyles"></div>
			<div v-bind:style="[objStyles, overrideStyles]"></div>
			<button v-on:click="handle">切换</button>
		</div>
		<script src="js/vue.min.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					borderStyle:'1px solid pink',
					widthStyle:'100px',
					heightStyle:'200px',
					objStyles:{
						border:'1px solid green',
						width:'200px',
						height:'100px'
					},
					overrideStyles:{
						border:'5px solid orange',
						backgroundColor:'blue'
					}
				},
				methods:{
					handle:function(){
						this.heightStyle='100px';
						this.objStyles.width='100px';
					}
				}
			})
		</script>