Vue 2.x教程之基礎(chǔ)API

更新時(shí)間：2017年03月06日 14:43:14 作者：Aitter

這篇文章主要介紹了Vue 2.x基礎(chǔ)API的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。

本文主要介紹的是關(guān)于Vue 2.x之基礎(chǔ)API的相關(guān)內(nèi)容，主要內(nèi)容如下

模板語法（文本插值、屬性綁定、JS表達(dá)式、過濾器、指令）
Vue實(shí)例（viewModal(屬性+函數(shù))、生命周期）
計(jì)算屬性和監(jiān)聽器 (computed(get,set) 與 watch)
樣式綁定（對象綁定、數(shù)組綁定、內(nèi)聯(lián)綁定）
條件綁定（v-if v-show）
列表渲染 (v-for、:key、數(shù)組監(jiān)測、過濾/排序)
事件處理 (監(jiān)聽、修飾符、key修飾符)
表單輸入綁定（text、checkbox、radio、select）

一、模板語法

文本插值

- 使用 `{{ }} / <span v-text="msg"></span>` 綁定數(shù)據(jù)
- `{{ }}` 純文本綁定，單向，隨vm變化而變化
- `<span v-once>{{ msg }}</span>` 純文本，單次，不跟隨vm變化
- `<span v-html="msg"></span>` 不轉(zhuǎn)義html標(biāo)簽，綁定html

屬性綁定

- 使用 `v-bind` 指令綁定數(shù)據(jù)至標(biāo)簽屬性
- `<a v-bind:id="msgId"></a> 簡寫 <a :id="msgId"></a>`

模板中的JS

支持表達(dá)式執(zhí)行，但不支持多個(gè)表達(dá)式、語句和控制流的執(zhí)行
屬性綁定和綁定的數(shù)據(jù)都支持JS表達(dá)式

//加減乘除、三元運(yùn)算、方法調(diào)用
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
//錯(cuò)誤用法
<!-- 這是語句，不是表達(dá)式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效，請使用三元表達(dá)式 -->
{{ if (ok) { return message } }}

過濾器

- 使用 `|` 對原始值進(jìn)行處理
- 用于屬性綁定與 `{{ }}`
- `{{ msg | capitalize }} <a :id="msgId | formatId"></a>`
- 可以串聯(lián) `{{ msg | filterA | filterB }}`
- 可以接收參數(shù) `{{ msg | filterA(arg1, arg2) }}`

指令

- 帶有 `v-` 前綴的特殊屬性
- 當(dāng)其表達(dá)式的值改變時(shí)相應(yīng)地將某些行為應(yīng)用到 DOM 上
- `v-bind/v-for/v-html/v-on/v-if/...`
- `v-bind` 縮寫 `<a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a><a :href="url" rel="external nofollow" rel="external nofollow" ></a>`
- `v-on` 縮寫 `<a v-on:click="doSomething"></a><a @click="doSomething"></a>`

注冊過濾器

//全局注冊
Vue.filters('capitalize',value=>{
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})
//局部注冊
filters: {
 capitalize: function (value, arg1) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
 }
}
//使用
<span>{{msg | capitalize(arg1) }}

注意

注冊過濾器時(shí)，如果需要傳遞參數(shù)，必須從第二個(gè)參數(shù)開始，第一個(gè)參數(shù)為當(dāng)前綁定的數(shù)據(jù)
過濾器一般用于簡單的文本格式化，如果是對多個(gè)狀態(tài)數(shù)據(jù)，或是復(fù)雜的數(shù)據(jù)處理應(yīng)該使用計(jì)算屬性

注冊指令

//全局注冊
// 注冊一個(gè)全局自定義指令 v-focus
Vue.directive('focus', {
 // 當(dāng)綁定元素插入到 DOM 中。
 inserted: function (el) {
 // 聚焦元素
 el.focus()
 }
})
//局部注冊
directives: {
 focus: {
 // 指令的定義---
 }
}
//使用
<input v-focus />

