Vue的學(xué)習(xí)筆記（下篇）

一、什么是Vue.js?

Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動。

前面幾天我們已經(jīng)分享了Vue的學(xué)習(xí)筆記（中篇）和Vue的學(xué)習(xí)筆記（上篇），今天我們一起來看看下篇。

二、Vue的v-for循環(huán)

（一）v-for循環(huán)普通數(shù)組

1.在data中定義普通數(shù)組；

data(){return{list: [1, 2, 3, 4, 5]}}

2.在html中使用v-for指令渲染；

<p v-for="(item, i) in list">索引值是：{{i}} --- 每一項(xiàng)的值是：{{item}}p>

3.效果圖如下圖：

（二）v-for循環(huán)對象數(shù)組

1.在data 中定義對象數(shù)組；

data(){return{        list: [  { id: 1, name: 'zhan1' },  { id: 2, name: 'zhan2' },  { id: 3, name: 'zhan3' },  { id: 4, name: 'zhan4' }]}}

2.在html中使用v-for指令渲染：

<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引值是：{{i}}p>

3.效果圖如下圖：

（三）v-for循環(huán)對象，在遍歷對象的身上的鍵值對時(shí)候，除了有val、key,在第三個位置還有一個索引值。

1.在data定義一個對象；

data(){return{user: {        id: 1,        name: 'zhan',        gender: '男'   }}}

2.在html中使用v-for指令渲染：

<p v-for="(val, key, i) in user">值是：{{ val }} --- 鍵是：{{key}} -- 索引值是：{{i}}p>

3.效果圖如下圖：

（四）v-for迭代數(shù)字 ###在in后面我們放過普通數(shù)組、對象數(shù)組、對象，還可以放數(shù)字，如果使用v-for迭代數(shù)字的時(shí)候，前面的count值的從1開始。

1.在html中使用v-for指令渲染：

<p v-for="count in 5">這是第 {{ count }} 次循環(huán)p>

2.效果圖如下圖：

（五）v-for循環(huán)中key屬性的使用

v-for 循環(huán)的時(shí)候，key 屬性只能使用number獲取string,在key使用的時(shí)候，必須使用v-bind屬性綁定的形式，指定key的值，在組件中，使用v-for循環(huán)的時(shí)候，如果有v-for的同時(shí)，指定唯一的字符串/數(shù)字類型：key的值。

1.在data 中定義對象數(shù)組；

data(){return{        list: [  { id: 1, name: 'zhan1' },  { id: 2, name: 'zhan2' },  { id: 3, name: 'zhan3' },  { id: 4, name: 'zhan4' }]}}

2.在html中使用v-for指令渲染代碼如下圖：

3.效果圖如下圖：

三、Vue過濾器的基本使用

1.首先定義一個 Vue 全局的過濾器，名字叫做msgFormat，字符串的replace方法的第一個參數(shù)，除了可以寫一個字符串之外，還可以定義一個正則。

2.在js的代碼中，如以下代碼：

Vue.filter('msgFormat', function (msg, arg, arg2) {  return msg.replace(/day/g, arg + arg2)})
Vue.filter('test', function (msg) {  return msg + '========'})

3.在html代碼中，如以下代碼：

{{ msg | msgFormat('我', '123') | test }}

4.在data中，定義一個msg:

data(){return{msg:'the day is cloudless'}}

5.效果圖如下圖：

四、總結(jié)

1.vue中的v-for循環(huán)有普通數(shù)組、對象數(shù)組、對象、迭代數(shù)字、key屬性的使用，這些用法的詳解，希望對大家有所幫助。

2.vue過濾器的基本使用局部過濾器優(yōu)先于全局過濾器被調(diào)用，一個表達(dá)式可以使用多個過濾器，過濾器之間需要用管道符“|”隔開，其執(zhí)行順序從左往右。

3.這些代碼比較簡單，希望對你有幫助！

看完本文有收獲？請轉(zhuǎn)發(fā)分享給更多的人

IT共享之家

入群請?jiān)谖⑿藕笈_回復(fù)【入群】

-------------------?End?-------------------

往期精彩文章推薦：

• 一篇文章教會你創(chuàng)建vue項(xiàng)目和使用vue.js實(shí)現(xiàn)數(shù)據(jù)增刪改查

• 一篇文章帶你了解CSS clear both清除浮動

• 手把手教你用Javascript制作隨機(jī)星星效果圖