vue2.0 入門總結
1.生成vue的例項
var vm=new vue({
//這裡是選項 他可以包含資料、模板、掛載元素、方法、生命週期鉤子等函式
})
2.例項生命週期(在生命週期裡this指向呼叫它的vue例項)
created在例項被建立後呼叫
created(){
this.hello();
}
vue2.0生命週期:
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
3.模板語法（不使用模板可以使用render函式使用JSX語法）
底層實現上Vue將模板編譯成虛擬DOM渲染函式，在應用狀態改變時，vue計算出重新渲染元件的最小代價並應用到DOM上。
先看怎麼用
插值:雙大括號!!!!!!必須的 資料改變 大括號內的值也跟著改變
<span>{{msg}}</span>
v-once
如果你想插入一次接下來大括號內的資料不改變 則新增v-once屬性:
<span v-once>不改變{{msg}}</span>
v-html
<span>{{msg}}</span>效果和<span v-html="msg"></span>相同 ,但是後者是將資料轉變為純文字 不是HTML 為了輸出HTML 所以使用v-html
v-bind
大括號不能在HTML屬性中使用 要使用v-bind
<span v-bind:id="msg"></span>
如果msg為false 移除屬性
<span></span>
使用JS表示式
{{msg+1}}
{{msg==true?0:1}}
4.指令
帶有v-字首
<div v-if="msg">如果msg為true則插入div標籤</div>
<div v-bind:id="msg">如果msg為false則移除屬性，否則顯示</div>
<div v-on:click="toDo">點選觸發函式</div>
<input v-model="msg"/>//雙向資料繫結
.....等等 vue還支援自定義指令。後面說。
指令縮寫
v-bind:href 或者 v-bind:id 可以縮寫為 :href 和:id 就是省略前面的 v-bind
v-on:click 縮寫為@click=""
5.計算屬性
computed 計算屬性會根據data 的值改變
<div>{{getNewMsg}}</div>
new Vue({
el:'#App',
data:{
msg:'hello'
},
computed:{
getNewMsg:function(){
return this.msg.split('').reverse().join('');
}
}
})
上邊程式碼計算屬性只用到了get，沒有set。所以我們可以給自己一個set
new Vue({
el:'#App',
data:{
msg:'hello',
text:'word'
},
computed:{
all:{
get:function(){
return this.msg+this.text;
},
set:function(val){
return val+this.msg+this.text
}
}
}
})
然後vm.all="你好" 會返回 你好 hello word
6.函式(methods)
methods也可以實現剛才computed的效果。
<div>{{getNewMsg}}</div>
new Vue({
el:'#App',
data:{
msg:'hello'
},
methods:{
getNewMsg:function(){
return this.msg.split('').reverse().join('');
}
}
})
computed和methods比較
雖然最終的結果相同，但是計算屬性基於快取依賴，只有在他依賴的資料發生改變才會重新計算取值，而methods 每次都會重新計算取值。
7.wach方法
用於觀察VUE例項上的資料變動
<div>{{msg}}</div>
new Vue({
el:'#App',
data:{
msg:'hello',
text:'word',
all:''
},
watch:{
msg:function(){
this.all=this.msg+this.text;
}
}
})
8.class與style繫結
<div class="boxStyle" v-bind:class="{active:isActive}"></div>
如果isActive為false 則不顯示 active 這個class，否則相反。
class和v-bind:class可以共同使用。
class支援三目運算子 <div v-bind:class="active?style01:style02"></div>
內聯樣式 <div v-bind:style="{color:red,fontSize:fontSize+'px'}"></div>
還可以繫結到一個物件上
<div v-bind:style="obj"></div>
data(){
return{
obj:{
color:'red',
fontSize:'12px'
}
}
}
9.條件渲染
v-if 、 v-else、v-else-if
<div v-if="msg>0">大於0</div>
<div v-else-if="msg==0">等於0</div>
<div v-else>小於0</div>
還可以使用template
<template v-if="msg>0">
<div>1111</div>
</template>
<template v-else>
<div>2222</div>
</template>
上邊的程式碼修改msg切換不同的div內容，但是vue是不會重新渲染div標籤的。根據就地複用策略，只是替換div裡面的內容。如果想每次都重新渲染div標籤。需要使用key，key不同則每次重新渲染。
v-if 和 v-show
v-show只是控制display。
v-if有更高的切換消耗，v-show有更高的初始化消耗。
10.列表渲染
v-for
data(){
return{
parents:"我是",
msg:[
{name:'foo'},
{name:'bar'},
]
}
}
<div>
<div v-for="{data,index} in msg">
{{parents}}-{{index}}-{{data.name}}
</div>
</div>
渲染結果: 我是-0-foo 我是-1-bar
11.事件處理器
使用template的好處
1。通過HTML模板就可以輕鬆定位JS對應方法
2。不需要JS手動繫結事件，易於測試
3。當viewmodel銷燬 所有的事件處理器自動刪除，無需手動刪除
<div v-on:click="msg">點選</div>
new Vue({
el:'app',
methods:{
say:function(name,event){
alert(name+'我是vue')
if(event){event.preventDefault}
}
}
})
如果要獲取原生DOM事件，需要傳入event
12.事件修飾符
.stop 元件單擊事件冒泡
.prevent 提交事件不在過載頁面
.capture 使用事件捕獲模式
.self 只當在本元素才發生
.once 新增
使用方式:
<div v-on:click.stop></div>
修飾符可以串聯
<div v-on:click.stop.prevent="todo"></div>
13.表單控制元件
v-model 實現雙向資料繫結
<span>{{msg}}</span>
<input v-model="msg"/>
new Vue({
el:'#app',
data:{
msg:'我是預設'
}
})
無論是複選框 單選框 下拉列表 基本上獲取到使用者選中的值的方式，就是使用v-model到一個數組
<input type="checkbox" id="jack" value="jack" v-model="checkedName"/>
<label for="jack">jack</label>
<input type="checkbox" id="mini" value="mini" v-model="checkedName"/>
<label for="mini">mini</label>
如果使用者選中，則陣列會把選中物件的value值存入陣列中。
14.修飾符
.lazy 取消input事件轉為change事件同步
.number 將使用者輸入的值轉為number型別，如果返回NAN，則返回原值
.trim 取消前後空格
使用方式:
<input v-model.lazy="msg"/>
15.元件
註冊全域性元件
Vue.component('my-component',{
//選項
data:function(){
//在元件裡 data 必須是函式，並且不能使用箭頭函式
}
})
註冊區域性元件
通過使用元件例項選項註冊，可以使元件在另一個元件中使用
var child={
template:'<div>我是元件</div>'
}
new Vue({
components:{
'my-components ':child
}
})
16.元件通訊
思想：父元件通訊子元件，使用props。子元件通訊父元件使用自定義事件，通過$on（'事件名稱'）監聽事件 和 $emit('事件名稱') 觸發事件。
如果使用vuex，在根元件註冊，我們在任意元件中都可以通過$store拿到store物件。如果子元件想要獲取到父元件的資料，或者說非父子元件想要拿到彼此的資料，最高效的方式是使用vuex。
但是，還是要說下基本的props用法。
props
Vue.components('child',{
props :['msg'],
template:'<div>{{msg}}</div>'
})
<child msg="hello"></child>
注意：因為HTML不區分大小寫，所以在傳遞props時，駝峰寫法要通過短橫線隔開
<div my-props="hello"></div>
Vue.components('child',{
props:['myProps'],
template:'<div>{{myProps}}</div>'
})
動態props
傳遞props使用 v-bind,這樣父元件修改子元件也得到修改
<div>
<input v-model="msg"/>
<child v-bind:msg="msg"></child>
</div>
Vue.components('child',{
props:['msg'],
template:'<div>{{msg}}</div>'
})
字面量語法和動態語法
字面量：<child msg="1"></child> props為 "1"
動態語法: <child v-bind:msg="1"></child> props為 1
單向資料流
props是單向繫結的，父元件修改影響子元件，但是不能反過來，這是為了防止子元件修改父元件的狀態，讓資料流難以理解。
可以通過Vuex管理state，這樣子就避免了繁瑣的props傳遞。後面會發布VUEX講解的文章，請關注~
props驗證
只用於new建立的例項中，建立例項時傳遞 props。主要作用是方便測試。
支援型別：string number boolean function object array
props:{
msg:Number，//只檢測型別
//檢測型別+其他驗證
call:{
type:Number,
default:0,
requiredLtrue,
validator:function(val){
return val>=0
}
}
}
自定義事件
使用 v-on 繫結事件
父元件在使用子元件的地方直接用v-on監聽子元件觸發的事件， 子元件觸發事件會觸發父元件事件
子元件中要使用this.$emit('事件',引數)
父元件就可以使用 $on去監聽
例如 在父元件中：
<child v-on:子元件$emit的事件名稱="父元件事件名稱"></child>
非父子元件通訊
使用一個空的vue例項作為中央事件總棧
var bus=new Vue()
在A元件中觸發事件
bus.$emit('a',1);
在B元件建立的鉤子中監聽事件
bus.$on('a',function(id){
})
17.slot
在子元件中
<div>
<h1>我是子元件標題</h1>
<slot>只有在沒分發的內容才顯示</slot>
</div>
在父元件中
<div>
<child>
<p>這裡的內容會替換掉子元件中的slot</p>
</child>
</div>
渲染結果為
<div>
<div>
<h1>我是子元件標題</h1>
<p>這裡的內容會替換掉子元件中的slot</p>
</div>
</div>
具名slot
給slot新增name屬性
在子元件中
<div>
<h1>我是子元件標題</h1>
<slot name="body">我是具名slot</slot>
</div>
在父元件中
<div>
<child>
<div slot="body">這裡替換掉 name為body的slot</div>
</child>
</div>
18.Render函式
不想使用template，也可以用render寫JSX。例如根據判斷自動生成DOM結構，如果大量的判斷用template會有大量的程式碼，這時候可以用render，使用createElement去建立標籤。
這裡只寫個小用法。
new Vue({
el:"#app",
render:h=>h(App)
})
如果不使用render我們可以這樣
new Vue({
el:'#app',
components:{App},
template:'<App/>'
})
19.自定義指令
有時候我們需要對DOM元素進行底層操作，所以需要自定義事件。
全域性註冊
例如我們建立v-focus
Vue.directive('focus',{
inserted:function(el){
el.focus();
}
})
區域性註冊
元件接收一個選項
directives:{
focus:{
//指定的定義
}
}
使用：<div v-focus></div>
20.自定義指令鉤子函式
剛才我們全域性定義 用到了 inserted函式，這就是鉤子函式。
bind:function(){} //只調用一次，指令第一次繫結到元素時呼叫。
inserted:function(){} //被繫結元素插入到父節點 呼叫
update:function(){} //更新時呼叫
componentUpdated:function(){} //被繫結元素所在模板完成一次更新週期時呼叫
unbind:function(){} //指令與元素解綁呼叫
20.自定義指令鉤子函式
剛才我們全域性定義 用到了 inserted函式，這就是鉤子函式。
bind:function(){} //只調用一次，指令第一次繫結到元素時呼叫。
inserted:function(){} //被繫結元素插入到父節點 呼叫
update:function(){} //更新時呼叫
componentUpdated:function(){} //被繫結元素所在模板完成一次更新週期時呼叫
unbind:function(){} //指令與元素解綁呼叫
鉤子函式引數
el：指令繫結的元素物件
binding:一個obj物件，他包括以下屬性：
name:指令名稱
value:繫結的值
oldValue:前一個值 只能在update函式和componentUpdate函式中使用
expression:繫結的值是字串形式 例如 v-demo="1" 為1
arg: 傳給指令的值 v-demo:foo arg值為foo
modifiers: 修飾符物件 只能在update函式和componentUpdate函式中使用
vnode:vue編譯生成的虛擬節點
oldVnode:上一個虛擬節點