vue2.0基礎學習（2）
（三）Vue2.0-選項
選項就是在Vue構造器裏的配置功能的前綴
propsData
只用於 new 創建的實例中。
var Comp = Vue.extend({ props: [‘msg‘], template: ‘<div>{{ msg }}</div>‘ }) var vm = new Comp({ propsData: { msg: ‘hello‘ } })
propsData在實際開發中我們使用的並不多，我們在後邊會學到Vuex的應用，他的作用就是在單頁應用中保持狀態和數據的。
computed
computed 的作用主要是對原數據進行改造輸出。改造輸出：包括格式的編輯，大小寫轉換，順序重排，添加符號等。
註意：不應該使用箭頭函數來定義計算屬性函數 。
var vm = new Vue({ data: { a: 1 }, computed: { // 僅讀取 aDouble: function () { return this.a * 2 }, // 讀取和設置 aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } } }) vm.aPlus// => 2 vm.aPlus = 3 vm.a // => 2 vm.aDouble // => 4
methods
methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定為 Vue 實例。
var vm = new Vue({ data: { a: 1 }, methods: { plus: function () { this.a++ } } }) vm.plus() vm.a // 2
methods中的$event參數：
有時也需要在內聯語句處理器中訪問原生 DOM 事件。可以用特殊變量 $event
<button @click=”add(2,$event)”>add</button>
native 給組件綁定構造器裏的原生事件
在實際開發中經常需要把某個按鈕封裝成組件，然後反復使用，如何讓組件調用構造器裏的方法，而不是組件裏的方法。就需要用到我們的.native修飾器了。
<p><btn @click.native="add(3)"></btn></p>
watch
數據變化監控。是一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。
var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4 }, watch: { a: function (val, oldVal) { console.log(‘new: %s, old: %s‘, val, oldVal) }, // 方法名 b: ‘someMethod‘, // 深度 watcher c: { handler: function (val, oldVal) { /* ... */ }, deep: true }, // 該回調將會在偵聽開始之後被立即調用 d: { handler: function (val, oldVal) { /* ... */ }, immediate: true } } }) vm.a = 2 // => new: 2, old: 1
有些時候我們會用實例屬性的形式來寫watch監控。也就是把我們watch卸載構造器的外部，這樣的好處就是降低我們程序的耦合度，使程序變的靈活。
app.$watch(‘temperature‘,function(newVal,oldVal){ if(newVal>=26){ this.suggestion=suggestion[0]; }else if(newVal<26 && newVal >=0) { this.suggestion=suggestion[1]; }else{ this.suggestion=suggestion[2]; } })
mixins
mixins選項接受一個混合對象的數組。這些混合實例對象可以像正常的實例對象一樣包含選項，他們將在 Vue.extend() 裏最終選擇使用相同的選項合並邏輯合並。
mixins一般有兩種用途：
1、在你已經寫好了構造器後，需要增加方法或者臨時的活動時使用的方法，這時用混入會減少源代碼的汙染。
2、很多地方都會用到的公用方法，用混入的方法可以減少代碼量，實現代碼重用。
<script type="text/javascript">
//全局混入
Vue.mixin({
created:function(){
console.log(‘我是全局被混入的‘);
}
})
var aaa={
created:function(){
console.log(‘我是外部被混入的‘);
}
}
var app=new Vue({
el:‘#app‘,
data:{
message:‘hello Vue!‘
},
created:function(){
console.log(‘我是原生的‘);
},
mixins:[aaa]
})
// 我是全局被混入的
// 我是被外部引入的
// 我是原生的
</script>
mixins的調用順序：
Mixin 鉤子按照傳入順序依次調用，並在調用組件自身的鉤子之前被調用
從執行的先後順序來說，都是混入的先執行，然後構造器裏的再執行，需要註意的是，這並不是方法的覆蓋，而是被執行了兩邊。
PS：當混入方法和構造器的方法重名時，混入的方法無法展現，也就是不起作用
extend 擴展選項
通過外部增加對象的形式，對構造器進行擴展 。
與mixins 類似，區別在於，組件自身的選項會比要擴展的源組件具有更高的優先級。
delimiters
改變純文本插入分隔符。
new Vue({ delimiters: [‘${‘, ‘}‘] }) // 分隔符變成了 ES6 模板字符串的風格
現在我們的插值形式就變成了${}
（四 ）實例和內置組件
第一節：實例屬性
一、vue和jQuery一起使用
在DOM被掛載後修改裏邊的內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script>
<title>Early Examples Demo</title>
</head>
<body>
<h1>Early Examples Demo</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app=new Vue({
el:‘#app‘,
data:{
message:‘hello Vue!‘
},
//在Vue中使用jQuery
mounted:function(){
$(‘#app‘).html(‘我是jQuery!‘);
}
})
</script>
</body>
</html>
二、實例調用自定義方法
methods:{ add:function(){ console.log("調用了Add方法"); } }
調用：
app.add();
第二節：實例方法
一、vm.$mount()
創建並掛載到 #app (會替換 #app)
new MyComponent().$mount(‘#app‘) 二、vm.$forceUpdate() 迫使 Vue 實例重新渲染 三、vm.$nextTick() 數據修改方法 當Vue構造器裏的data值被修改完成後會調用這個方法，也相當於一個鉤子函數吧，和構造器裏的updated生命周期很像。 四、$destroy() 完全銷毀一個實例。清理它與其它實例的連接，解綁它的全部指令及事件監聽器。第三節：實例事件
一、vm.$on( event, callback )
監聽當前實例上的自定義事件。事件可以由vm.$emit觸發。回調函數會接收所有傳入事件觸發函數的額外參數。
二、vm.$once( event, callback )
聽一個自定義事件，但是只觸發一次，在第一次觸發之後移除監聽器。
三、vm.$off( [event, callback] )
移除自定義事件監聽器。
-
-
如果沒有提供參數，則移除所有的事件監聽器；
-
如果只提供了事件，則移除該事件所有的監聽器；
-
如果同時提供了事件與回調，則只移除這個回調的監聽器。
-
四、vm.$emit( event, […args] )
觸發當前實例上的事件。附加參數都會傳給監聽器回調
第四節：內置組件slot
slot是標簽的內容擴展，也就是說你用slot就可以在自定義組件時傳遞給組件內容，組件接收內容並輸出。
slot的使用需要兩步：
1、在HTML的組件中用slot屬性傳遞值
<comp> <span slot="bolgUrl">{{jspangData.bolgUrl}}</span> <span slot="netName">{{jspangData.netName}}</span> <span slot="skill">{{jspangData.skill}}</span> </comp>
2、在組件模板中用<slot></slot>標簽接收值
<template id="tmp"> <div> <p>博客地址：<slot name="bolgUrl"></slot></p> <p>網名：<slot name="netName"></slot></p> <p>技術類型：<slot name="skill"></slot></p> </div> </template>
vue2.0基礎學習（2）