1、什麼是計算屬性
　　在Vue.js建構函式中定義資料使用data,該物件是對資料的代理，是一個鍵值對，並且實時與頁面的表現是一致的，但在這個物件中只能是簡單的鍵值對，不能擁有業務邏輯。由於“data”中的屬性屬於同-一個生命週期，所以如果需要某一個屬性是依賴於另外一個屬性時，在‘data”屬性中是做不到的。為了解決這個問題，Vue提供計算屬性來實現。

　　在Vue.js建構函式的引數物件中有一個“computed"，該物件就是用於定義計算屬性的，該物件中的“鍵”也就是計算屬性。與“data”不同的是，計算屬性的鍵值是一個擁有返回值的函式，該函式中可以訪問dat中的所有屬性。

　　在一個計算屬性中可以完成各種複雜的邏輯，包括邏輯運算、函式呼叫等，只要最終返回一個結果即可。計算屬性可以依賴多個Vue例項的資料，只要其中有一個數據變化，計算

　　computed:{

　　　　　prices:function(){

　　　　　　var prices=0;

　　　　　　for(var i=0;i<this.package1.length;i++){

　　　　　　　　prices+=this.package1[i].price * this.package1[i].count;

　　　　　　　}

　　　　　　　return prices;

　　　　　　}
　　　　}

2、計算屬性與計算方法的區別

　　computed:{

　　　　areas:function(){

　　　　　　let areas=0

　　　　　　areas = this.length * this.width

　　　　　　return areas

　　　　　　}
　　　　},

　　　　methods:{

　　　　　　add:function(){

　　　　　　this.num=parseInt(this.length)+parseInt(this.width)

　　　　　　},

　　　　}

　　　　在computed的方法中編寫的邏輯運算，在呼叫時直接將areas視為一個變數值使用，無須進行函式呼叫。computed具有級存功能，在系統初始執行的時候呼叫一次，當計算結果發

　　　　在methods的方法中編寫的邏輯運算，在呼叫時一-定要加括號，例如add()。methods中可以寫多個方法，並且這些方法在頁面初始載入時呼叫一次，以後只有使用程式程式碼呼叫時才會被執行。例在上面程式碼中單擊按鈕後，methods中的單擊事件方法才被呼叫一次。

　　　　其實呼叫methods中的方法也能實現和計算屬性一樣的效果，甚至有的方法還能接收引數，使用起來更加靈活。既然使用計算方法就可以實現。

　　　　那為什麼還需要計算屬性呢?這是因為計算屬性是基於依賴快取的，計算屬性依賴的資料發生變化時，才會重新取值，所以依賴的text只要不改變，計算屬性就不更新。計算方法則不同，只要重新渲染就會被呼叫，因此函式也會被執行。

　　　　使用計算屬性還是計算方法取決於是否需要快取，如果做遍歷大陣列和做大量計算時，應當使用計算屬性。

3、計算屬性的setter

　　每一個計算屬性都包含一個getter和setter。

　　　　computed:{

　　　　　　fullName:{
　　　　　　　　get:function(){
　　　　　　　　　　return this.firstName+ ' ' +this.lastName
　　　　　　　　　　},
　　　　　　　　set:function(){
　　　　　　　　　　var name = newValue.split(' ');
　　　　　　　　　　this.firstName=names[0];
　　　　　　　　　　this.lastName=names[1];
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}

4、過濾器的定義

　　過濾器(Filters)提供了--種執行文字轉換的方法，例如所有字母都轉換成大寫字母或者做任何想做的事情。過濾器與計算屬性(computed)、方法(methods)不同的是，過濾器不會修改資料，只是改變在網頁上的顯示形式。

過濾器可以用在兩個地方:插值表示式{}}和v-bind表示式，然後由管道操作符“|”進行指示，其語法格式如下:

{{message|過濾器名}}

<!--在v-bind中呼叫過濾器-->

<divv-bind:id="rawIdI過濾器名"></div>

　　　（1）、本地過濾器　　　　　

　　　　　　filters:{
　　　　　　　　changeCapitalLetter(value){
　　　　　　　　　　if(value){
　　　　　　　　　　　　let str=value.toString();
　　　　　　　　　　　　let newArr=str.split(" ").map(ele=>{
　　　　　　　　　　　　　　return ele.charAt(0).toUpperCase()+ele.slice(1)
　　　　　　　　　　　　});
　　　　　　　　　　　　return newArr.join(" ")
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}

　　　　（2）、全域性過濾器　　　　　

　　　　　　Vue.filter('number',function(value){
　　　　　　　　return value <10?'0'+value:value
　　　　　　　　})
　　　　　　　　Vue.filter('numberFormat',function(value,n){
　　　　　　　　return value.toFixed(n)
　　　　　　　　})
　　　　　　　　　　var app=new Vue({
　　　　　　　　　　　　　　　　el:"#app",
　　　　　　　　　　　　　　　　data:{
　　　　　　　　　　　　　　　　　　message:'Hello Vue!'
　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　})

5、監聽屬性

　　監聽屬性watch用來監聽指定屬性的變化，watch這個物件中都是函式，函式的名稱是data中的屬性名稱，watch中的函式不需要呼叫。屬性發生改變時就會觸發watch函式，每個函式都會接收兩個值，分別是新值和舊日值，可以在watch中根據新舊值的判斷來減少虛擬DOM的渲染。

　　　　watch:{

　　　　　　監聽的屬性名（新值，舊值）{

　　　　　　}

　　　　}

Vue.js元件的建立

　　使用Vue.extend配合Vue.component方法

　　　　var com1 = Vue.extend{

　　　　　　　　template:"<h3>使用Vue.extend建立元件</h3>"

　　　　　　})

例如：

　　　　var com1=Vue.extend({

　　　　　　　　template:"<h3>使用vue.extend建立元件</h3>"

　　　　})

　　　　Vue.component('mycom',com1)

　　　　var vm = new Vue({

　　　　　　　　　　el:"#app",

　　　　　　　　　　data:{

　　　　　　　　　　},
　　　　　　　　});