vue簡(jiǎn)介
- vue.js的數(shù)據(jù)驅(qū)動(dòng)視圖是基于MVVM模型實(shí)現(xiàn)的
- model 代表數(shù)據(jù)
- view 代表視圖模板
- viewmodel 代表業(yè)務(wù)邏輯處理
數(shù)據(jù)驅(qū)動(dòng)視圖
- 基于MVVM模型實(shí)現(xiàn)的數(shù)據(jù)驅(qū)動(dòng)視圖解放了DOM操作
- view與model處理分離橄务，降低代碼耦合度
- 雙向綁定時(shí)的bug調(diào)試難度增大
- 大型項(xiàng)目的view與model過(guò)多计螺，維護(hù)成本高
組件化開(kāi)發(fā)
- 組件化開(kāi)發(fā)，允許我們將網(wǎng)頁(yè)功能封裝為自定義HTML標(biāo)簽泛粹，復(fù)用書(shū)寫(xiě)自定義標(biāo)簽名即可
- 組件不僅可以封裝結(jié)構(gòu)蓬蝶，還可以封裝樣式與邏輯代碼螺戳，大大提高了開(kāi)發(fā)效率與可維護(hù)性
vue實(shí)例
- vue實(shí)例是通過(guò)vue函數(shù)創(chuàng)建的對(duì)象踏堡，是使用vue功能的基礎(chǔ)
el選項(xiàng)
- 用于選取一個(gè)DOM元素作為vue實(shí)例的掛載目標(biāo)
- 只有掛載元素內(nèi)部才會(huì)被vue進(jìn)行處理，外部為普通HTML元素
- 代表MVVM中的view層
插值表達(dá)式
- 掛載元素可以使用vue.js的模板語(yǔ)法恒水，模塊中通過(guò)插值表達(dá)式為元素進(jìn)行動(dòng)態(tài)內(nèi)容設(shè)置会放，寫(xiě)法為{{}}
- 插值表達(dá)式只能書(shū)寫(xiě)在標(biāo)簽內(nèi)容區(qū)域，可以與其他內(nèi)容混合
- 內(nèi)部只能書(shū)寫(xiě)js表達(dá)式钉凌，不能書(shū)寫(xiě)語(yǔ)句
data選項(xiàng)
- data中的數(shù)據(jù)可以通過(guò)vm.$data.數(shù)據(jù)或vm.數(shù)據(jù)訪(fǎng)問(wèn)
- data中的數(shù)據(jù)為響應(yīng)式數(shù)據(jù)咧最，在發(fā)生改變時(shí)，視圖會(huì)自動(dòng)更新
- data中存在數(shù)組時(shí)御雕，索引操作與length操作無(wú)法自動(dòng)更新視圖矢沿，這時(shí)可以借助vue.set()方法替代操作
methods選項(xiàng)
- 用于存儲(chǔ)需要在vue實(shí)例中使用的函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<!-- 插值表達(dá)式 -->
<li>內(nèi)容展示: {{10 + 2 + 3}}</li>
<li>{{title}}</li>
<li>{{fn(list)}}</li>
</ul>
</div>
<script>
var vm = new Vue({
//el綁定元素
el: '#app',
data: {
title: '標(biāo)題文本',
list: 'a-b-c-d'
},
methods: {
fn(value){
return value.split('-').join('')
}
}
});
console.log(vm.$el);
console.log(vm.title)
// var vm = new Vue({});
// vm.$mount('#app')
</script>
</body>
</html>
指令
- 指令本質(zhì)就是html自定義屬性
v-once
- 使元素內(nèi)部的插值表達(dá)式只生效一次
<li v-once>{{title}}</li>
v-text
- 元素內(nèi)容整體替換為指定純文本數(shù)據(jù)
<li v-text="title"></li>
v-html
- 元素內(nèi)容整體替換為指定的html文本
<li v-html="content"></li> data: { content: '<h1>aaa</h1>' },
v-bind 簡(jiǎn)寫(xiě)用 ：
- v-bind用于動(dòng)態(tài)綁定HTML屬性
- 需要一次綁定多個(gè)屬性，還可以綁定對(duì)象
class綁定
- class是html屬性饮笛，可以通過(guò)v-bind進(jìn)行綁定咨察，并且可以與class屬性 共存
<li :class="{b : isB,c : isC,'class-d' : true}"></li> <li :class="['a',{b : isB},'c']"></li> data: { isB : true, isC : true, },
style綁定
- style是html屬性论熙，可以通過(guò)v-bind進(jìn)行綁定福青，并且可以和style屬性共存
- 綁定樣式的優(yōu)先級(jí)大于固定樣式
- 可以通過(guò)數(shù)組給標(biāo)簽設(shè)置多個(gè)樣式
<p :style="styleObj">這是樣式</p> data: { styleObj: { width: '100px', height: '100px', backgroundColor: 'red', } }
v-for
- 用于遍歷數(shù)據(jù)渲染結(jié)構(gòu)，常用的數(shù)組與對(duì)象均可遍歷
- 通過(guò)<template>標(biāo)簽設(shè)置模板占位符，可以將部分元素或內(nèi)容作為整體進(jìn)行操作
<div id="app"> <ul> <li v-for="(item, index) in itemList" :key="item.id"> 輸入框{{ item.value }}: <input type="text"> </li> </ul> <template v-for="item in obj"> <span>{{ item }}</span> <br> </template> </div> <script src="lib/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { arr: [1, 2, 3], itemList: [ { id: 1, value: 2 }, { id: 2, value:3 }, { id:3, value:3 } ], obj: { content1: '內(nèi)容1', content2: '內(nèi)容2', content3: '內(nèi)容3' } } }) </script>
v-show
- 用于控制元素顯示與隱藏无午，適用于顯示隱藏頻繁切換時(shí)使用
- <template>無(wú)法使用v-show指令
v-if
- 用于根據(jù)條件控制元素的創(chuàng)建和移除
<div id="app"> <p v-if="false">這個(gè)元素不會(huì)創(chuàng)建</p> <p v-else-if="true">這個(gè)元素會(huì)創(chuàng)建</p> <p v-else>這個(gè)元素不會(huì)創(chuàng)建</p> </div>
事件處理
v-on 簡(jiǎn)寫(xiě)用@
- 用于進(jìn)行元素的事件綁定
- 事件程序代碼較多媒役，可以在methods中設(shè)置函數(shù)，并設(shè)置為事件處理程序
- 在視圖中可以通過(guò)$event訪(fǎng)問(wèn)事件對(duì)象
<div id="app"> <p>{{content}}</p> <button v-on:click="content='這是點(diǎn)擊內(nèi)容'">點(diǎn)擊</button> <button @click="fn">按鈕</button> <button @click="fn($event)">按鈕2</button> </div> <script> var vm = new Vue({ //el綁定元素 el: '#app', data: { content : '這是綁定的內(nèi)容' }, methods: { fn(event){ this.content = "這是按鈕3設(shè)置的內(nèi)容" console.log(event) } } }); </script>
v-model
-
用于給<input>宪迟、<textarea>及<select>元素設(shè)置雙向數(shù)據(jù)綁定
<div id="app"> <p>元素雙向綁定：{{value}}</p> <input type="text" v-model="value"> </div> <script> var vm = new Vue({ //el綁定元素 el: '#app', data: { value: '', } }); </script>
單選按鈕綁定
<div id="app">
<p>radio的內(nèi)容：{{value}}</p>
<label for="one">選項(xiàng)一</label>
<input type="radio" id="one" value="1" v-model="value">
<label for="two">選項(xiàng)一</label>
<input type="radio" id="two" value="2" v-model="value">
</div>
修飾符
- 修飾符是以點(diǎn)開(kāi)頭的指令后綴酣衷，用于給當(dāng)前指令設(shè)置特殊操作
.prevent修飾符
- 用來(lái)阻止默認(rèn)事件行為，相當(dāng)于event.preventDefault()
<a @click.prevent >鏈接</a>
.stop修飾符
- 用于阻止事件傳播次泽，相當(dāng)于event.stopPropagation()
<div @click="fn1"> <!-- <button @click.stop="fn2">按鈕</button> --> //只執(zhí)行fn2穿仪，不會(huì)執(zhí)行fn1 <a @click.prevent.stop="fn2" >鏈接</a> </div>
.once修飾符
- 用于設(shè)置事件只會(huì)觸發(fā)一次
<button @click.once="fn">按鈕2</button>
按鍵修飾符
- 按鍵碼指的是將按鍵的按鍵碼作為修飾符使用以標(biāo)識(shí)按鍵的操作方式
- 單獨(dú)點(diǎn)擊系統(tǒng)操作符無(wú)效
<div id="app"> <!-- <input type="text" @keyup="fn"> --> <!-- <input type="text" @keyup.49="fn"> --> <!-- <input type="text" @keyup.esc="fn"> --> <input type="text" @keyup.a.b.c="fn"> </div> <script src="lib/vue.js"></script> <script> new Vue({ el: '#app', data: { }, methods: { fn (event) { console.log(event); console.log('輸入了對(duì)應(yīng)內(nèi)容'); } } });
v-model修飾符
- .trim修飾符 用于自動(dòng)過(guò)濾用戶(hù)輸入內(nèi)容首尾兩端的空格
- .lazy修飾符 用于將v-model的觸發(fā)方式由input事件觸發(fā)更改為change事件觸發(fā)
- .number修飾符 用于自動(dòng)將用戶(hù)輸入的指轉(zhuǎn)換為數(shù)值類(lèi)型，如果無(wú)法被parseFloat()轉(zhuǎn)換意荤，則返回原始內(nèi)容
自定義全局指令
- 指的是可以被任意vue實(shí)例或組件使用的指令
<input type="text" v-focus.a.b="100+1"> <script> // 自定義全局指令 Vue.directive('focus', { inserted (el, binding) { // console.log(el); console.log(binding); el.focus(); } }); </script>
自定義局部指令
- 只能在當(dāng)前vue實(shí)例或組件內(nèi)使用
<input type="text" v-focus> // 自定義局部指令 new Vue({ el: '#app', data: {}, directives: { focus: { inserted (el) { el.focus(); } } } });
全局過(guò)濾器
- 全局過(guò)濾器可以在任意vue實(shí)例中使用
- 過(guò)濾器能在插值表達(dá)式和v-bind中使用啊片，通過(guò)管道符|連接數(shù)據(jù)
<div id="app"> <p :title="value | filterA">這是標(biāo)簽</p> </div> <script> //設(shè)置全局過(guò)濾器 Vue.filter('filterA',function (value) { return value.split('-').join('') }) var vm = new Vue({ //el綁定元素 el: '#app', data: { value: 'a-b-c', value2: [] } });
局部過(guò)濾器
- 局部過(guò)濾器只能在當(dāng)前vue實(shí)例中使用
<div id="app"> <p :title="value | filterA">這是標(biāo)簽1</p> </div> <script> var vm = new Vue({ //el綁定元素 el: '#app', //局部過(guò)濾器 filters:{ filterA: function (value) { return value.split('-').join('') } }, data: { value: 'a-b-c', } }); </script>
計(jì)算屬性
- vue.js的視圖不建議書(shū)寫(xiě)復(fù)雜邏輯，這樣不利于維護(hù)
- 計(jì)算屬性使用時(shí)為屬性形式玖像，訪(fǎng)問(wèn)時(shí)會(huì)自動(dòng)執(zhí)行對(duì)應(yīng)函數(shù)
methods與computed區(qū)別
- computed具有緩存性紫谷，methods沒(méi)有
- computed通過(guò)屬性名訪(fǎng)問(wèn)，methods需要調(diào)用
- computed僅使用于計(jì)算操作
計(jì)算屬性的setter
- 計(jì)算屬性默認(rèn)只有g(shù)etter,vue.js也允許給計(jì)算屬性設(shè)置setter
<div id="app"> <p>{{fullname}}</p> </div> <script> var vm = new Vue({ //el綁定元素 el: '#app', data: { firstName: '張', lastName: '三' }, computed: { // fullname(){ // return this.firstName + this.lastName // } fullname: { get(){ return this.firstName + this.lastName }, set(newValue){ // console.log(newValue) var nameArr = newValue.split(' '); this.firstName = nameArr[0]; this.lastName = nameArr[1]; } } } });
偵聽(tīng)器
- 偵聽(tīng)器用于監(jiān)聽(tīng)數(shù)據(jù)變化并執(zhí)行指定操作
- 為了監(jiān)聽(tīng)對(duì)象內(nèi)部值的變化捐寥，需要將watch書(shū)寫(xiě)為對(duì)象笤昨，并設(shè)置選項(xiàng)deep:true,這時(shí)通過(guò)handler設(shè)置處理函數(shù)
- 當(dāng)更改數(shù)組和對(duì)象時(shí)，回調(diào)函數(shù)中的新值與舊值相同握恳，因?yàn)樗鼈兊囊枚贾赶蛲粋€(gè)數(shù)組瞒窒、對(duì)象
- 數(shù)組操作不要使用索引與length,無(wú)法觸發(fā)偵聽(tīng)器函數(shù)
<div id="app"> <input type="text" v-model="value"> <p>{{value}}</p> </div> <script> var vm = new Vue({ //el綁定元素 el: '#app', data: { value:'', }, watch: { value(){ console.log('執(zhí)行了偵聽(tīng)器') } } }); </script>
vue DevTools
- Vue.js官方提供的用來(lái)調(diào)試Vue應(yīng)用的工具
- 網(wǎng)頁(yè)必須應(yīng)用了Vue.js功能才能看到Vue DevTools
- 網(wǎng)頁(yè)必須使用Vue.js而不是Vue.min.js
- 網(wǎng)頁(yè)需要在http協(xié)議下打開(kāi)，而不是使用file協(xié)議本地打開(kāi)
生命周期
- 通過(guò)設(shè)置生命周期函數(shù)乡洼，可以在生命周期的特定階段執(zhí)行功能
- 初始化階段
- beforeCreate: 實(shí)例初始化之前調(diào)用
- created：實(shí)例創(chuàng)建后調(diào)用
- beforeMount: 實(shí)例掛載之前調(diào)用
- mounted： 實(shí)例掛載完畢
- 運(yùn)行階段
- beforeUpdate: 數(shù)據(jù)更新后根竿，視圖更新前調(diào)用
- updated: 視圖更新后調(diào)用
- 銷(xiāo)毀階段
- beforeDestroy: 實(shí)例銷(xiāo)毀之前調(diào)用
- destroyed: 實(shí)例銷(xiāo)毀后調(diào)用
