Vue基本語法和父子組件傳參（prop、emit）

Vue基本語法和組件傳參

基本語法

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

一、插值

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

<template>
    <div class="main">
         <h3>這裏是title的值：{{title}}</h3>
    </div>
</template>

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

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

二、v-html

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

<template>
    <div class="main">
        <p >這裏是<span v-html='html'></span></p>
    </div>
</template>

export default {
    name:'phonerisk',
    data(){
        return{
            html:'<span style="color:blue;font-size:23px;">v-if</span>'
        }
    }
}

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

v-bind

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

<template>
    <div class="main">
        <img :src="imgUrl" />
    </div>
</template>

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

v-bind 可以簡寫成 :

三、v-model

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

<template>
    <div class="main">
        <input type="text" v-model="name">
        {{name}}
        <button @click='changeName'>改變名字</button>
    </div>
</template>

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

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

四、v-on

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

template>
    <div class="main">
       
        <button @click='yes'>你敢點我嗎？</button>
    </div>
</template>

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

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

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

1. .stop

   沒有加修飾符

   <div class="main" @click="div">
           <button @click.stop='yes'>你敢點我嗎？</button>
       </div>

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

   效果如下圖：
   

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

   <button @click.stop='yes'>你敢點我嗎？</button>

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

2. .prevent

   沒有加修飾符

     <form @submit="onSubmit">
           <button @click="onSubmit">提交</button>
       </form>

   運行結果如下圖：
   

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

   <form @submit.prevent ="onSubmit">
       <button @click="onSubmit">提交</button>
   </form>

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

3. .keyup

   <input v-on:keyup.13="submit">
   <input @keyup.enter="submit">

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

五、v-if

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

<template>
    <div class="main">
    <span v-if="display">我叫001</span>
    <span v-if="!display">我叫002</span>
    <button @click="changeShow">切換</button>
    </div>
</template>

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

```
運行結果如下圖：

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

六、v-else、v-else-if

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

    <div class="main">
    <span v-if="display">我叫001</span>
    <span v-else>我叫002</span>
    <button @click="changeShow">切換</button>
    </div>

運行效果和上圖一致。

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

<template>
    <div class="main">
    <span v-if="display === 1">我叫001</span>
    <span v-else-if="display === 2">我叫002</span>
    <span v-else>我叫003</span>
    <button @click="changeShow">切換</button>
    </div>
</template>

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

運行結果如下圖：

七、v-show

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

<template>
    <div class="main">
    <span v-show="display">我叫001</span>
    <span v-show="!display ">我叫002</span>
    <button @click="changeShow">切換</button>
    </div>
</template>

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

運行效果如下圖：

八、v-for

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

<div class="main">
        <ul v-for="(name, index) in names" :key="index">
            <li>{{index}}、我的名字叫{{name}}</li>
        </ul>
    </div>

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

運行結果如下圖：

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

九、v-once

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

<div class="main">
    <!-- 單個元素 -->
    <span v-once>This will never change:{{msg}}</span>
    <!-- 有子元素 -->
    <div v-once>
      <span>comment:::</span>
      <span>{{msg}}</span>
    </div>
    <!-- 循環 -->
    <ul>
      <li v-for="i in names" v-once :key="i">{{i}}</li>
    </ul>
    <hr>
    <span>This will change:</span>
     <!-- 單個元素 -->
    <span>This will never change:{{msg}}</span>
    <!-- 有子元素 -->
    <div >
      <span>comment:::</span>
      <span>{{msg}}</span>
    </div>
    <!-- 循環 -->
    <ul>
      <li v-for="i in names"  :key="i">{{i}}</li>
    </ul>
    <button @click="changValue">testChange</button>
  </div>

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的區別

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

<template>
  <div class="main">
    <h3>v-if</h3>
    <div class="content" v-if="display">1</div>
    <div class="content" v-else>2</div>
    <h3>v-show</h3>
    <div class="content" v-show="display">1</div>
    <div class="content" v-show="!display">2</div>
    <h3>對比</h3>
    <div class="content">1</div>
    <div class="content">2</div>
    <button @click="changeValue">點擊我啦</button>
  </div>
</template>

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顯示位置不一樣。

1. 首先我們解讀一下這個代碼的css:content類設置了div的長寬和背景色，dispaly屬性爲 inline-block,
   .content + .content 設置瞭如果有兩個content 類在一起的時候，後面一個的左邊距爲20個像素。
2. 在dispaly 爲 true 的時候，兩個div都靠左顯示。
3. 在 display 爲 false 的時候，上面的div在原來的位置重新渲染，但是下面的div卻有一個20像素的左邊距。
4. 所以v-if渲染的時候，不會將不符合條件的元素加載到DOM樹裏面，而v-show則會將所有的節點都加載到DOM樹，然後根據條件，更改節點的display 屬性，生成不同的渲染樹。
   
   一般來說， v-if需要更高的開銷，每次都會改變DOM樹，但是v-show 只需要改變元素的 display ，開銷更低。

十一、v-for和v-if優先級問題

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

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

<template>
  <div class="main">
   <ul >
       <li v-for="(count, index) in counts" :key="index" v-if="count >30">
           {{index + 1}}、我花費了{{count}}元
        </li>>
       {{index + 1}}、我花費了{{count}}元
       </li>
   </ul>
  </div>
</template>

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

運行結果如下圖：

跳過了count 小於 30 的項

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

<template>
  <div class="main">
   <ul  v-if="counts.length >3">
       <li v-for="(count, index) in counts" :key="index">
           {{index + 1}}、我花費了{{count}}元
        </li>
   </ul>
  </div>
</template>

運行結果如下圖：

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