vue基礎(chǔ)、安裝、介紹

• • 雙大括號（Mustache語法，又叫胡子語法）
  • v-text
  • v-html
  • v-show
  • v-if、v-else-if、v-else
  • v-show 與 v-if 的區(qū)別
  • v-for
  • v-for 中的 key
  • v-if 與 v-for 一起使用
  • v-on（縮寫： @）
  • v-bind（縮寫： :）
  • v-model
  • v-once
  • v-pre
  • v-cloak(不常用)
  • computed計(jì)算屬性
  • computed 和 methods 的區(qū)別
  • filter過濾器

vue基礎(chǔ)、安裝、介紹

Vue 實(shí)例

• • 雙大括號（Mustache語法，又叫胡子語法）
  • v-text
  • v-html
  • v-show
  • v-if、v-else-if、v-else
  • v-show 與 v-if 的區(qū)別
  • v-for
  • v-for 中的 key
  • v-if 與 v-for 一起使用
  • v-on（縮寫： @）
  • v-bind（縮寫： :）
  • v-model
  • v-once
  • v-pre
  • v-cloak(不常用)
  • computed計(jì)算屬性
  • computed 和 methods 的區(qū)別
  • filter過濾器

雙大括號（Mustache語法，又叫胡子語法）

動(dòng)態(tài)賦值語法：可使用字段、表達(dá)式、函數(shù)、三目運(yùn)算、計(jì)算屬性、過濾器

<div id="app"><h1>{{firstName+lastName}}</h1><h1>{{firstName}}{{lastName}}</h1><h1>{{firstName ? firstName+lastName : lastName }}</h1><h1>{{getfullName()}}</h1><h1>{{fullName}}</h1><h1>{{ firstName | filterName(lastName) }}</h1> </div> <script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {firstName: '蔡',lastName: '徐坤'},computed: {fullName() {return this.firstName + this.lastName;}},methods: {getfullName() {return this.firstName + this.lastName;}},filter: {filterName(firstName, lastName ){return firstName + lastName }}}) </script>

v-text

更新DOM的 文本。和 雙大括號語法功能一樣。不推薦使用

<span v-text="msg"></span> <span>{{msg}}</span>

v-html

1）更新元素的 innerHTML。內(nèi)容按普通 HTML 插入 - 不會(huì)作為 Vue 模板進(jìn)行編譯。 不推薦使用
2）動(dòng)態(tài)渲染任意 HTML 是非常危險(xiǎn)的，容易導(dǎo)致 XSS 攻擊。只在可信內(nèi)容上使用 v-html，永不用在用戶提交的內(nèi)容上。
3）在單文件組件里，scoped 的樣式不會(huì)應(yīng)用在 v-html 內(nèi)部，因?yàn)槟遣糠?HTML 沒有被 Vue 的模板編譯器處理

<div v-html="html"></div>

v-show

1）根據(jù)表達(dá)式的真假值，切換元素的 display CSS property。
2）通過 v-show 表達(dá)式的真假值切換的元素一開始被渲染并始終會(huì)保留在 DOM 中。
3）v-show 不支持 <template> 元素，也不支持 v-else

<h1 v-show="isShow">Hello!</h1> <h1 v-show="!isShow">Hello!</h1>

v-if、v-else-if、v-else

1）Vue的條件指令可以根據(jù)表達(dá)式的值在DOM中渲染或銷毀元素或組件
2）不需要被多余渲染的塊可以使用<template> 元素加上v-if，減少結(jié)構(gòu)嵌套
3）下面來看一個(gè)經(jīng)典問題：

<div id="app"><span v-if="isuser"><label for="user">手機(jī)登陸</label><input type="text" id="user" placeholder="手機(jī)登陸"></span><span v-else><label for="emial">郵箱登陸</label><input type="text" id="emial" placeholder="郵箱登陸"></span><button @click="isuser=!isuser">登錄轉(zhuǎn)換</button> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {isuser: true}}) </script>

問題：我們在有輸入內(nèi)容的情況下，切換了類型，我們會(huì)發(fā)現(xiàn)文字依然顯示之前的輸入的內(nèi)容

