vue.js 精學記錄
v-bind:class使用的方式：
1.對象與法：:class="{‘active‘:isActive}"
此時當isActive為true時，會擁有active
2.數組語法：需要應用多個class時，可以使用數組語法。
:class = " [activeCls,errorCls ] ",
var app = new Vue({ el:"#app", data:{ activeCls:‘active‘, errorCls:‘error‘ } })
內置指令
v-cloak:
當網速較慢，vue.js還沒加載完時，在頁面上會顯示{{message}}這樣的字樣，直到vue
創建實例，編譯模板dom才會被替換，所以可能會閃動，只要加一句css就可以解決
[v-cloak] {
display:none;
}
這個對於簡單的項目很實用，在具有工程化的項目裏，比如webpack和vue-router，項目html裏只有一個空的div元素，其余全部由路由去掛載不同組件完成的，
所以不需要v-cloak.
v-once
定義它的元素之渲染一次，包括元素或組件的所有子節點，渲染後，不在隨數據變化重新渲染。
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.min.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<template v-if
vue 在渲染元素時，出於效率考慮，會盡可能的復用已有的元素而非重新渲染，比如上面的實例，如果不在input上面加上唯一的key,切換時input的內容時相同的，加上key之後為此切換都會重新渲染了。
v-for
v-for除了常用的功能外，還可以叠代整數。
<span v-for="n in 10">{{n}} </span>
輸出 1 2 3 4 5 6 7 8 9 10
數組更新
當修改數組時，vue會檢測到數據變化，所以用v-for渲染的視圖也會立即更新。vue包含了一組觀察數組變異的方法，使它們改變數組也會出發視圖更新：
-
push()
-
pop()
-
shift()
-
unshift
-
splice()
? sort
? reverse()
需要註意的是，有些變動的數組中，vue是不能檢測到的，也不會出發視圖更新：
1.通過索引直接設置項，比如 app.books[3]={.....}
2.修改數組長度，比如 app.books.length=1
解決第一個問題有兩種方法：
第一種是vue 內置的set方法:
Vue.set(app.books,3,{ name:"揭秘", author:"zx" })
如果是在webpack中使用組件化的方式，默認是沒有導入Vue的，這時可以使用$set，如：
this.$set(app.books,3,{ name:"揭秘", author:"zx" })
另一種方法：
app.books.splice(3,1,{ name:"揭秘", author:"zx" })
解決第二個問題也可以用這樣的方法：
app.books.splice(1);
修飾符
在@綁定的事件後面加小圓點"."，再跟一個後綴來使用修飾符。Vue支持以下修飾符：
.stop
.prevent
.capture
.self
.once
具體用法有：
//阻止單擊事件冒泡 <a @click.stop="handle"></a> //提交事件不再重載頁面 <form @submit.prevent="handle”></form> //修飾符可以串聯 <a @click.stop.prevent=”handle”></a> //只有修飾符 <form @submit . prevent></form> //添加事件偵聽器時使用事件捕獲模式 <div @click.capture=”handle”>...</div> //只當事件在鈣元素本身觸發時書法回調 <div @click.self=”handle”>...</div> //只觸發一次，組件同樣適用 <div @click.once=”handle”>...</div>
在表單元素上監聽事件時，還可以使用按鍵修飾符，比如按下具體某個鍵時才調用方法：
//只有在keyCode是13時調用vm.submit()
<input @keyup.13="submit" >
也可自己配置具體按鍵：
Vue.config.keyCode.f1=112;
//全局定義後就可以使用@keyuo.f1
除了具體的某個keyCode外，vue還提供了一些快捷名稱，一下是別名：
-
.enter
-
.tab
-
.delete
-
.esc
-
.space
-
.up
-
.down
-
.left
-
.right
這些按鍵修飾符可以組合使用，或者和鼠標一起配合使用：
-
.ctrl
-
.alt
-
.shift
-
.meta （Command,windows的窗口鍵）
使用在input textarea等表單綁定時，改變表單的數值，會觸發數據更新。
單選按鈕：
在單獨使用時，不需要v-model，只要v-bind綁定一個布爾類型的值就可以
<div id=”app”>
<input type=”radio”:checked=”picked”>
<label>單選按鈕</label>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
picked:true
}
})
</script>
如果是組合使用來實現互斥選擇的效果，需要v-model和value來配合。
<input type="radio" v-model="picked" value="html" id="html"><br/> <input type="radio" v-model="picked" value="css" id="css"><br/> <input type="radio" v-model="picked" value="js" id="js"><br/>
<p>選擇的項目是：{{picked}}</p>
data:{ picked:‘js‘ }
這樣的話，選擇不同的radio，互斥並且會改變數據picked的值，從而引起視圖的變化。
同理使用checkbox和radio基本上是一致的,單獨使用用v-bind綁定一個boole類型的數值，
多個同時使用：
<input type="checkbox" v-model="picked" value="html" id="html"><br/>
<input type="checkbox" v-model="picked" value="css" id="css"><br/>
<input type="checkbox" v-model="picked" value="js" id="js"><br/>
<p>選擇的項目是：{{picked}}</p>
data:{ picked:[‘js‘,‘html‘] }
下拉框中使用：
<select v-model="selected">
<option>html</option>
<option>js</option>
<option>css</option>
</select>
data:{ selected:‘html‘ }
dangselect是多選的情況時，selected就是數組。
在實際適用業務中，有時需要綁定一個動態數據，這時可用v-bind實現：
<input type="radio" v-model="picked" :value="value">
<p>picked:{{picked}}</p>
<p>value:{{value}}</p>
data:{ picked:false, value:"123" },
當選中的時候,picked的是會變成value的值‘123‘。
復選框：
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2"> <p>{{toggle}}</p> <p>{{value1}}</p> <p>{{value2}}</p>
data:{ toggle:false, value1:‘a‘, value2:‘b‘ },
勾選時，toggle的值時true-value即為a,不勾選時toggle的值為false-value，即為b。
下拉框：
<select v-model="selected">
<option :value="{number: 123}">123</option>
</select>
<p>{{selected.number}}</p>
選擇之後，selected變成對象，此時selected.number=123
v-model的修飾符
.lazy v-model默認是在input事件同步輸入框的數據，使用修飾符.lazy會轉變為在change事件中同步，在失焦或者回車才觸發
.number 可以將輸入轉換為Number類型。
.trim 自動過濾首尾空格
vue.js 精學記錄