引子
前端三大框架:
+Angular Google
Angular.js(1.x)
Augular(2.x)
+React (組件化) Facebook
+Vue.js? 尤雨溪
架構(gòu)模式: MVVM MVC
正文
1.引入 cdn or npm
2.創(chuàng)建全局對(duì)象
new Vue({
el: '#id',? ? ? ? ? 獲取所需區(qū)域
template: '#id',? 綁定模板
data: { ? ? 保存數(shù)據(jù)
},
methods: {? ? 保存方法/函數(shù)
},
filters: { 定義過(guò)濾器(如將所有的數(shù)字之前加上$)
}
computed: { 計(jì)算屬性,
+內(nèi)部有g(shù)et獲取,set設(shè)置
1.get獲取是獲取原始數(shù)據(jù)的
2.set是在自定義的方法修改時(shí)才會(huì)調(diào)用,要傳參
注: 如果修改自定義的數(shù)據(jù),才會(huì)觸發(fā)set,過(guò)程為get-set-get,如果修改原始數(shù)據(jù)則只是會(huì)多次get;
+和methods的區(qū)別
1.computed中 獲取的是結(jié)果,methods中 獲取的是這個(gè)匿名函數(shù)
2.computed中有緩存,如果數(shù)據(jù)沒(méi)有發(fā)生改變,就不進(jìn)行計(jì)算;而methods則是通過(guò)調(diào)用它來(lái)事先計(jì)算
+如果直接寫(xiě)在{{}}顯示數(shù)據(jù)的過(guò)程中去改數(shù)據(jù),則太重了
}
watch{
+watch 監(jiān)控?cái)?shù)據(jù)是否發(fā)生變化
+watch 是異步的可以處理大量數(shù)據(jù)
+watch? 中直接用原始數(shù)據(jù)命名,當(dāng)數(shù)據(jù)發(fā)生改變時(shí)在匿名函數(shù)中傳參
}
})
3.指令與引入
{{ }}? 寫(xiě)入文本或是js表達(dá)式
{{值|過(guò)濾的方法}} 表示過(guò)濾,過(guò)濾的方法寫(xiě)在filters中
{{reserverMessage}} 在computed中加計(jì)算屬性
<template id = ' '>
<div>
1.template中寫(xiě)的html
2.在最外層必須寫(xiě)一個(gè)根節(jié)點(diǎn)
</div>
</template>
v-html = ' '? 在標(biāo)簽內(nèi)寫(xiě)入指令,即可識(shí)別標(biāo)簽
v-bind:url='url' 簡(jiǎn)寫(xiě)為冒號(hào)? ? 獲取屬性 動(dòng)態(tài)修改
v-show = 'seen' 加style='display = none' 獲取動(dòng)態(tài)布爾值
v-if = 'seen' 直接刪除標(biāo)簽 獲取動(dòng)態(tài)布爾值
v-if/v-else/v-else-if? 條件渲染?
+如果條件滿(mǎn)足就執(zhí)行v-if中的,否則執(zhí)行v-else中的
eg:?
? ? <div v-if="ok">
? ? ? ? <label>Username</label>
? ? ? ? <input placeholder="Enter your username" key='1'>
? ? </div>
? ? <div v-else>
? ? ? <label>Email</label>
? ? ? <input placeholder="Enter your email address" key='2'>
? ? </div>
v-on:事件名='函數(shù)名' 簡(jiǎn)寫(xiě)為@? 添加事件
v-model: 雙向數(shù)據(jù)綁定? data<====>視圖
v-for: 列表循環(huán)?
+要生成哪個(gè)標(biāo)簽就把v-for寫(xiě)在哪個(gè)標(biāo)簽上,
+v-for 是一種遍歷方法,可以遍歷數(shù)組也可以遍歷對(duì)象
+也可以寫(xiě)成v-for-of
<li v-for = '(item,index) in (數(shù)組名)'? :key = 'index'></li>
<li v-for = '(value,key) in (數(shù)組名)'? :key = 'key'></li>
+操作數(shù)組的方法
1.變異(操作原始數(shù)組)
pop,unshift,push,shift,slice(截取字符串),reverse,\
2.重塑(用新數(shù)組覆蓋原始數(shù)組)
concat(拼接數(shù)組),filter(過(guò)濾),map
this.arr = this.arr.concat();
v-cloak:與[v-cloak]:{display: none}結(jié)合使用,v-cloak內(nèi)部找到并改成display: block;
v-pre:? 使內(nèi)容以原始格式顯示,所以應(yīng)用場(chǎng)景就是,當(dāng)內(nèi)容有{{}}時(shí)也不被識(shí)別成vue的內(nèi)容
自定義指令:
一個(gè)指令定義對(duì)象可以提供如下幾個(gè)鉤子函數(shù) (均為可選)：
bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。
inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。
update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒(méi)有。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見(jiàn)下)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。
接下來(lái)我們來(lái)看一下鉤子函數(shù)的參數(shù) (即 el、binding、vnode 和 oldVnode)。
鉤子函數(shù)參數(shù)
指令鉤子函數(shù)會(huì)被傳入以下參數(shù)：
el：指令所綁定的元素，可以用來(lái)直接操作 DOM 。
binding：一個(gè)對(duì)象，包含以下屬性：
name：指令名，不包括 v- 前綴。
value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
oldValue：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無(wú)論值是否改變都可用。
expression：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中，表達(dá)式為 "1 + 1"。
arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
modifiers：一個(gè)包含修飾符的對(duì)象。例如：v-my-directive.foo.bar 中，修飾符對(duì)象為 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。移步 VNode API 來(lái)了解更多詳情。
oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。
除了 el 之外，其它參數(shù)都應(yīng)該是只讀的，切勿進(jìn)行修改。如果需要在鉤子之間共享數(shù)據(jù)，建議通過(guò)元素的 dataset 來(lái)進(jìn)行。
**key是作為一個(gè)對(duì)象的唯一標(biāo)識(shí)
Vue 的生命周期
+一共八件事
直接寫(xiě)\
beforeCreate(){
},
created(){ // 請(qǐng)求數(shù)據(jù)
},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforDestory(){},
destory(){},
其他寫(xiě)法
destory: function() {}
事件傳參
<div @click = 'myFun($event)'></div>
+在vue中要進(jìn)行事件傳參加小括號(hào)直接傳即可
+如果是event的話(huà)寫(xiě)成 $event 的形式
修飾符
事件修飾符
.stop 阻止事件冒泡
.prevent 阻止默認(rèn)事件
.capture 阻止事件捕獲
.self 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) 即事件不是從內(nèi)部元素觸發(fā)的
.once 事件只執(zhí)行一次 ******組件
+ 修飾符可以連寫(xiě)
+注意修飾符的順序
按鍵修飾符
.enter? ? 回車(chē)鍵
.tab tab鍵
.delete? ? 刪除和退格
.esc? ? ? ?
.space
.up
.down
.left
.right
<input v-on:keyup.enter>
<input @keyup.enter='事件名'>
+特別的,設(shè)置了部分常用的鍵
+自定義按鍵別名
自定義? filter drective 按鍵別名
+全局? filter
-? 定義一個(gè)全局對(duì)象('名字',傳參的匿名函數(shù)),注意一定要寫(xiě)在全局vue之前
Vue.filter('my-filter',function (value){
返回處理過(guò)后的值
charAt(下標(biāo))
})
+局部
- vue有屬性filters
filters: {
函數(shù)名: function (value) {
返回處理過(guò)后的值
注意函數(shù)和方法的區(qū)別
}
}
自定義指令 directive 指令
+ 全局
- Vue.directive('命令名字',funtion(value){
inserted: function(el) {
可獲取到該元素
el.focus()
}
})
+局部
new Vue({
el: '#box',
data:? {
},
directives: {
指令名: {
// inserted 自定義屬性?xún)?nèi)置必填,意為插入
inserted: function(el){
el.focus();
// 元素聚焦
}
}
}
})
