摘要：基本語(yǔ)法和組件傳參基本語(yǔ)法是一個(gè)的框架數(shù)據(jù)驅(qū)動(dòng)和組件化是的核心思想。這種語(yǔ)法為請(qǐng)輸入代碼語(yǔ)法這里是的值網(wǎng)頁(yè)上就會(huì)顯示出來(lái)里面的值。七和語(yǔ)言中的一樣的語(yǔ)法效果。我花費(fèi)了元運(yùn)行結(jié)果如下圖至此，講完了的基本語(yǔ)法撒花

Vue是一個(gè) MVVM 的框架,數(shù)據(jù)驅(qū)動(dòng)和 組件化是Vue的核心思想。簡(jiǎn)單的講MVVM框架就是：我們只需要在數(shù)據(jù)層做數(shù)據(jù)操作，顯示層會(huì)檢測(cè)到我們每次的數(shù)據(jù)變化，然后做出相應(yīng)的改變，監(jiān)測(cè)數(shù)據(jù)這個(gè)工作就是中間的ViewModel。通過(guò)這種模式，我們就可以不用再直接操作DOM節(jié)點(diǎn)來(lái)進(jìn)行數(shù)據(jù)的改變。

{{data}} 在模板里可以實(shí)現(xiàn)data數(shù)據(jù)的展示，如果data數(shù)據(jù)改變，展示的數(shù)據(jù)也會(huì)響應(yīng)式的改變。響應(yīng)式的改變意味著我們不需要強(qiáng)制刷新頁(yè)面就可以實(shí)現(xiàn)數(shù)據(jù)的變化。這種語(yǔ)法為請(qǐng)輸入代碼Mustache語(yǔ)法

export default {
    name:"phonerisk",
    data(){
        return{
            title:"testTitle"
        }
    }
}

網(wǎng)頁(yè)上就會(huì)顯示出來(lái)data里面title的值。

v-html可以將一段HTML的代碼字符串輸出成HTML片段而不是普通的文本。

export default {
    name:"phonerisk",
    data(){
        return{
            html:"v-if"
        }
    }
}

網(wǎng)頁(yè)上將html字符串渲染成顏色為藍(lán)色的普通文本。

Mustache·語(yǔ)法不能用于HTML上，所以我們需要綁定一些屬之類的需要使用v-bind。v-bind就是將data里面的數(shù)據(jù)綁定到HTML上面，從而實(shí)現(xiàn)屬性的變化。

export default {
    name:"phonerisk",
    data(){
        return{
             imgUrl:"../../static/img/KFC.e66b2f8e.png"
        }
    }
}

v-bind 可以簡(jiǎn)寫成 :

v-model是用于表單輸入的數(shù)據(jù)雙向綁定。所謂雙向綁定就是視圖層的數(shù)據(jù)變化會(huì)引起數(shù)據(jù)層數(shù)據(jù)的改變，相反的，數(shù)據(jù)層的變化也會(huì)導(dǎo)致視圖層展示數(shù)據(jù)的變化。

export default {
    name:"phonerisk",
    data(){
        return{
            name:"小明"
        }
    },
    methods:{
        changeName(){
            this.name = "小花";
        }
    }
}

input輸入框綁定name,輸入框初始顯示‘小明’,在輸入框里更改信息的時(shí)候，name同時(shí)發(fā)生改變，點(diǎn)擊按鈕改變name數(shù)值的時(shí)候，輸入框里面的數(shù)據(jù)同時(shí)發(fā)生改變。

v-on 用于監(jiān)聽(tīng)DOM事件，如按鈕的點(diǎn)擊事件、雙擊事件等。v-on 的簡(jiǎn)寫為 @,如下面的 @click 就等價(jià)為 v-on:click。

template>
    

       
        你敢點(diǎn)我嗎？
    

  methods:{
        yes(){
            alert("我有啥不敢的?。。?);
        }
    }

這個(gè)案例是監(jiān)聽(tīng)按鈕的點(diǎn)擊事件，點(diǎn)擊之后調(diào)用 yes 函數(shù)，然后彈出警告框。

在平時(shí)的開(kāi)發(fā)過(guò)程中我們可能會(huì)使用到 event.preventDefault() 或者 event.stopPropagation() 來(lái)阻止事件的繼續(xù)傳播，但是這個(gè)是直接操作DOM節(jié)點(diǎn)，不符合Vue的思想。所以Vue采用修飾符來(lái)進(jìn)行相關(guān)的操作。下面我例舉幾個(gè)常用的，如了解更過(guò)，可以查看Vue的官網(wǎng)進(jìn)行更詳細(xì)的學(xué)習(xí)。

.stop

沒(méi)有加修飾符

        你敢點(diǎn)我嗎？
    

 methods:{
        yes(){
            alert("我有啥不敢的?。。?);
        },
        div(){
            alert("我會(huì)DIV");
        }
    }

效果如下圖：

加了 .stop 修飾符之后的效果

你敢點(diǎn)我嗎？

效果如下圖：

.stop 修飾符阻止了事件的繼續(xù)傳播，所以子節(jié)點(diǎn)的 click事件沒(méi)有冒泡到父節(jié)點(diǎn)，所以div的點(diǎn)擊監(jiān)聽(tīng)沒(méi)有監(jiān)聽(tīng)到內(nèi)容。

.prevent

沒(méi)有加修飾符

  

        提交
    

運(yùn)行結(jié)果如下圖：

加了 .prevent 修飾符之后的效果

    提交

.prevent 提交表單之后頁(yè)面不在重新渲染?？梢钥吹?jīng)]加修飾符的時(shí)候頁(yè)面重新加載，但是在加修飾符之后，頁(yè)面不在重新加載。

.keyup

綁定到輸入框里，可以直接按enter鍵就出發(fā)提交的方法，和點(diǎn)擊提交按鈕一樣的效果，官網(wǎng)還提供了其他按鍵的別名

v-if用于做條件化的渲染，當(dāng)組件的判斷條件發(fā)生改變，這個(gè)組件會(huì)被銷毀并重建。

```javascript
    data(){
        return{
            display:true
        }
    },
    methods:{
        changeShow(){
          this.display = !this.display;
        },
    }

```
運(yùn)行結(jié)果如下圖：

v-if綁定的變量為 true 的時(shí)候，其所在的元素會(huì)被渲染出來(lái)，反之亦然。

v-else 和C語(yǔ)言中的else一樣的語(yǔ)法效果。如果條件變量不滿足 v-if ,則執(zhí)行 的內(nèi)容

    

    我叫001
    我叫002
    切換
    

運(yùn)行效果和上圖一致。

v-else-if 是Vue2.1.0版本新增的一個(gè)屬性。v-else-if 必須用在 v-if 和 v-else 之間才有效果。

 data(){
        return{
            display:1
        }
    },
    methods:{
        changeShow(){
            this.display = (this.display + 1)%3;
        },
    }

運(yùn)行結(jié)果如下圖：

v-show 是切換元素的 display 屬性的。

 data(){
        return{
            display:true
        }
    },
    methods:{
        changeShow(){
            this.display = !this.display;
        },
    }

運(yùn)行效果如下圖：

v-for 用于多次渲染同一模板或者元素。

        

            
{{index}}、我的名字叫{{name}}
        
    

 data(){
        return{
           names:["jack","joe","Nancy", "lily"]
        }
    },

運(yùn)行結(jié)果如下圖：

v-for 多次渲染了li 里面的內(nèi)容，循環(huán)遍歷了names 數(shù)組，并將結(jié)放入 {{name}} 里面。

v-once 只渲染元素和組件一次，如果內(nèi)容改變，也會(huì)將元素、組件視為靜態(tài)元素跳過(guò)。

    
    This will never change:{{msg}}
    
    

      comment:::
      {{msg}}
    
    
    

      
{{i}}
    
    

    This will change:
     
    This will never change:{{msg}}
    
    

      comment:::
      {{msg}}
    
    
    

      
{{i}}
    
    testChange
  

data() {
    return {
      msg: 111,
      names: ["jack", "joe", "Nancy", "lily"]
    };
  },
  methods: {
    changValue() {
      this.msg += 111;
      this.names[2] = "web";
    }
  }

運(yùn)行效果如下圖：

在點(diǎn)擊按鈕后, msg 會(huì)增加，但是上面有v-once指令的元素等則不會(huì)重新渲染。

前面講了v-if 和 v-show,兩個(gè)指令都是用在元素之間的顯示和隱藏的切換，那么，這兩個(gè)指令究竟有什么不同呢？接下來(lái)我將用一個(gè)示例來(lái)講解他們之間的差異。

data() {
    return {
      display: true
    };
  },
  methods: {
    changeValue() {
      this.display = !this.display;
    }
  }

.content {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: solid 1px black;
  background-color: red;
}
.content + .content {
  margin-left: 20px;
}

運(yùn)行效果如下圖：

從上圖我們可以看出當(dāng)display 為 false 的時(shí)候，v-if 和v-show顯示位置不一樣。

首先我們解讀一下這個(gè)代碼的css:content類設(shè)置了div的長(zhǎng)寬和背景色，dispaly屬性為 inline-block,
.content + .content 設(shè)置了如果有兩個(gè)content 類在一起的時(shí)候，后面一個(gè)的左邊距為20個(gè)像素。

在dispaly 為 true 的時(shí)候，兩個(gè)div都靠左顯示。

在 display 為 false 的時(shí)候，上面的div在原來(lái)的位置重新渲染，但是下面的div卻有一個(gè)20像素的左邊距。

所以v-if渲染的時(shí)候，不會(huì)將不符合條件的元素加載到DOM樹(shù)里面，而v-show則會(huì)將所有的節(jié)點(diǎn)都加載到DOM樹(shù)，然后根據(jù)條件，更改節(jié)點(diǎn)的display 屬性，生成不同的渲染樹(shù)。

一般來(lái)說(shuō)， v-if需要更高的開(kāi)銷，每次都會(huì)改變DOM樹(shù)，但是v-show 只需要改變?cè)氐?b> display ，開(kāi)銷更低。

當(dāng)v-for 和v-if 在同一個(gè)蒜素里的時(shí)候，前者比后者有更高的優(yōu)先級(jí)，所以我們?cè)陂_(kāi)發(fā)中一定要注意優(yōu)先級(jí)的問(wèn)題。

如果我們是想有條件的跳過(guò)循環(huán)中的某些項(xiàng)的時(shí)候：

data() {
    return {
      counts:[11,22,33,44,55,66]
    };

運(yùn)行結(jié)果如下圖：

跳過(guò)了count 小于 30 的項(xiàng)

2.如果我們是打算有條件的跳過(guò)循環(huán)的話那么我們應(yīng)該將判斷寫在循環(huán)的外面，先判斷條件。

運(yùn)行結(jié)果如下圖：

至此，講完了Vue 的基本語(yǔ)法......撒花??ヽ(°▽°)ノ?