二、Vue實(shí)例

Vue 實(shí)例，實(shí)則也就是 ViewModel（數(shù)據(jù) + 函數(shù)），都是通過構(gòu)造函數(shù) Vue 創(chuàng)建

var vm = new Vue({
 name:'root',
 // 數(shù)據(jù)
 data: { a: 1 } / Function, // data類型根實(shí)例為Object，組件中為Function
 props:[]/{}, // 設(shè)置父組件傳遞給子組件的數(shù)據(jù)限制
 computed:{}, // 計(jì)算屬性
 watch:{}, // 監(jiān)控屬性
 methods:{}, // 事件操作
 // 資源
 directives:{}, // 內(nèi)部指令
 filters:{}, // 內(nèi)部過濾器
 components:{}, // 內(nèi)部組件
 // 生命周期：實(shí)例創(chuàng)建 => 編譯掛載 => 組件更新 => 銷毀
 beforeCreate(){
 console.log('beforeCreate ==> 實(shí)例創(chuàng)建')
 },
 created(){
 // 可以操作data, 但未生成DOM（未掛載）發(fā)起異步請求，初始化組件狀態(tài)數(shù)據(jù) data
 console.log('created ==> 實(shí)例創(chuàng)建完成，屬性已綁定')
 },
 beforeMount(){
 console.log('beforeMount ==> 模板編譯/掛載之前')
 },
 mounted(){
 // 已生成DOM到document中，可訪問this.$el屬性
 console.log('mounted ==> 模板編譯/掛載之后')
 },
 beforeUpdate(){
 console.log('beforeUpdate ==> 組件更新之前')
 },
 updated(){
 // 操作DOM $('#box1')
 console.log('updated ==> 組件更新之后')
 },
 activated(){
 // 操作DOM $('#box1')
 console.log('activated ==> 組件被激活時(shí)（for keep-alive組件）')
 },
 deactivated(){
 console.log('deactivated ==> 組件被移除時(shí)（for keep-alive組件）')
 },
 beforeDestroy(){
 // 解除事件綁定，銷毀非Vue組件實(shí)例等 如：this.$off('event1') select2.destory()
 console.log('beforeDestroy ==> 組件銷毀之前')
 },
 destroyed(){
 console.log('destroyed ==> 組件銷毀之后')
 }
})

三、計(jì)算屬性與監(jiān)聽器

computed

任何復(fù)雜邏輯，都應(yīng)當(dāng)使用計(jì)算屬性

可以像綁定普通屬性一樣在模板中綁定計(jì)算屬性

聲明式地創(chuàng)建依賴關(guān)系，計(jì)算屬性的 getter 是干凈無副作用的，因此也是易于測試和理解的。

<div id="example">
 <p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
 el: '#example',
 data: {
 message: 'Hello'
 },
 computed: {
 // a computed getter
 reversedMessage: function () {
 // `this` points to the vm instance
 return this.message.split('').reverse().join('')
 }
 }
})

使用 methods 和 filter 也能達(dá)到計(jì)算屬性同樣的效果，但計(jì)算屬性使模板更加簡單清晰（模板中放入太多的邏輯會讓模板過重且難以維護(hù)）。

計(jì)算屬性有計(jì)算緩存的特性，計(jì)算屬性是基于它的依賴緩存，只有在它的相關(guān)依賴發(fā)生改變時(shí)才會重新取值，而 methods 每次執(zhí)行都會重新取值。

什么需要緩存？

假設(shè)我們有一個(gè)重要的計(jì)算屬性 A ，這個(gè)計(jì)算屬性需要一個(gè)巨大的數(shù)組遍歷和做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執(zhí)行 A 的 getter ！如果你不希望有緩存，請用 method 替代。

getter與setter

計(jì)算屬性默認(rèn)為 getter

data: {
 firstName: 'Foo',
 lastName: 'Bar'
},
computed: {
 fullName: function () {
 return this.firstName + ' ' + this.lastName
 }
}

也可以添加 setter

