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

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

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

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

網頁上就會顯示出來data里面title的值。

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

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

網頁上將html字符串渲染成顏色為藍色的普通文本。

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

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

v-bind 可以簡寫成 :

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

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

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

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

template>
    

       
        你敢點我嗎？
    

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

這個案例是監聽按鈕的點擊事件，點擊之后調用 yes 函數，然后彈出警告框。

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

.stop

沒有加修飾符

        你敢點我嗎？
    

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

效果如下圖：

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

你敢點我嗎？

效果如下圖：

.stop 修飾符阻止了事件的繼續傳播，所以子節點的 click事件沒有冒泡到父節點，所以div的點擊監聽沒有監聽到內容。

.prevent

沒有加修飾符

  

        提交
    

運行結果如下圖：

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

    提交

.prevent 提交表單之后頁面不在重新渲染。可以看到沒加修飾符的時候頁面重新加載，但是在加修飾符之后，頁面不在重新加載。

.keyup

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

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

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

```
運行結果如下圖：

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

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

    

    我叫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;
        },
    }

運行結果如下圖：

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

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

運行效果如下圖：

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

        

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

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

運行結果如下圖：

v-for 多次渲染了li 里面的內容，循環遍歷了names 數組，并將結放入 {{name}} 里面。

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

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

運行效果如下圖：

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

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

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

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

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

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

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

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

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

運行結果如下圖：

跳過了count 小于 30 的項

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

運行結果如下圖：

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