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的 ofollow,noindex" target="_blank">官網 進行更詳細的學習。
-
.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的點選監聽沒有監聽到內容。 -
.prevent沒有加修飾符
<form @submit="onSubmit"> <button @click="onSubmit">提交</button> </form>
執行結果如下圖：
加了
.prevent修飾符之後的效果<form @submit.prevent ="onSubmit"> <button @click="onSubmit">提交</button> </form>
.prevent提交表單之後頁面不在重新渲染。可以看到沒加修飾符的時候頁面重新載入，但是在加修飾符之後，頁面不在重新載入。 -
.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 顯示位置不一樣。
- 首先我們解讀一下這個程式碼的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優先順序問題
當 v-for 和 v-if 在同一個蒜素裡的時候，前者比後者有更高的優先順序，所以我們在開發中一定要注意優先順序的問題。
- 如果我們是想有條件的跳過迴圈中的某些項的時候：
<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"> <ulv-if="counts.length >3"> <li v-for="(count, index) in counts" :key="index"> {{index + 1}}、我花費了{{count}}元 </li> </ul> </div> </template>
執行結果如下圖：
至此，講完了 Vue 的基本語法......撒花✿✿ヽ(°▽°)ノ✿