學習Vue基礎之模板語法、計算屬性和觀察者、class與style動態綁定

初識vue.js

    1.構建數據驅動的web應用開發框架。

    2. 聲明式渲染：應對先後端分離的大趨勢，通常後端只給數據，通常都是json，咱們只須要操做數據，就可讓頁面改變。

         漸進式框架：適應各類行業需求以及場景。

         快速交付：結合第三方UI框架。

         企業需求：必備技能。

     3.MVC,MVP,MVVM 架構模型對比

         "MVC":Contronller：薄,view：厚，業務邏輯大部分部署在View。

         "MVVM":雙向數據綁定，View的變更，映射在ViewModel上，反之同樣。

         "MVP":View薄，不綁定任何業務邏輯，稱爲「被動視圖」(Passive View),Presenter：厚，邏輯業務都部署在這。

     4.對比其餘框架(angular，react)

開發環境搭建(vue.js 2.*)

    聲明式渲染=》組件系統=》路由機制=》狀態管理=》。。

　　引入vue.js框架  <script src="../js/vue.min.js"></script> 

模板語法

     1.插值

         1.文本：   <div id="box" > {{name}} </div> 

　　　　var vm = new Vue({//在瀏覽器的控制檯能夠訪問vm，而且改變vm.name的值，這就是vue的響應式訪問。
        　　el:"#box",
　　　　data:{
            　　name:"xiaoming",}
　　　　})

 

         2.純HTML： v-html 防止XSS，若是要實現內容裏面的html標籤，則要在html相應的元素上加上v-html="vhtmltest"指令，v-html=""指令的值則對應相應的數據屬性。可是若是要使用這種動態的渲染html元素，會很是容易受到XSS的攻擊。請只對可信的內容進行差值，而不要對用戶提供的內容進行差值。

　　　　  <span v-html="vhtmltest"></span> 

　　　　  data:{ 　　vhtmltest:'<b>v-html</b>', 　　　　} 

         3.表達式：

　　　　<span>{{10 + 20}}</span>，<span>{{10 > 20 ? 20 : 10}}</span>

     2.指令：是帶有 v-前綴的特殊屬性

         v-for:遍歷數組中的元素。

         v-show：動態隱藏和顯示 

　　　　  <p v-show="isShow">v-show動態隱藏和顯示</p> 

　　　　  data:{ 　　isShow:true,　　　　} 

         v-html：實現內容裏面的html標籤

         v-bind：指令被用來響應地更新 HTML 元素的屬性

        <p v-bind:class="isShow?'box':'box2'">普通class屬性vue指令綁定進行三目運算</p><!-- 若是是普通的屬性要使用三目表達式或者其餘運算表達式的時候，也須要用到指令綁定才行 -->

　　　　  data:{ 　　isShow:true,　　　　} 

         v-if：根據值的true或者false來動態建立和刪除，v-if是真正的條件渲染，也是惰性的，若是條件渲染一開始就是假，則什麼也不作，直到條件變成真爲止。而v-show則是必然會渲染dom節點，只是顯示或者隱藏效果,

　　　　  <p v-if="isShow">v-if動態建立和刪除</p> 

　　　　  data:{ 　　isShow:true,　　　　} 

         v-else：若是if不成立，則走else塊

       <p v-if="isShow">ok</p>
　　　　<p v-else>else ok</p>

　　　　 data:{ 　　isShow:true,　　　　} 

            用template結合v-if條件渲染一整組,咱們能夠把template包裝一整組，最終的渲染並不會包含template元素。

                <template v-if="isShow">
                    <p>111</p>
                    <p>111</p>
                    <p>111</p>
                </template>

         v-on:click ：點擊實現Vue methods方法

