此筆記是我在拉勾學習課程過程中的總結(jié)疆虚，文字原創(chuàng)竹揍，筆記里很多技巧和知識是老師總結(jié)的太惠，如果有侵權(quán)蓝丙，請聯(lián)系本人级遭！
vue框架基礎(chǔ)
vue.js簡介
傳統(tǒng)網(wǎng)頁開發(fā)
請求數(shù)據(jù)->生成結(jié)構(gòu)->監(jiān)聽變化
元素變化->發(fā)送請求->更新結(jié)構(gòu)
DOM操作與邏輯代碼混合，可維護性差渺尘，模塊之間依賴關(guān)系復雜挫鸽，
vue.js
漸進式 JavaScript框架
vue.js核心特性
數(shù)據(jù)驅(qū)動視圖
數(shù)據(jù)變化自動更新到對應元素，無需操作dom鸥跟，稱為單向數(shù)據(jù)綁定
-
對于輸入框等可輸入元素丢郊，可設(shè)置雙向數(shù)據(jù)綁定
·雙向數(shù)據(jù)綁定在數(shù)據(jù)綁定的基礎(chǔ)上，可以自動元素輸入內(nèi)容更新給數(shù)據(jù)，實現(xiàn)數(shù)據(jù)與元素內(nèi)容的雙向綁定
實現(xiàn)原理
vue.js的數(shù)據(jù)驅(qū)動視圖基于MVVM模型實現(xiàn)
-
MVVM(Model – View – ViewModel )是一種軟件開發(fā)思想
model層蚂夕，代表數(shù)據(jù)
view層代表視圖模板
viewmodel層迅诬，代表業(yè)務邏輯處理代碼
優(yōu)缺點
基于MVVM模型實現(xiàn)了數(shù)據(jù)驅(qū)動解放DOM操作
view與model處理分離，降低代碼耦合
雙向綁定bug調(diào)試難度大
大型項目的view和model過多婿牍，維護成本高
組件化開發(fā)
允許封裝為自定義的HTML標簽，復用時書寫自定義標簽名即可
組件可以封裝結(jié)構(gòu)惩歉，邏輯代碼等脂、樣式，提高了開發(fā)效率和可維護性撑蚌。
vue下載
本地引入
? 開發(fā)版本：https://cn.vuejs.org/js/vue.js
? 生產(chǎn)版本：https://cn.vuejs.org/js/vue.min.js
cdn 引入
? 最新穩(wěn)定版： https://cdn.jsdelivr.net/npm/vue
? 指定版本：
https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js
npm 安裝
? 最新穩(wěn)定版：
? npm install vue
? 指定版本
? npm install vue@2.6.12
基礎(chǔ)語法
vue實例
通過vue函數(shù)創(chuàng)建的對象上遥，是vue功能的基礎(chǔ)
var vm = new Vue({
//選項內(nèi)容
})
el選項
用于選取一個DOM 元素作為vue實例掛載目標
只有掛載在元素內(nèi)部才能被vue處理，外部為普通的html元素
代表mvvm中的view層
設(shè)置方式
- 可以為css選擇器格式的字符串或者HTMLElement實例争涌，但是不能為html或者body
并且不可為選中的類數(shù)組粉楚，只能是類數(shù)組中的某個元素
var vm = new Vue({
el:'#app'
})
var app = document.querySelector('#app');
var vm = new Vue({
el:app
})
掛載完畢后可以用vm.$el進行訪問
var vm = new Vue({
el:'#app'
})
console.log(vm.$el)
- 未設(shè)置el的vue實例，可以通過vm.$mount()進行掛載亮垫，參數(shù)形式與el規(guī)則相同
<!-- 掛載元素 -->
<div id="app"></div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app'
})
console.log(vm.$el);
var app = document.querySelector("#app");
var vm = new Vue({
el:app
})
console.log(vm.$el);
var app = document.getElementById('app');
var vm = new Vue();
// vm.$mount('#app');
vm.$mount(app);
console.log(vm.$el);
</script>
插值表達式
- 掛載元素可以使用Vue.js模板語法模软，模板中可以通過插值表達式進行動態(tài)內(nèi)容設(shè)置，寫法是{{}}
注意：
· 插值表達式只能書寫在標簽內(nèi)容區(qū)域饮潦，可以與其他內(nèi)容混合
· 內(nèi)部只能書寫JavaScript表達式燃异，不能寫語句
<div id="app">
<ul>
<li>第一段示例內(nèi)容：{{10 + 10 + 29}}</li>
<li>第二段示例內(nèi)容：{{ 22 > 3 ? '22比2大':'22比3小'}}</li>
<!-- <li id="{{ 1+2}}"></li> -->
<!-- <li>{{ var num = 10; }}</li> -->
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el:'#app'
})
</script>
data選項
-
用于存儲vue實例需要使用的數(shù)據(jù)，值為對象類型继蜡。
data本質(zhì)就是存儲數(shù)據(jù)
data中可以存儲對象回俐，可以存儲一個或多個數(shù)據(jù)以供視圖操作
操作數(shù)據(jù)：
data中的數(shù)據(jù)可以通過 vm.$data數(shù)據(jù) 或者 vm.數(shù)據(jù) 訪問
data中的數(shù)據(jù)可以直接在視圖中通過插值表達式訪問
data中的數(shù)據(jù)是響應式數(shù)據(jù)，發(fā)生改變時稀并，視圖自動更新
data中存在數(shù)據(jù)時仅颇，索引操作與length操作無法自動更新視圖，可以借助Vue.set()方法替代操作碘举。
<div id="app">
<!-- <p>{{ title }}</p> -->
<ul>
<li>{{ arr[0] }}</li>
<li>{{ arr[1] }}</li>
<li>{{ arr[2] }}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
// title:'標題文本'忘瓦，
arr : ['內(nèi)容1','內(nèi)容2','內(nèi)容3']
}
})
// vm.arr.pop()數(shù)組的操作依舊可以實現(xiàn)，但是length和索引功能無法使用
Vue.set(vm.arr,1,'這是新的內(nèi)容')
// vm.title = '這是新文本'
// 訪問data數(shù)據(jù)
console.log(vm.$data.title);
console.log(vm.title);
</script>
method 選項
用于存儲在vue實例中使用的函數(shù)
methods中的方法可以通過 vm.方法名 訪問
方法中的this為vm實例殴俱，可以便捷的訪問 vm 數(shù)據(jù)等功能
<div id="app">
<p>{{ title1.split('-').join('') }}</p>
<p>{{ title2.split('-').join('') }}</p>
<p>{{ fn(title1) }}</p>
<p>{{ fn(title2) }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
prefix:'處理結(jié)果為：',
title1:'a-b-c-d-e',
title2:'x-y-z'
},
methods:{
fn(value){
this.fn1();
this.fn2();
return this.prefix + value.split('-').join('');
},
fn1 () {
console.log('執(zhí)行了fn1');
},
fn2 () {
console.log('執(zhí)行了fn2');
}
}
})
console.log(vm);
</script>
vue.js指令
本質(zhì)是HTML自定義屬性政冻，是給框架識別的標記
以 v- 開頭的自定義屬性都是 vue 指令
內(nèi)容處理功能
v-once指令
- 使元素內(nèi)部的插值表達式只生效一次
<body>
<div id="app">
<p>此內(nèi)容會隨著數(shù)據(jù)變化而自動變化：{{content}}</p>
<p v-once>此內(nèi)容不會隨著數(shù)據(jù)變化而自動變化：{{content}}</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
content:'元素內(nèi)容'
}
})
</script>
v-text指令
- 元素內(nèi)容整體替換為指定純文本數(shù)據(jù)
<div id="app">
<p v-text="content">這是 p 標簽的原始內(nèi)容</p>
<p v-text="100">這是 p 標簽的原始內(nèi)容</p><!-- 一般不直接指定數(shù)值 -->
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
content:'文本內(nèi)容',
content2:'<span>這是span內(nèi)容</span>'
}
})
</script>
v-html指令
作用：
- 元素內(nèi)容整體替換為指定的 html 文本
<div id="app">
<p v-html="content">這是原始內(nèi)容</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data: {
// content:'這是新內(nèi)容',
content:'<span>這是span內(nèi)容</span>'
}
})
</script>
屬性綁定
v-bind指令
動態(tài)綁定HTML屬性
與插值表達式類似，v-bind中也允許使用表達式
如果一次綁定多個屬性线欲，還可以綁定對象
<div id="app">
<p v-bind:title="myTitle">這是p標簽內(nèi)容</p>
<p :title='myTitle'>這是p標簽的內(nèi)功</p>
<p :class="'num'+ 1 + 2 + 3">111</p>
<p :class="prefix + num">222</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
myTitle:'這是屬性',
prefix:'demo',
num:10
}
})
</script>
<div id="app">
<p v-bind="attrObj">這是 p 標簽的內(nèi)容</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vn = new Vue({
el:'#app',
data:{
attrObj:{
id : 'box',
title:"市里內(nèi)容",
class : "clearFix",
'datatitle': "這是data-title的內(nèi)容"
}
}
})
</script>
Class綁定
class可以通過v-bind綁定明场，也可以與class屬性共存
對于class綁定，vue.js中還提供了特殊處理方式
<div id="app">
<p v-bind:class="cls1">標簽內(nèi)容</p>
<p class="a" :class="cls2">標簽內(nèi)容</p>
<!-- 下面是錯誤寫法 -->
<!-- <p class="a b c" :class="cls1 cls2 cls3"></p> -->
<!-- <p :class='cls'></p> -->
<!-- <p :class="bool ? cls1 : cls2"></p> -->
<p :class='{x: isX, y: false, z: true}'></p>
<p :calss='["a", classB,{c: isC}]'></p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
classB: 'B',
isC: true
// bool:'ture',
// cls:'q e w',
// cls1: 'x',
// cls2: 'y',
// cls3: 'z'
}
})
</script>
Style綁定
style 是 HTML屬性李丰，可以通過v-bind進行綁定苦锨，并且可以與style屬性共存。
當我們希望給元素綁定多個樣式對象時，可以設(shè)置為數(shù)組
<div id="app">
<p :style="[baseStyle, styleObj1]">第一個 p 標簽</p>
<p :style="[baseStyle, styleObj2]">第二個 p 標簽</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
// 公共樣式
baseStyle: {
width: '100px',
height: '100px'
},
styleObj1: {
backgroundColor: 'red'
},
styleObj2: {
backgroundColor: 'blue'
}
}
});
</script>
渲染指令
v-for 指令
用于遍歷數(shù)據(jù)渲染結(jié)構(gòu)舟舒，常用數(shù)組與對象均可遍歷
使用v-for 的同時拉庶，應該始終指定唯一的 key 屬性，可以提高渲染性能秃励，避免出現(xiàn)綁定的錯誤
<div id="app">
<ul>
<li v-for="(item , index) in itemList" :key="item.id">
輸入框{{ item.value }}: <input type="text">
</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
itemList: [
{
id:1,
value: 2
},
{
id: 2,
value:3
},
{
id: 3,
value: 3
}
]
}
})
</script>
- 通過<template>標簽設(shè)置模板占位符氏仗，可以將部分元素或內(nèi)容作為整體進行操作
<div id="app">
<!-- template無法設(shè)置key綁定，因其只是占位夺鲜，并不存在 -->
<template v-for="utem in obj">
{{utem}}
<br>
</template>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
obj: {
content1: '內(nèi)容1',
content2: '內(nèi)容2',
content3: '內(nèi)容3'
}
}
})
</script>
v-show 指令
- 控制元素顯示與因此皆尔，用于顯示隱藏的頻繁切換，布爾類型：true控制顯示币励，false控制隱藏
注意：
<template></template>無法使用 v-show 指令
<div id="app">
<p v-show="false">標簽內(nèi)容</p>
<p v-show="22 > 11">標簽內(nèi)容</p>
<p v-show="bool">標簽內(nèi)容</p>
<template v-show='false'>這是內(nèi)容</template>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
bool: true
}
});
</script>
v-if 指令
- 用于根據(jù)條件控制元素的創(chuàng)建與移除
<div id="app">
<!-- 不適合用于元素的隱藏與顯示慷蠕，只適合元素的移除和創(chuàng)建，因為頻繁操作DOM較消耗內(nèi)存 -->
<p v-if='bool'>這是標簽內(nèi)容</p>
<p v-else-if="false">這是第二個p標簽</p>
<p v-else-if="false">這是第三個p標簽</p>
<p v-else>這是最后一個p標簽</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
bool: false
}
});
</script>
- 給使用 v-if 的同類型元素綁定各不同的 key
<div id="app">
<div v-if = "type==='username'" :key="'username'">
用戶名：<input type="text">
</div>
<div v-else :key='email'>
郵箱：<input type="text">
</div>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
bool: true,
type: 'username'
}
});
</script>
- 出于性能考慮 食呻，避免v-if和 v-for用于同一標簽流炕，v-for的優(yōu)先級高于if,如果放在同一標簽，for會先執(zhí)行仅胞，如果執(zhí)行后發(fā)現(xiàn)if是false每辟，就會浪費性能
<div id="app">
<ul v-if="false">
<li v-for="item in items">{{item}}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
items: {
content1: '內(nèi)容1',
content2: '內(nèi)容2',
content3: '內(nèi)容3'
}
}
});
</script>
事件與表單處理
事件處理v-on指令
用于元素事件綁定
簡化書寫方式@click，或者@加其他的觸發(fā)形式
事件代碼復雜饼问，可以在methods中設(shè)置函數(shù)影兽，并設(shè)置為事件處理程序
設(shè)置事件后，可以接受事件對象
視圖中可以通過 $event 訪問事件對象
<div id="app">
<p >{{ content }}</p>
<button v-on:click="content='0這是新內(nèi)容'">按鈕1</button>
<button @click="content='這是這是新內(nèi)容'">按鈕2</button>
<button @click="fn">按鈕3</button>
<!-- 傳入fn2函數(shù)和實參莱革，$event是vue規(guī)定的事件對象峻堰，不可更改 -->
<button @click='fn(200, $event)'>按鈕4</button>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
content:'這是默認內(nèi)容'
},
method: {
//fn函數(shù)
fn () {
this.content = '這是按鈕3設(shè)置的內(nèi)容';
},
fn2(value, event) {
console.log(value, event);
}
}
})
</script>
表單輸入綁定 v-model
- 用于給<input>、<textarea>以及<select> 元素設(shè)置雙向數(shù)據(jù)綁定
輸入框綁定
- 單行綁定input和多行輸入框textarea
<div id="app">
<p>input 輸入框內(nèi)容：{{ value1 }}</p>
<input type="text" v-model="value1">
<p>input 輸入框內(nèi)容：{{ value2 }}</p>
<input type="text" v-model="value2">
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value1: '',
value2: ''
}
});
</script>
單選按鈕綁定
單選按鈕雙向數(shù)據(jù)綁定
- input 標簽中type為radio的元素盅视，把多個同一組的單選按鈕綁定為同一值
<div id="app">
<!-- p中展示的值就是單選框中value的值 -->
<p>radio的值為{{ value3 }}</p>
<input type="radio" id="one" value="1" v-model="value3">
<label for="one">按鈕1</label>
<input type="radio" id="two" value="2" v-model="value3">
<label for="tow">按鈕2</label>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value3: ''
}
});
</script>
復選框綁定
<div id="app">
<!-- 單個復選框進行雙向數(shù)據(jù)綁定的演示 -->
<!-- 單個復選框選中時捐名，綁定展示的數(shù)據(jù)是true和false -->
<p>單個復選框的值：{{ value4 }}</p>
<input type="checkbox" id="one" v-model="value4">
<label for="one">選項1</label>
<!-- 多個復選框進行雙向數(shù)據(jù)綁定的演示 -->
<!-- 多個復選框選擇，選中時闹击，value5展示的是數(shù)組的值 -->
<p>多個復選框的值：{{ value5 }}</p>
<input type="checkbox" id="cb1" value="選項1" v-model="value5">
<label for="cb1">選項2</label>
<input type="checkbox" id="cb2" value="選項2" v-model="value5">
<label for="cb1">選項3</label>
<input type="checkbox" id="cb3" value="選項3" v-model="value5">
<label for="cb1">選項4</label>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value4: '',
value5: []
}
});
</script>
選擇框綁定
- 單選綁定和多選綁定
<div id="app">
<!-- 單選選擇框 -->
<p>單選選擇框的內(nèi)容： {{value6}}</p>
<select name="" id="" v-model="value6">
<option value="">請選擇</option>
<option value="1">選項1</option>
<option value="2">選項2</option>
<option value="3">選項3</option>
</select>
<!-- 多選選擇框 -->
<p>多選選擇框的內(nèi)容：{{ value7 }}</p>
<!-- 多選框要加一個mutiple屬性 -->
<select name="" id="" v-model="value7" multiple>
<option value="1">選項1</option>
<option value="2">選項2</option>
<option value="3">選項3</option>
</select>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
// 單選選擇框數(shù)據(jù)
value6: '',
// 多選選擇框數(shù)據(jù)
value7: []
}
});
</script>
v-model指令小結(jié)
設(shè)置數(shù)據(jù)時镶蹋，可以設(shè)置為空字符串或者空數(shù)組
input：綁定字符串值
textarea：綁定字符串值
radio：綁定字符串值
checkbox：單個綁定布爾值，多個綁定數(shù)組
select：單選綁定字符串赏半，多選綁定數(shù)組
修飾符
以點開頭的指令后綴贺归，用于給當前指令設(shè)置特殊操作
事件修飾符
**.prevent修飾符，用于阻止默認事件行為断箫。**
<div id="app">
<a @click.prevent="fn" >鏈接</a>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn () {
console.log('這是 a 鏈接的點擊事件');
}
}
});
</script>
**.stop修飾符 用于阻止事件傳播 防止冒泡拂酣，相當于event.stopPropagation()**
<div id="app">
<div @click="fn1">
<!-- 阻止事件冒泡 -->
<!-- <button @click.stop = "fn2">按鈕</button> -->
<a @click.prevent.stop = "fn2" >鏈接</a>
</div>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn1 () {
console.log('div事件');
},
fn2 () {
// console.log('button事件');
console.log('a事件');
}
}
})
</script>
** once修飾符 用于設(shè)置事件只會觸發(fā)一次**
按鍵修飾符
按鍵碼是將按鍵的按鍵碼作為修飾符使用以表示按鍵的操作方式
除了內(nèi)容按鍵還有特殊按鍵如esc，enter仲义、delete等功能按鍵婶熬，應首選內(nèi)置別名剑勾，方便兼容。
如: .esc .enter .tab .delete. .space .up .down .left .right
<div id="app">
<!-- <input type="text" @keyup="fn"> -->
<!-- 97是數(shù)字1的keycode -->
<!-- <input type="text" @keyup.97="fn"> -->
<!-- 也可以直接用按鍵代替 -->
<input type="text" @keyup.a="fn">
<input type="text" @keyup.esc="fn">
<!-- 表示幾個按鍵有一個按下即可赵颅，或的關(guān)系 -->
<input type="text" @keyup.esc.a.b.c="fn">
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
// e和event等價
fn(e) {
console.log(e);
console.log("輸入了相應代碼");
}
}
});
系統(tǒng)修飾符
ctrl虽另、 alt、 shift系統(tǒng)按鍵饺谬，系統(tǒng)按鍵與其他按鍵組合使用
系統(tǒng)修飾符ctrl修飾符捂刺、 alt修飾符 、 shift修飾符
.exact修飾符允許控制有精確系統(tǒng)修飾符組合觸發(fā)事件
<button v-on:click.ctrl.exact='onclick'>按鈕</button>
<div id="app">
<!-- <input type="text" @keyup.17.q="fn"> -->
<input type="text" @keyup.ctrl.q="fn" v-model='inputValue'>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
fn (event) {
// console.log(event);
this.inputValue = '';
}
}
});
</script>
鼠標修飾符
- 可以決定由鼠標哪個鼠標按鍵完成
分為.left左鍵 .right右鍵 .middle中鍵
<div id="app">
<button @click.left="fn">按鈕1</button>
<button @click.right="fn">按鈕2</button>
<button @click.middle="fn">按鈕3</button>
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn() {
console.log('點擊了元素');
}
}
});
</script>
v-model修飾符
- .trim修飾符
用于自動過濾用戶輸入的首尾兩端的空格 - .lazy修飾符
用于將v-model觸發(fā)方式由 input 事件觸發(fā)更改為 change 事件觸發(fā)（指定操作觸發(fā)） - .number 修飾符
用于自動將輸入內(nèi)容轉(zhuǎn)換為數(shù)值募寨，如 無法被parseFloat()轉(zhuǎn)換叠萍，返回原始內(nèi)容
自定義指令
- 簡化dom操作，相當于對dom操作的一種封裝绪商，通過自定義指令，封裝一些dom功能
自定義全局指令
- 可以被任意 vue 實例或組件使用的指令
<div id="app">
<!-- v-focus是調(diào)用指令辅鲸，.a.b是給binding綁定信息 -->
<input type="text" v-focus.a.b="100+100">
</div>
<script src="lib/vue.js"></script>
<script>
// 自定義全局指令格郁，focus是指令的類型，directive是單數(shù)形式
Vue.directive("focus",{
// inserted是指插入元素時独悴，執(zhí)行回調(diào)函數(shù)
inserted(el, binding) {
// 打印綁定信息例书，綁定信息有很多屬性
console.log(binding);
// 執(zhí)行焦點函數(shù)
el.focus();
}
});
new Vue({
el: '#app',
data: {
}
});
</script>
自定義局部指令
- 在當前 vue實例或者組件內(nèi)使用的指令
鉤子函數(shù)：
bind：只調(diào)用一次，指令第一次綁定到元素使用
inserted：被綁定元素插入父節(jié)點時調(diào)用（僅保證父節(jié)點存在刻炒，但不一定被插入文檔中）
update：所在組件的VNode更新時調(diào)用决采，但是可能發(fā)生在其子 VNode 更新之前，指令的值可能發(fā)生了改變坟奥，也可能沒有
但是可以通過比較更新前后的值來忽略不必要的模板更新
<div id="app">
<input type="text" v-focus>
</div>
<div id="app2">
<input type="text" v-focus>
</div>
<script src="lib/vue.js"></script>
<script>
// 自定義局部指令
new Vue({
el: '#app',
data: {},
//這里是復數(shù)
directives:{
//注意此處指令名稱沒有雙引號了
focus: {
inserted(el) {
el.focus();
}
}
}
});
//新定義的就不會掛載自動獲取焦點功能
new Vue({
el:'#app2'
})
</script>
過濾器
全局過濾器
用于進行文本內(nèi)容格式化树瞭，可以在插值表達式和 v-bind 中使用
全局過濾器可以在任意 vue 實例中使用
過濾器通過管道符 | 連接數(shù)據(jù)
可以將一個數(shù)據(jù)傳入到多個過濾器中處理
<div id="app">
<!-- 執(zhí)行順序是從前往后一次執(zhí)行過濾器,前面過濾器執(zhí)行完畢之后將值傳給后面的過濾器 -->
<!-- <p>{{ aaa | filterA | UpperCase }}</p> -->
<!-- 這里filter中的第一個參數(shù)始終是管道符前的變量，后面會依次作為第二個第三個參數(shù)傳入 -->
<!-- <p>{{ aaa | filterC("abc","lagou-",200) }}</p> -->
</div>
<script src="lib/vue.js"></script>
<script>
// Vue.filter('filterA', function (aaa) {
// console.log(aaa);//a-b-c
// return aaa.split('-').join("");
// });
// // 過濾器是可以改名字的
// Vue.filter('UpperCase',function (aaa) {
// console.log(aaa);//abc
// return aaa[0].toUpperCase() + aaa.slice(1)
// });
Vue.filter("filterC",function (par1,par2,par3,par4) {
return par1 + par2.split('-').join("") + par3 + par4;
// console.log();
})
new Vue({
el: '#app',
data: {
aaa:'a-b-c'
}
});
</script>
局部過濾器
- 只用在當前 vue 實例中
注釋中寫了很多有用的東西
<div id="app">
<!-- <p>{{ content | filterA}}</p>
<p>{{ content2 | filterA}}</p> -->
<p>{{ content | filterA | filterB}}</p>
<p>{{ content | filterA | fliterC('lagou-')}}</p>
</div>
<!-- <div id="app2">
<p>{{ content | filterA }}</p>
</div> -->
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
content: 'a-b-c',
content2: 'x-y-z'
},
// 局部過濾器需要filters爱谁，復數(shù)
filters: {
filterA : function (value) {
return value.split('-').join("");
},
filterB : function (value) {
return value.split('').reverse().join('');
},
// 接收多個參數(shù)
fliterC (value,prefix) {
//記住第一個參數(shù)一定是管道符前的內(nèi)容
// return value + prefix;
return prefix + value;
}
}
});
new Vue({
el: '#app2',
data: {
content: 'q-w-e'
}
})
</script>
全局過濾器與局部過濾器共同存在且 重名 的情況晒喷，局部過濾器 生效，可以利用此方法層疊掉不用的過濾器
計算屬性
vue.js 視圖不建議書寫復雜邏輯访敌，這樣不利于維護
計算屬性使用時為屬性形式凉敲，訪問是自動執(zhí)行對應函數(shù)
方法名就是計算屬性的屬性名稱，功能就是函數(shù)執(zhí)行的操作
<div id="app">
<p>{{ getSum() }}</p>
<p>{{ getSum() }}</p>
<p>{{ getSum() }}</p>
<p>{{getResult}}</p>
<p>{{getResult}}</p>
<p>{{getResult}}</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5]
},
methods: {
getSum () {
console.log('執(zhí)行了函數(shù)功能');
var arr = this.arr;
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
},
computed: {
getResult () {
console.log('執(zhí)行了計算屬性');
var arr = this.arr;
var sum = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
}
})
</script>
-
method與computed區(qū)別
· computed 具有緩存性寺旺，每次計算之后緩存結(jié)果爷抓，methods沒有
· computed 通過屬性名訪問，methods需要調(diào)用
· computed 僅適用于計算操作
計算屬性的setter
計算屬性默認只有g(shù)etter阻塑，vue.js也允許給計算屬性設(shè)置setter
用于給comtped進行賦值和獲取
<div id="app">
<p>{{ fullName }}</p>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: '張',
lastName: '三'
},
computed: {
// 默認書寫方式
// fullName () {
// return this.firstName + this.lastName;
// }
// 分開書寫getter和setter
fullname () {
get() {
return this.firstName + this.lastName;
},
set(newName) {
var nameArr = newName.split(" ");
this.firstName = nameArr[0];
this.lastName = nameArr[1];
}
}
}
});
</script>
偵聽器
用于監(jiān)視數(shù)據(jù)變化并執(zhí)行操作
為了監(jiān)聽對象內(nèi)部值的變化蓝撇，需要將watch書寫為對象，設(shè)置deep：true叮姑，這是通過handler設(shè)置處理函數(shù)
注意：
- 當更改（非替換）數(shù)組或?qū)ο髸r唉地，回調(diào)函數(shù)中新值與舊值相同据悔，因為他們的引用都指向同一數(shù)組、對象耘沼。
- 數(shù)組操作不要使用length和索引极颓，無法觸發(fā)偵聽器函數(shù)
<div id="app">
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
title:'這是普通內(nèi)容',
obj:{
content1:'內(nèi)容1',
content2:'內(nèi)容2'
}
},
watch: {
//修改title內(nèi)容
title(val,oldval) {
console.log('title被修改了',val,oldval);
},
//無法監(jiān)聽對象內(nèi)部值的變化
// obj (){
// console.log('obj 被修改了');
// }
// 可以將函數(shù)改寫為對象形式
obj: {
//必須設(shè)置監(jiān)聽器為deep：true才能監(jiān)聽對象內(nèi)部
deep:true,
handler (val,oldVal) {
console.log('obj被監(jiān)聽了',val,oldval);
console.log(val === oldval);//true
}
},
// arr在監(jiān)聽中，length和索引是不生效的群嗤，且可以不用deep:true,
arr: {
deep:true,
handler (val,oldVal) {
console.log('arr修改了',val,oldVal);
}
},
// 與上面等價
// arr(val,oldVal) {
// console.log('arr修改了',val,oldVal);
// }
}
});
</script>
Vue DevTools
- 是vue.js官方提供的用來調(diào)試vue應用的工具
注意：網(wǎng)頁必須應用了vue.js功能才能看到
網(wǎng)頁必須使用了vue.js而不是vue.min.js
網(wǎng)頁必須在http協(xié)議下打開菠隆，而不是使用 file 協(xié)議本地打開
vue.js生命周期
- 實例從創(chuàng)建到運行，再到銷毀的過程
生命周期函數(shù)（鉤子）
-
創(chuàng)建階段：
· beforeCreate：實例初始化之前調(diào)用（很少用）· created： 實例創(chuàng)建后調(diào)用,data和methods創(chuàng)建完畢后 -- 數(shù)據(jù)請求和操作
· beforeMount：實例掛載錢調(diào)用狂秘，頁面模板未渲染
· mounted： 實例掛載完畢骇径，可執(zhí)行dom操作。
特點：每個實例只能執(zhí)行一次 -
運行階段：
· beforeUpdate：數(shù)據(jù)更新后者春，視圖更新前調(diào)用破衔。· updated：視圖更新后調(diào)用
特點：按需調(diào)用
-
銷毀階段：
· beforeDestroy:實例銷毀之前調(diào)用· destroy：實例銷毀之后調(diào)用