computed: {
 fullName: {
 // getter
 get: function () {
 return this.firstName + ' ' + this.lastName
 },
 // setter
 set: function (newValue) {
 var names = newValue.split(' ')
 this.firstName = names[0]
 this.lastName = names[names.length - 1]
 }
 }
}

watch

使用 watch 來監(jiān)聽data，實(shí)時(shí)響應(yīng)數(shù)據(jù)的變化

例：監(jiān)聽用戶輸入，顯示正在輸入...，輸入完成時(shí)，顯示請稍等...，并發(fā)送異步請求，請求成功里，顯示答案

var watchExampleVM = new Vue({
 el: '#watch-example',
 data: {
 question: '',
 answer: 'I cannot give you an answer until you ask a question!'
 },
 watch: {
 // 如果 question 發(fā)生改變，這個(gè)函數(shù)就會運(yùn)行
 question: function (newQuestion) {
 this.answer = '正在輸入...'
 this.getAnswer()
 }
 },
 methods: {
 // _.debounce 是一個(gè)通過 lodash 限制操作頻率的函數(shù)。
 // 在這個(gè)例子中，我們希望限制訪問yesno.wtf/api的頻率
 // ajax請求直到用戶輸入完畢才會發(fā)出
 getAnswer: _.debounce(
 function () {
 if (this.question.indexOf('?') === -1) {
  this.answer = '需要一個(gè)問題標(biāo)識\'?\''
  return
 }
 this.answer = '請稍候...'
 var vm = this
 axios.get('https://yesno.wtf/api')
  .then(function (response) {
  vm.answer = _.capitalize(response.data.answer)
  })
  .catch(function (error) {
  vm.answer = 'Error! Could not reach the API. ' + error
  })
 },
 // 這是我們?yōu)橛脩敉Ｖ馆斎氲却暮撩霐?shù)
 500
 )
 }
})

使用 watch 選項(xiàng)允許我們執(zhí)行異步操作（訪問一個(gè) API），限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這是計(jì)算屬性無法做到的。

四、樣式綁定

使用 v-bind:class 與 v-bind:style 來綁定樣式

data:()=>{
 return {
 isActive: true,
 hasError: false,
 classObj:{
 'active':true,
 'align-left':true,
 },
 activeClass: 'active',
 errorClass: 'text-danger',
 styleObj:{
 color: 'red',
 fontSize: '13px'
 },
 activeColor: 'red',
 fontSize: 30,
 baseStyles:{color: 'red'},
 overridingStyles: { fontSize: '20px'}
 }
}

對象語法綁定

class 綁定的是對象的 key，如果對象的值為 true，則綁定 key

style 綁定的整個(gè) 對象

綁定 class

<div v-bind:class="classObj"></div>
//<div class="active align-left"></div>
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
//<div class="static active"></div>

綁定style

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObj"></div>
// <div style=" color:'red'; fontSize:'13px'; "></div>

數(shù)組語法綁定

class 綁定的是數(shù)組的值

style 綁定的是數(shù)組中的對象

<div v-bind:class="[activeClass, errorClass]">
// <div class="active text-danger">
// 使用三元表達(dá)式
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
// 數(shù)組語法中使用對象語法
<div v-bind:class="[{ active: isActive }, errorClass]">
//綁定style
<div v-bind:style="[baseStyles, overridingStyles]">

五、條件渲染

v-if

切換元素的隱藏和顯示 v-if、v-else、v-if-else

切換單個(gè)元素

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

切換多個(gè)元素

<template v-if="ok">
 <h1>Title</h1>
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
</template>

多條件判斷

<div v-if="type === 'A'">
 A
</div>
<div v-else-if="type === 'B'">
 B
</div>
<div v-else-if="type === 'C'">
 C
</div>
<div v-else>
 Not A/B/C
</div>

條件渲染默認(rèn)會復(fù)用相同的組件，如果不復(fù)用元素，可添加 key 值