原因：Vue在進(jìn)行DOM渲染時(shí)，出于性能考慮，會(huì)盡可能的復(fù)用已經(jīng)存在的元素，而不是重新創(chuàng)建新的元素。
在上面的案例中，Vue內(nèi)部會(huì)發(fā)現(xiàn)原來的input元素不再使用，直接作為else中的input來使用了
解決方案：給對應(yīng)的input添加key，并且我們需要保證key的不同。讓vue重新創(chuàng)建新的元素

<span v-if="isuser"><input type="text" id="user" placeholder="手機(jī)登陸" key=“user”></span><span v-else><input type="text" id="emial" placeholder="郵箱登陸" key="emial"></span>

v-show 與 v-if 的區(qū)別

1）都是決定一個(gè)內(nèi)容是否被渲染
2）v-if當(dāng)條件為false時(shí)，壓根不會(huì)有對應(yīng)的元素在DOM中
v-show當(dāng)條件為false時(shí)，僅僅是將元素的display屬性設(shè)置為none而已
3）當(dāng)需要在顯示與隱藏之間切片很頻繁時(shí)，使用v-show
4）當(dāng)切換不頻繁或需要顯示與隱藏的內(nèi)容比較多時(shí)，使用v-if

v-for

1）基于源數(shù)據(jù)多次渲染元素或模板塊
2）此指令之值，必須使用特定語法為當(dāng)前遍歷的元素提供別名

<div v-for="item in items"></div> <div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, key, index) in object"></div>

3）原理上，v-for 的默認(rèn)行為會(huì)嘗試原地修改元素而不是移動(dòng)它們。v-for 循環(huán)必須加上 key 屬性，在整個(gè) for 循環(huán)中 key 需要唯一

<div v-for="item in items" :key="'item' + item.id"></div> <div v-for="(item, index) in items" :key="'item' + index"></div>

v-for 中的 key

v-if 與 v-for 一起使用

避免 v-if 和 v-for 同時(shí)用在一個(gè)元素上（性能問題），v-for 的優(yōu)先級比 v-if 更高
兩種解決方案：
將數(shù)據(jù)替換為一個(gè)計(jì)算屬性，讓其返回過濾后的列表

<li v-for="user in activeUsers" :key="user.id">{{ user.name }} </li> <script>computed: {activeUsers() {return this.users.filter( user => {return user.isActive})}}</script>

將 v-if 移動(dòng)至容器元素上 (比如 ul, ol)

<ul v-if="shouldShowUsers"><li v-for="user in users" :key="user.id">{{ user.name }}</li></ul>

v-on（縮寫： @）

綁定事件監(jiān)聽器

修飾符：

.stop - 調(diào)用 event.stopPropagation()。 .prevent - 調(diào)用 event.preventDefault()。 .capture - 添加事件偵聽器時(shí)使用 capture 模式。 .self - 只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)。 .{keyCode | keyAlias} - 只當(dāng)事件是從特定鍵觸發(fā)時(shí)才觸發(fā)回調(diào)。 .native - 監(jiān)聽組件根元素的原生事件。 .once - 只觸發(fā)一次回調(diào)。 .left - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)。 .right - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時(shí)觸發(fā)。 .middle - (2.2.0) 只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時(shí)觸發(fā)。 .passive - (2.3.0) 以 { passive: true } 模式添加偵聽器 全部的按鍵別名： .enter .tab .delete (捕獲 “刪除” 和 “退格” 鍵) .esc .space .up .down .left .right .ctrl .alt .shift .meta

用法：
a. 事件類型由參數(shù)指定。表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(nèi)聯(lián)語句
b. 如果該方法不需要額外參數(shù)，那么方法后的()可以不添加
c. 如果方法本身中有一個(gè)參數(shù)，那么會(huì)默認(rèn)將原生事件event參數(shù)傳遞進(jìn)去
d.如果需要同時(shí)傳入某個(gè)參數(shù)，同時(shí)需要event時(shí)，可以通過$event傳入事件

