vue基礎、安裝、介紹

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

vue基礎、安裝、介紹

Vue 實例

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

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

動態賦值語法：可使用字段、表達式、函數、三目運算、計算屬性、過濾器

<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。內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯。 不推薦使用
2）動態渲染任意 HTML 是非常危險的，容易導致 XSS 攻擊。只在可信內容上使用 v-html，永不用在用戶提交的內容上。
3）在單文件組件里，scoped 的樣式不會應用在 v-html 內部，因為那部分 HTML 沒有被 Vue 的模板編譯器處理

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

v-show

1）根據表達式的真假值，切換元素的 display CSS property。
2）通過 v-show 表達式的真假值切換的元素一開始被渲染并始終會保留在 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的條件指令可以根據表達式的值在DOM中渲染或銷毀元素或組件
2）不需要被多余渲染的塊可以使用<template> 元素加上v-if，減少結構嵌套
3）下面來看一個經典問題：

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

問題：我們在有輸入內容的情況下，切換了類型，我們會發現文字依然顯示之前的輸入的內容

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

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

v-show 與 v-if 的區別

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

v-for

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

<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 的默認行為會嘗試原地修改元素而不是移動它們。v-for 循環必須加上 key 屬性，在整個 for 循環中 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 同時用在一個元素上（性能問題），v-for 的優先級比 v-if 更高
兩種解決方案：
將數據替換為一個計算屬性，讓其返回過濾后的列表

<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 移動至容器元素上 (比如 ul, ol)

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

v-on（縮寫： @）

綁定事件監聽器

修飾符：

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

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

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

用在普通元素上時，只能監聽原生 DOM 事件

在監聽原生 DOM 事件時，方法以事件為唯一的參數。如果使用內聯語句，語句可以訪問一個 $event <!-- 方法處理器 --> <button v-on:click="doThis"></button> <button @click="doThis"></button><!-- 動態事件 (2.6.0+) --> <button v-on:[event]="doThis"></button> <button @[event]="doThis"></button><!-- 內聯語句 --> <button v-on:click="doThat('hello', $event)"></button>// 阻止冒泡 <div @click.stop="doSomthing"></div>// 阻止默認行為 <div @click.prevent="doSomthing"></div> <form @submit.prevent></form>// 只觸發一次 <div @click.once="doSomthing"></div>// 串聯修飾符 <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>// 滾動事件 // .passive 修飾符尤其能夠提升移動端的性能 <div @scroll.passive="onScroll">...</div> //不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。

在自定義組件上使用時，可以監聽子組件觸發的自定義事件。

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

v-bind（縮寫： :）

動態地綁定一個或多個 屬性attribute，或一個組件 prop 到表達式

<!-- 綁定一個 attribute --> <img v-bind:src="imageSrc"> <img :src="imageSrc"><!-- 動態 attribute 名 (2.6.0+) --> <button v-bind:[key]="value"></button> <button :[key]="value"></button><!-- 內聯字符串拼接 --> <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 時，支持其它類型的值，如數組或對象
綁定 class

內聯字符串拼接語法： <div v-for="(item, index) in list" :class="'demo' + index"></div> 對象語法： //對象表達式 <div class="demo" :class="{'demo-red': isActive, 'demo-green': !isActive}"></div> data () {return {isActive: true,} } //綁定一個計算屬性 <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,}} } 數組語法： //三元表達式 <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',} }//綁定一個計算屬性 <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'}} } 數組語法： <div class="demo" :style="[demoColor, demoSize]"></div>data () {return {demoStyleInfo: {demoColor: 'color: red',demoSize: 'fontSize: 0.24rem'}} }

v-model

在表單控件或者組件上創建雙向綁定

可以用 v-model 指令在表單 、 及 元素上創建雙向數據綁定
v-model 在內部為不同的輸入元素使用不同的 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: ''}// 單個復選框，綁定到布爾值 <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label>// 多個復選框，綁定到同一個數組： <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 修飾符，從而轉為在 change 事件_之后_進行同步
默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步
.number：自動將用戶的輸入值轉為數值類型
.trim：自動過濾用戶輸入的首尾空白字符

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

v-once

只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節點將被視為靜態內容并跳過。這可以用于優化更新性能

<!-- 單個元素 --> <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

跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標簽。
跳過大量沒有指令的節點會加快編譯。

v-cloak(不常用)

這個指令保持在元素上直到關聯實例結束編譯。
和 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢

computed計算屬性

常用場景：在某些情況，我們可能需要對數據進行一些轉化后再顯示，或者需要將多個數據結合起來進行顯示
使用：調用它的時候，就把它當成一個屬性來調用就行，不要在后面加括號

computed 和 methods 的區別

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

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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。