<template v-if="loginType === 'username'">
 <label>Username</label>
 <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
 <label>Email</label>
 <input placeholder="Enter your email address" key="email-input">
</template>

v-show

用于切換元素樣式屬性 display 的 block 和 none

與 v-if 不同的是，元素隱藏時(shí)，并沒有從DOM中刪除，而 v-if 是刪除了元素保存在緩存中。

注意 v-show 不支持 <template> 語法

v-if 是真實(shí)的條件渲染，因?yàn)樗鼤_保條件塊在切換當(dāng)中適當(dāng)?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。

v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯會被緩存起來）。

區(qū)分 v-if 與 v-show 的使用場景：

v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗
如果需要頻繁切換使用 v-show 較好
如果在運(yùn)行時(shí)條件不大可能改變則使用 v-if 較好

六、列表渲染

v-for='item of items / item in items' 用于迭代對象或數(shù)組中的元素

data: {
 items: [
 {message: 'Foo' },
 {message: 'Bar' }
 ]
 object: {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
 }
}

基本用法

<ul id="example-1">
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>

添加第二個(gè)參數(shù)可以獲取當(dāng)前迭代的 key 值

數(shù)組迭代

<ul id="example-2">
 <li v-for="(item, index) in items">
 {{ parentMessage }} - {{ index }} - {{ item.message }}
 </li>
</ul>

對象迭代

<div v-for="(value, key) in object">
 {{ key }} : {{ value }}
</div>

循環(huán)組件，向組件中傳遞數(shù)據(jù)

<my-component
 v-for="(item, index) in items"
 v-bind:item="item"
 v-bind:index="index">
</my-component>

組件有自己的作用域，向組件中傳遞數(shù)據(jù)需要使用屬性傳遞

v-for 具有比 v-if 更高的優(yōu)先級

判斷每一個(gè)todo項(xiàng)是否可顯示

<li v-for="todo in todos" v-if="!todo.isComplete">
 {{ todo }}
</li>

判斷是否需要迭代todos

<ul v-if="shouldRenderTodos">
 <li v-for="todo in todos">
 {{ todo }}
 </li>
</ul>

添加 key 屬性

提升重復(fù)渲染效率

<div v-for="item in items" :key="item.id">
 <!-- 內(nèi)容 -->
</div>

數(shù)組監(jiān)測

Vue重寫了數(shù)組的變異方法，用于監(jiān)測數(shù)組的更新

push() 、pop() 、shift() 、unshift() 、
splice() 、sort() 、reverse()

這些操作會改變原有數(shù)組，為變異方法

非變異方法返回新的數(shù)組，可以用于替換舊的數(shù)組

直接修改數(shù)組長度、利用索引修改數(shù)組的值，不會被監(jiān)聽到

過濾/排序

使用計(jì)算屬性對原有數(shù)組進(jìn)行過濾和排序

data: {
 numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
 evenNumbers: function () {
 return this.numbers.filter(function (number) {
  return number % 2 === 0
 })
 }
}

七、事件監(jiān)聽

v-on

v-on 用于監(jiān)聽綁定的事件

<div id="example-3">
 <button @click="say('hi')">Say hi</button>
 <button @click="say('what')">Say what</button>
</div>
new Vue({
 el: '#example-3',
 methods: {
 say: function (message) {
  alert(message)
 }
 }
})

原生事件對象

使用 $event 傳遞原生事件對象

<button v-on:click="warn('hello', $event)">Submit</button>
methods: {
 warn: function (message, event) {
 // 現(xiàn)在我們可以訪問原生事件對象
 if (event) event.preventDefault()
 alert(message)
 }
}

事件修飾符

methods 應(yīng)該只處理純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)

.stop 阻止事件冒泡

.prevent 阻止默認(rèn)事件

.capture 使用捕獲模式

.self 只有當(dāng)事件作用于本身時(shí)才觸發(fā)

.once 只綁定一次

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時(shí)使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>
<!-- 點(diǎn)擊事件將只會觸發(fā)一次 2.1.4-->
<a v-on:click.once="doThis"></a>
<!-- 組件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