　　　　  <button @click="handleClick">點擊實現vue methods方法</button> 

        methods:{
            handleClick:function(){
                this.name = 'aaa';
                this.isShow = false;
            },

         v-model:雙向數據綁定指令，它是MVVM架構的最明顯的特徵，能夠設定元素的值，元素的值反過來還能夠影響設定的值，例子

              <p>單價：<input type="text" v-model="price"></p>{{price}} ，還能夠在data裏設置price的值

     3.縮寫

        v-bind:src => :src

        v-on:click => @click 

計算屬性和觀察者

     1.計算屬性

        模板內的表達式是很是便利的，可是他們實際上只用來簡單的計算。在模板內加入過多的邏輯，不利於維護，不推薦。例如

            <div id="example">
                {{message.split('').reverse().join('')}}
            </div>

        在這個地方，模板再也不簡單和清晰，你須要看一段時間才能意識到，這裏是想要顯示變量message的翻轉字符串，當你想要在模板中屢次引用這個翻轉字符串的時候，就會更加難以處理。

        這就是對於任何複雜邏輯，你都要使用計算屬性的緣由。

        就算依賴的值改變了，計算屬性也會自動改變，從新計算一遍，

　　　　<p>{{upperWord}}--計算屬性</p>

        computed:{//計算屬性
            upperWord:function(){
                return this.name.substring(0,1).toUpperCase() + this.name.substring(1);
            }
        }

     2.計算緩存和methods

        計算屬性是根據他們的依賴進行緩存的，計算屬性根據依賴的屬性改變而改變。方法也可以實現計算屬性，可是若是屢次調用方法，方法將會屢次調用，而計算屬性能夠只運行一次，由於計算能夠被緩存。

　　　　  <p>{{upperWordMe()}}--vue方法</p> 

　　　　　　data:{
　　　　　　　　name:'sarah',
　　　　　　}
            upperWordMe:function(){
                return this.name.substring(0,1).toUpperCase() + this.name.substring(1);
            },

     3.計算屬性和watch

        vue提供了一個更通用的方式來觀察和響應VUE實例上的數據變更，watch屬性。當你有些數據須要隨着其餘數據變更而變更時，你很容易濫用watch--特別是特別是你以前使用過angularJS。然而，一般更好的想法是使用計算屬性而不是命令式的watch回調，例如

        <p>單價：<input type="text" v-model="price"></p>{{price}}
        <p>數量：<input type="text" v-model="number"></p>{{number}}

　　　　　　　data:{

            　　　　price:0,

           　　　　 number:0,

　　　　　　　　}
            watch: {
                price:function(val){//名字要對應data中的price，來實現監聽
                    this.sum = val * this.number;
                },
                number:function(val){//名字要對應data中的number，來實現監聽
                    this.sum = val * this.price;
                }
            },

            計算屬性來實現，由於計算屬性是依賴值的改變而改變，不然就緩存，因此效率更好，資源利用率更高。

　　　　computed:{
            　　getsum:function(){
                　　return this.price * this.number;
            　　}
　　　　}

     4.計算setter.

        計算屬性默認只有getter，vue的methods方法能夠進行傳入參數操做，因此計算屬性也提供了一種setter用法，不過通常計算方法只須要get值就好了，通常不用setter方法。

        <p>計算屬性setter用法實現{{getData}}</p>

        computed:{
            getData:{
                get:function(){
                    return 'hello world'//get值是固定的。
                },
                set:function(val){
                    console.log(val);//在瀏覽器控制檯輸入vm.getData='222'就能夠實現setter方法。
                }
            }
        }    

class與style動態綁定

    能夠用v-bind進行處理，只須要計算出表達式的最終字符串。不過字符串的拼接麻煩又容易出錯，vue.js增強了這方面，表達式的結果類型除了字符串，還能夠是數組和對象，

        <p class="default" v-bind:class="isShow?'aaa':'bbb'">第一種:三目運算寫法，v-bind動態改變class的方法</p>
        <p class="default" :class="{box1:isShow,box2:isShow2}">第二種：對象寫法，v-bind動態改變class的方法,isShow若是是true則添加class</p>
        <p class="default" :class="[className,'box2']">第二種：數組寫法，v-bind動態改變class的方法</p>
        <p class="default" :style="style1">第一種：style的差值寫法，v-bind動態改變style的方法</p>
        <p class="default" :style="[style1,style2]">第二種：style的數組寫法，v-bind動態改變style的方法</p>

        data:{
                isShow:true,
                isShow2:false,
                className:'bbb',
                style1:{background:'red'},//注意fontSize寫法,在瀏覽器的控制檯輸入vm.style1.background = 'blue'能夠改變相應的樣式。
                style2:{fontSize:'14px'},
        }                    

 

列表渲染

     1.v-for

        用v-for把一個數組對應成一組元素，須要用 item in items形式的特殊語法，items表明源數據數組而且item是數組元素迭代的別名。

        of和in原理上沒有多大的差異

        a:in      <li v-for="data in dataList">用v-for來實現數組轉化成元素{{data}}</li> 

        b:of      <li v-for="(data,index) of dataList">用v-for來實現數組轉化成元素{{data}},index表示下標{{index}},</li> 

     2.key

        跟蹤每一個節點的身份，從而重用和從新排序現有的元素

            這裏做爲例子用index下標作了key值，實際應用中最好不要用，最好在對象中有一個專門的id值做爲key，來讓咱們認識和複用元素。

              <li v-for="(data,index) of dataList" :key="index">{{index}}用v-for來實現數組轉化成元素,index表示下標{{data}}</li> 

        理想的key值是每一項都有的且惟一的id。

     3.數組更新檢測

        1.使用如下方法操做數組，能夠檢測變更，會熱更新DOM節點元素，在控制檯中輸入  vm.dataList.push("eee"); 

             push(),pop(),shift(),unshift(),splice(),sort(),reverse(),

        2. filter(),concat(),slice(),map(),新數組代替舊數組,這些方法Vue檢測不到數組的變更，因此不會對元素DOM節點有所改變,但若是從新賦值，則能夠。

            控制檯輸入  vm.dataList = vm.dataList.map((item)=>"xiaoming" + item) ，item表明遍歷數組裏面的每個元素。

        3.這裏須要特別注意，不能檢測如下變更的數組，

             vm.items[indexOfItem] = newValue //用下標去更新數組內容，雖然數組內容發生了改變，可是DOM節點元素並不會更新。

            解決辦法：  Vue.set(vm.dataList,0,'newValue') 

               或者用splice增刪改的方法。   vm.dataList.splice(0,1,'newItem') 

        4. 應用：顯示過濾結果

            使用計算屬性。

            能夠直接到data裏面取值   <ul><li v-for="data in dataList">{{data}}</li></ul> 

            也可用計算屬性的方法來實現，效果是同樣的

　　　　   <input type="text" v-model="needText"> 　　

　　　　   <ul><li v-for="data in computedDataList">{{data}}</li></ul> 

            data:{
　　　　　　　　　　needText:'',
　　　　　　　　}
　　　　　　　　computedDataList:function(){
                return this.dataList.filter((item)=>item.indexOf(this.needText) > -1);//item表明遍歷數組裏面的每個元素
            },