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

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

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

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

網(wǎng)頁上就會顯示出來data里面title的值。

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

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

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

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

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

v-bind 可以簡寫成 :

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

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

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

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

template>
    

       
        你敢點我嗎？
    

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

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

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

.stop

沒有加修飾符

        你敢點我嗎？
    

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

效果如下圖：

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

你敢點我嗎？

效果如下圖：

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

.prevent

沒有加修飾符

  

        提交
    

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

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

    提交

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

.keyup

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

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

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

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

v-if綁定的變量為 true 的時候，其所在的元素會被渲染出來，反之亦然。

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

    

    我叫001
    我叫002
    切換
    

運行效果和上圖一致。

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

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

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

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

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

運行效果如下圖：

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

        

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

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

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

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

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

    
    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";
    }
  }

運行效果如下圖：

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

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

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;
}

運行效果如下圖：

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

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

在dispaly 為 true 的時候，兩個div都靠左顯示。

在 display 為 false 的時候，上面的div在原來的位置重新渲染，但是下面的div卻有一個20像素的左邊距。

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

一般來說， v-if需要更高的開銷，每次都會改變DOM樹，但是v-show 只需要改變元素的 display ，開銷更低。

當(dāng)v-for 和v-if 在同一個蒜素里的時候，前者比后者有更高的優(yōu)先級，所以我們在開發(fā)中一定要注意優(yōu)先級的問題。

如果我們是想有條件的跳過循環(huán)中的某些項的時候：

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

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

跳過了count 小于 30 的項

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

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

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