按鍵修飾符

監(jiān)聽鍵盤按下的鍵值

監(jiān)聽keyCode

<!-- 只有在 keyCode 是 13 時(shí)調(diào)用 vm.submit() -->
<input v-on:keyup.13="submit">

常用按鍵別名

.enter
.tab
.delete (捕獲 “刪除” 和 “退格” 鍵)
.esc
.space
.up
.down
.left
.right
2.1.0
.ctrl
.alt
.shift
.meta

<!-- 同上 -->
<input v-on:keyup.enter="submit">

按鍵組合

<!-- Alt + C -->
<input @keyup.alt.67="clear">

所有的 Vue.js 事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的 ViewModel 上
當(dāng)一個(gè) ViewModel 被銷毀時(shí)，所有的事件處理器都會自動被刪除。你無須擔(dān)心如何自己清理它們。

八、表單輸入綁定

使用 v-modal 給表單控件綁定相關(guān)數(shù)據(jù)（雙向綁定）

v-modal 是一個(gè)語法糖

<input v-model="something">
// 等同于
<input v-bind:value="something" v-on:input="something = $event.target.value">

基本輸入

// 文本框
<input v-model="message" placeholder="edit me">
// 文本域（支持換行）
<textarea v-model="message" placeholder="add multiple lines"></textarea>
// 復(fù)選框
// 單選（返回 true/false ）
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
// 多選 （返回一個(gè)數(shù)組 ['jack', 'john']）
<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>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
//單選框 （返回選中的值）
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
// 下拉框
// 單選 （返回選中的值）
<select v-model="selected">
 <option>A</option>
 <option>B</option>
 <option>C</option>
</select>
// 多選（返回一個(gè)數(shù)組 ['A','B']）
<select v-model="selected" multiple>
 <option>A</option>
 <option>B</option>
 <option>C</option>
</select>

當(dāng)有選項(xiàng)有 value 屬性時(shí)，選中時(shí)，返回 value, 當(dāng)屬性沒有 value 時(shí)，選中時(shí)返回字符串或 true/false

<select v-model="selected">
 <option v-for="option in options" v-bind:value="option.value">
 {{ option.text }}
 </option>
</select>

綁定動態(tài)的value

v-model 綁定的 value 通常是靜態(tài)字符串，對于 radio、checkbox、select，可以動態(tài)的使用v-bind設(shè)置value

<input
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b"
>
// 當(dāng)選中時(shí)
vm.toggle === vm.a
// 當(dāng)沒有選中時(shí)
vm.toggle === vm.b

修飾符

v-modal 的修飾符 .lazy、 .number、.trim

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
// 自動將用戶的輸入值轉(zhuǎn)為 Number 類型（如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值）
<input v-model.number="age" type="number">
// 過濾用戶輸入的首尾空格
<input v-model.trim="msg">

自定義輸入組件

使用 v-modal 自定義輸入組件

前提條件，組件必須有 value 屬性，在有新的value時(shí)，可通過 input 事件獲取更新的值。

自定義的貨幣輸入組件

<currency-input v-model="price"></currency-input>
Vue.component('currency-input', {
 template: '
 <span>
  $
  <input
  ref="input"
  v-bind:value="value"
  v-on:input="updateValue($event.target.value)"
  >
 </span>
 ',
 props: ['value'],
 methods: {
 // 不是直接更新值，而是使用此方法來對輸入值進(jìn)行格式化和位數(shù)限制
 updateValue: function (value) {
  var formattedValue = value
  // 刪除兩側(cè)的空格符
  .trim()
  // 保留 2 小數(shù)位
  .slice(0, value.indexOf('.') + 3)
  // 如果值不統(tǒng)一，手動覆蓋以保持一致
  if (formattedValue !== value) {
  this.$refs.input.value = formattedValue
  }
  // 通過 input 事件發(fā)出數(shù)值
  this.$emit('input', Number(formattedValue))
 }
 }
})

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: