vue_权威指南_note

[ronghaoZHI]

最近在阅读“Vue权威指南”一书，此书主要以Vue1.0展开由浅入深。
我主要挑选一些平常被忽略知识点进行总结：

Vue计算属性-coputed 之 缓存 cache

计算属性很诱人，但是如果在计算属性方法中执行大量的耗时操作，可能会带来一些性能问题。例如，在计算属性getter 中循环一个大的数组以执行很多操作，那么当频繁调用该属性时，就会导致大量不必要的运算。在Vue0.12版本和方面进行了优化，只有计算属性依赖的属性值 发生改变才会重新执行getter。
这样也存在一个问题，当Vue实例中被观察到数据属性发生了改变时，才会重新执行getter，但是有时候计算属性依赖实时的非观察数据属性。
实例如下：

var vm = new Vue({
	data:{
		welcome:”welcome~~~”
	},
	computed:{
		example:function(){
			return  Date.now()+this.welcome;
		}
	}
})

我们需要在每次访问example时都取得最新的时间，而不是缓存的时间，在Vue中默认提供了缓存开关，在计算属性对象中指定cache字段来控制是否开启缓存。
代码如下：

var vm = new Vue({
	data:{
		welcome:”welcome~~~”
	},
	computed:{
		//关闭缓存，默认为true
		cache:false,
		example:function(){
			return  Date.now()+this.welcome;
		}
	}
})

Vue 样式 v-bind:class

语法事例如下：
直接绑定数据中的对象，代码如下

<div id=“example” :class=“ddfe”></div>

var vm = new Vue({
	el:”#example”,
	data:{
	ddfe:{
		“didi-orange”:true,
		“didi-green”:false
	}	
}
})

还可以绑定一个返回对象的计算属性。代码如下：

<div id=“example” :class=“ddfe”></div>

var vm = new Vue({
	el:”#example”,
	data:{
		didiAge:4,
		didiNum:5
	},
	computed:{
		ddfe:function(){
			return {
				“didi-orange”:this.didiAge>3?true:false,
				“didi-green”:this.didiNum>10?true:false
			}
		}
	}
})

Vue 方法属性 method 之 event

事例如下：

var vm = new Vue({
	el:”…”,

	methods:{
		greet:function(event){
			// “event” 是原生DOM事件-dom
			alert(event.target)
		}
	}
})

$event 应用

<button @click=“greet($event)”>111</button>

var vm =new Vue({
	el:”…”,
	
	methods:{
		greet:function(e){
			// “e”为原生事件对象-click
			alert(e);
			e.preventDefault;
		}
	}
})

prevent.//组织默认事件 stop.//阻止冒泡 capture.//事件为捕获模式 self.//只当事件在元
素本身触发

<form @submit.prevent></form>
<div @click.stop.prevent.self=“fn”></div>

Vue表单验证 之 v-validator

安装:
npm install v-validator —save
使用

import  vueValidator form “v-validator” 
Vue.use(vueValidator);

基本使用事例：

<!-- demo about checkbox-validate  -->
	<div id="app">
		<validator class="validation">
			<form novalidate>
				<h1>survey</h1>
				<fieldset>
					<legend>what do you like fruit?</legend>
					<input type="checkbox" id="apple" value="apple" v-validate:fruits="{required:{rule:ture,message:'please select one at least'},minlength:{rule:1,message:'please select one at least'},maxlength:{rule:3,message:'please select three at most'}}">
					<label for="apple">apple</label>
					<input type="checkbox" id="orange" value="orange" v-validate:fruits>
					<label for="orange">orange</label>
					<input type="checkbox" id="banana" value="banana" v-validate:fruits>
					<label for="banana">banana</label>
					
					<ui class="errors">
						<li v-for="msg in $validation.fruits.errors">
							<p>{{msg}}</p>
						</li>
					</ui>
				</fieldset>
			</form>
		</validator>
	</div>

	<!-- demo about radio-validate -->
	<div id="app">
		<validator class="validation1">
			<form novalidate>
				<fieldset>
					<legend>which do you like fruit?</legend>
					<input type="radio" id="apple" value="apple" v-validate:fruits="{required:{rule:ture,message:'requied fruit!!'}">
					<label for="apple">apple</label>
					<ipnut type="radio" id="banana" value="banana" v-validate:fruits=""></ipnut>
					<label for="banana">banana</label>
					<ipnut type="radio" id="orange" value="orange" v-validate:fruits=""></ipnut>
					<label for="orange">orange</label>
						
					<ul class="errors">
						<li v-for="msg in $validation1.fruits.errors">
							<p>{{msg}}</p>
						</li>
					</ul>
				</fieldset>
			</form>
		</validator>		
	</div>
	<!-- demo about select-validate -->
	<div id="app">
		<validator class="validation2">
			<form novalidate>
				<select v-validate:lang="{required:{rule:ture}}">
					<option value="">----please select your favorite programming language---</option>
					<option value="java">java</option>
					<option value="javascript">javascript</option>
					<option value="c++">c++</option>
				</select>
				<div class="errors">
					<p v-for="msg in $validation2.lang.required">{{msg}}</p>
				</div>
			</form>
		</validator>
	</div>


<!-- Vue 表单校验插件使用demo (vue-validator)-->
<template>
	<validator name ='validation'>
		<form novalidate>
			<!-- username  -->
			<div class="username-feild">
				<label for="username">username:</label>
				<input type="text" id="username" v-validate:username="{required:ture,minlength:3,maxlength:12}">
				<div>
					<span v-if= "$validation.username.required">username is required</span>
					<span v-if="$validation.username.minlength">your name is too short</span>
					<span v-if="$validation.username.maxlength">you name is too long</span>
				</div>
			</div>
			<!-- password -->
			<div class="password">
				<label for="">password:</label>
				<input type="password" id="password" v-model="pwd" v-validate:password="{required:ture,pattern:'/^\w{6,13}$/'}">
				<div>
					<span v-if="$validation.password.required">password is required </span>
					<span v-if="$validation.password.pattern">****</span>
				</div>
			</div>
			<!-- password check again -->
			<div class="passwordAgain">
				<label for="passwordAgain">passwordAgain:</label>
				<input type="password" id="passwordAgain" v-model="pwds">
				<div>
					<span v-if="{{pwd}}!={{pwds}}">error</span>
				</div>
			</div>
		</form>
	</validator>


</template>

[ronghaoZHI]

.