<!--當(dāng)監(jiān)聽事件沒有參數(shù)時(shí)，() 可加可不加。 --><button v-on:click="btnclick1">按鈕1</button><button v-on:click="btnclick1()">按鈕1</button><!-- 當(dāng)監(jiān)聽事件需要參數(shù)的時(shí)候，但是在事件定義時(shí)，寫方法時(shí)省略了小括號，這個(gè)時(shí)候vue會(huì)默認(rèn)將瀏覽器生產(chǎn)的event事件對象作為參數(shù)傳入到方法中。 --><button @click="btnclick2">按鈕2</button><!-- 監(jiān)聽事件需要參數(shù)的時(shí)候，但是在事件定義時(shí)，寫方法時(shí)寫了小括號，但是沒有傳參，會(huì)默認(rèn)undefined。 --><button @click="btnclick2()">按鈕2</button><!-- 方法定義時(shí)，我們需要event對象，同時(shí)又需要其他參數(shù)， --><!-- 在調(diào)用方法時(shí)，使用 $event 就能手動(dòng)獲取到瀏覽器參數(shù)的event對象 --><button @click="btnclick3(123,$event)">按鈕3</button>

用在普通元素上時(shí)，只能監(jiān)聽原生 DOM 事件

在監(jiān)聽原生 DOM 事件時(shí)，方法以事件為唯一的參數(shù)。如果使用內(nèi)聯(lián)語句，語句可以訪問一個(gè) $event <!-- 方法處理器 --> <button v-on:click="doThis"></button> <button @click="doThis"></button><!-- 動(dòng)態(tài)事件 (2.6.0+) --> <button v-on:[event]="doThis"></button> <button @[event]="doThis"></button><!-- 內(nèi)聯(lián)語句 --> <button v-on:click="doThat('hello', $event)"></button>// 阻止冒泡 <div @click.stop="doSomthing"></div>// 阻止默認(rèn)行為 <div @click.prevent="doSomthing"></div> <form @submit.prevent></form>// 只觸發(fā)一次 <div @click.once="doSomthing"></div>// 串聯(lián)修飾符 <div @click.stop.prevent="doSomthing"></div>// 鍵盤修飾符 <div @keyup.enter="doSomthing"></div> // 別名 <div @keyup.13="doSomthing"></div> // 鍵盤碼// 對象語法 (2.4.0+) <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>// 滾動(dòng)事件 // .passive 修飾符尤其能夠提升移動(dòng)端的性能 <div @scroll.passive="onScroll">...</div> //不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告。

在自定義組件上使用時(shí)，可以監(jiān)聽子組件觸發(fā)的自定義事件。

// 組件中的原生事件 <my-component @click.native="onClick"></my-component> // 不加.native無法觸發(fā)該事件//內(nèi)聯(lián)語句 <my-component @my-event="handleThis(item, $event)" v-for="(item , index) in list" :key="index"></my-component>// 子組件觸發(fā)事件<my-component @my-event="handleThis"></my-component> // 父組件handleMy() { // 子組件this.$emit('myEvent');}

v-bind（縮寫： :）

動(dòng)態(tài)地綁定一個(gè)或多個(gè) 屬性attribute，或一個(gè)組件 prop 到表達(dá)式

<!-- 綁定一個(gè) attribute --> <img v-bind:src="imageSrc"> <img :src="imageSrc"><!-- 動(dòng)態(tài) attribute 名 (2.6.0+) --> <button v-bind:[key]="value"></button> <button :[key]="value"></button><!-- 內(nèi)聯(lián)字符串拼接 --> <img :src="'/path/to/images/' + fileName"><!-- options 綁定。“options”必須在 my-component 中聲明。--> <my-component :options="someThing"></my-component><!-- 通過 $props 將父組件的 props 一起傳給子組件 --> <child-component v-bind="$props"></child-component>

2）綁定 class 或 style attribute 時(shí)，支持其它類型的值，如數(shù)組或?qū)ο?br /> 綁定 class

內(nèi)聯(lián)字符串拼接語法： <div v-for="(item, index) in list" :class="'demo' + index"></div> 對象語法： //對象表達(dá)式 <div class="demo" :class="{'demo-red': isActive, 'demo-green': !isActive}"></div> data () {return {isActive: true,} } //綁定一個(gè)計(jì)算屬性 <div class="demo" :class="demoClassInfo"></div> data () {return {count: 0,} } cmputed: {demoClassInfo() {return {'demo-green': count > 0 && count <= 100 ? true : false,'demo-red': count > 100 ? true : false,}} } 數(shù)組語法： //三元表達(dá)式 <div class="demo" :class="[ isActive ? 'demo-red' : 'demo-green' ]"></div> data () {return {isActive: true,} }<div class="demo" :class="[demoClass1, demoClass2]"></div> data () {return {demoClass1: 'demo-color',demoClass2: 'demo-size',} }//綁定一個(gè)計(jì)算屬性 <div class="demo" :class="demoClassInfo"></div> data () {return {count: 0,} } cmputed: {demoClassInfo() {return [count > 0 && count <= 100 ? 'demo-green' : '',count > 100 ? 'demo-red' : '']} }

