Vue基本語法和組件傳參

基本語法

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

一、插值

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

<template><div class="main"><h3>這里是title的值：{{title}}</h3></div> </template> export default {name:'phonerisk',data(){return{title:'testTitle'}} }

網(wǎng)頁上就會顯示出來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>'}} }

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

三、v-bind

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

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

<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同時發(fā)生改變，點(diǎn)擊按鈕改變name數(shù)值的時候，輸入框里面的數(shù)據(jù)同時發(fā)生改變。

五、v-on

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

template><div class="main"><button @click='yes'>你敢點(diǎn)我嗎？</button></div> </template> methods:{yes(){alert("我有啥不敢的！！！");}}

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

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

.stop

沒有加修飾符 <div class="main" @click="div"><button @click.stop='yes'>你敢點(diǎn)我嗎？</button></div> methods:{yes(){alert("我有啥不敢的！！！");},div(){alert("我會DIV");}}

效果如下圖：

加了 .stop 修飾符之后的效果 <button @click.stop='yes'>你敢點(diǎn)我嗎？</button>

效果如下圖：

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

.prevent

沒有加修飾符 <form @submit="onSubmit"><button @click="onSubmit">提交</button></form>

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

加了 .prevent 修飾符之后的效果 <form @submit.prevent ="onSubmit"><button @click="onSubmit">提交</button> </form>

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

.keyup

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

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

六、v-if

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

<template><div class="main"><span v-if="display">我叫001</span><span v-if="!display">我叫002</span><button @click="changeShow">切換</button></div> </template> ```javascriptdata(){return{display:true}},methods:{changeShow(){this.display = !this.display;},}``` 運(yùn)行結(jié)果如下圖：

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

七、v-else、v-else-if

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

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

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

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

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

八、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;},}

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

九、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']}},

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

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

十、v-once

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

<div class="main"><!-- 單個元素 --><span v-once>This will never change:{{msg}}</span><!-- 有子元素 --><div v-once><span>comment:::</span><span>{{msg}}</span></div><!-- 循環(huán) --><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><!-- 循環(huán) --><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";}}

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

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

十一、v-if和v-show的區(qū)別

前面講了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">點(diǎn)擊我啦</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; }

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

從上圖我們可以看出當(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é)點(diǎn)都加載到DOM樹，然后根據(jù)條件，更改節(jié)點(diǎn)的display 屬性，生成不同的渲染樹。

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

十二、v-for和v-if優(yōu)先級問題

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

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

<template><div class="main"><ul ><li v-for="(count, index) in counts" :key="index" v-if="count >30">{{index + 1}}、我花費(fèi)了{(lán){count}}元</li>>{{index + 1}}、我花費(fèi)了{(lán){count}}元</li></ul></div> </template> data() {return {counts:[11,22,33,44,55,66]};

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

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

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

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

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

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

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的Vue基本语法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。