綁定style
css語法可以使用駝峰式（camelCase）、短橫分隔命名(kabab-case)

對象語法： <div class="demo" :style="{color: currentColor, fontSize: fontSize + 'px'}"></div> <div :style="{'flex':(options.negativeRate <= 82 ? options.negativeRate + ' 1 20%' : '82 0 20%')}"><div class="demo" :style="demoStyleInfo"></div>data () {return {demoStyleInfo: {demoColor: 'red',fontSize: '0.24rem'}} } 數(shù)組語法： <div class="demo" :style="[demoColor, demoSize]"></div>data () {return {demoStyleInfo: {demoColor: 'color: red',demoSize: 'fontSize: 0.24rem'}} }

v-model

在表單控件或者組件上創(chuàng)建雙向綁定

可以用 v-model 指令在表單 、 及 元素上創(chuàng)建雙向數(shù)據(jù)綁定
v-model 在內(nèi)部為不同的輸入元素使用不同的 property 并拋出不同的事件：
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段將 value 作為 prop 并將 change 作為事件。

// 文本輸入 <input v-model="message" placeholder="edit me">// 多行文本輸入 <textarea v-model="message" placeholder="add multiple lines"></textarea>// 單選按鈕<input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><span>Picked: {{ picked }}</span>data: {picked: ''}// 單個(gè)復(fù)選框，綁定到布爾值 <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label>// 多個(gè)復(fù)選框，綁定到同一個(gè)數(shù)組： <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <span>Checked names: {{ checkedNames }}</span> data: {checkedNames: [] }

修飾符
.lazy：添加 lazy 修飾符，從而轉(zhuǎn)為在 change 事件_之后_進(jìn)行同步
默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步
.number：自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型
.trim：自動(dòng)過濾用戶輸入的首尾空白字符

<!-- 在“change”時(shí)而非“input”時(shí)更新 --> <input v-model.lazy="msg"><input v-model.number="age" type="number"><input v-model.trim="msg">

v-once

只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過。這可以用于優(yōu)化更新性能

<!-- 單個(gè)元素 --> <span v-once>This will never change: {{msg}}</span> <!-- 有子元素 --> <div v-once><h1>comment</h1><p>{{msg}}</p> </div> <!-- 組件 --> <my-component v-once :comment="msg"></my-component> <!-- `v-for` 指令--> <ul><li v-for="i in list" v-once>{{i}}</li> </ul>

v-pre

跳過這個(gè)元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標(biāo)簽。
跳過大量沒有指令的節(jié)點(diǎn)會(huì)加快編譯。

v-cloak(不常用)

這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。
和 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢

computed計(jì)算屬性

常用場景：在某些情況，我們可能需要對數(shù)據(jù)進(jìn)行一些轉(zhuǎn)化后再顯示，或者需要將多個(gè)數(shù)據(jù)結(jié)合起來進(jìn)行顯示
使用：調(diào)用它的時(shí)候，就把它當(dāng)成一個(gè)屬性來調(diào)用就行，不要在后面加括號

computed 和 methods 的區(qū)別

1）在雙大括號中使用時(shí)，方法后有()，而計(jì)算屬性沒有
2）methods 和 computed，功能效果上兩個(gè)都是一樣的，但是 computed 是基于它的依賴緩存，只有相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新取值。而使用 methods ，在重新渲染的時(shí)候，函數(shù)總會(huì)重新調(diào)用執(zhí)行
3）computed不能接收參數(shù)

filter過濾器

<div id="app"><h1>{{ firstName | filterName(lastName) }}</h1> </div> <script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {firstName: '蔡',lastName: '徐坤'},filter: {filterName(firstName, lastName ){return firstName + lastName }}}) </script>

總結(jié)

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

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