框架和插件
- 框架不能輕易換，庫(kù)可以
MVC和MVVM
node（后端）中MVC：后端的分層開發(fā)概念
MVVM是前端視圖層的概念，主要關(guān)注視圖層分離，把前端視圖層分成三部分：Model、view、vm viewmodel
image
VUE基礎(chǔ)
一、數(shù)據(jù)與方法
- 當(dāng)數(shù)據(jù)改變時(shí)，視圖會(huì)進(jìn)行重渲染。值得注意的是只有當(dāng)實(shí)例被創(chuàng)建時(shí)就已經(jīng)存在于 data 中的屬性才是響應(yīng)式的。
- 使用 Object.freeze()，會(huì)阻止修改現(xiàn)有的屬性，也意味著響應(yīng)系統(tǒng)無(wú)法再追蹤變化。
var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj }) <div id="app"> <p>{{ foo }}</p> <!-- 這里的 `foo` 不會(huì)更新！ --> <button v-on:click="foo = 'baz'">Change it</button> </div>- 不要在選項(xiàng)屬性或回調(diào)上使用箭頭函數(shù)，因?yàn)榧^函數(shù)并沒有 this，this 會(huì)作為變量一直向上級(jí)詞法作用域查找，直至找到為止，經(jīng)常導(dǎo)致錯(cuò)誤。
-
動(dòng)態(tài)參數(shù)表達(dá)式：從 2.6.0 開始，可以用方括號(hào)括起來(lái)的 JavaScript 表達(dá)式作為一個(gè)指令的參數(shù)：
<a :[attributeName]="url"> ... </a>- 動(dòng)態(tài)參數(shù)表達(dá)式有一些語(yǔ)法約束，因?yàn)槟承┳址缈崭窈鸵?hào)，放在 HTML attribute 名里是無(wú)效的。
- 還需要避免使用大寫字符來(lái)命名鍵名，因?yàn)闉g覽器會(huì)把 attribute 名全部強(qiáng)制轉(zhuǎn)為小寫：
二、指令
- v-cloak <style>[v-cloak]{display:none }</style> 解決插值表達(dá)式閃爍問題
- v-text：沒有閃爍問題，會(huì)把標(biāo)簽中內(nèi)容覆蓋v-text=“msg”
- v-html：渲染成html
- v-once：只拿一次數(shù)據(jù)進(jìn)行顯示，后面數(shù)據(jù)更改，頁(yè)面不會(huì)跟著更改
- v-pre：不解析{{}}，直接顯示
事件修飾符
- 常見事件修飾符
- @click.stop=""----阻止事件冒泡
- @click.prevent ----阻止默認(rèn)行為
- @click.self ----只允許自身觸發(fā)
- @click.captures----實(shí)現(xiàn)捕獲觸發(fā)機(jī)制
- @click.once----只執(zhí)行一次
- @keyup.enter----回車鍵
- 使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。
三、按鍵修飾符
- Vue.config.keyCodes.f2 = 113 使用 @keyup.f2
- 為了在必要的情況下支持舊瀏覽器，Vue 提供了絕大多數(shù)常用的按鍵碼的別名： .enter、 .tab、 .delete (捕獲“刪除”和“退格”鍵)、 .esc、 .space、 .up、 .down、 .left、 .right
四、內(nèi)聯(lián)樣式style(v-bind，語(yǔ)法糖：)
- 對(duì)象就是無(wú)序鍵值對(duì)的集合 "{'color‘：’red'，'font-size':'50px'}"
- 直接傳遞對(duì)象，對(duì)象在data中定義
- 在data中定義多個(gè)樣式對(duì)象，以數(shù)組的方式傳給style
五、class類屬性(v-bind，語(yǔ)法糖：)
- 使用方式一：直接傳遞一個(gè)數(shù)組，數(shù)組中的需要單引號(hào) "['more','add']"
- 使用方式二： 在數(shù)組中使用三元表達(dá)式
"['more','add'，{'another':item.age<30}]" - 使用方式三：直接傳遞對(duì)象 “{active：true，thin：false}” 對(duì)象屬性為類名
六、條件渲染（v-if 、v-else-if、 v-else、v-show）
- v-if 每次都會(huì)重新創(chuàng)建或刪除
- v-show，不會(huì)重新創(chuàng)建或刪除，只是切換display屬性
- 元素涉及頻繁的切換，使用v-show。
七、列表渲染（v-for）
- v-for="( item, index ) in list"
- 順序：值-鍵-索引
- in后面放數(shù)組，表示循環(huán)幾次
- 在組件中使用v-for時(shí)，需要指定key屬性
- 如果不添加key，則在數(shù)組中新增元素的時(shí)候，創(chuàng)建虛擬dom會(huì)進(jìn)行對(duì)比，直接把原來(lái)4的li的值改成0000，4以后的往后移動(dòng)；添加以后會(huì)插入0000的li（提高性能）
<div id="app"> <ul> <li v-for="item in thingArray">{{item}}</li> </ul> <button @click="addItem">在3-4中間添加元素</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { thingArray: [1, 2, 3, 4, 5, 6, 7] }, methods: { addItem() { this.thingArray.splice(2, 0, '0000') console.log(this.thingArray) } } }) </script>
八、v-model的使用
<body>
<div id="main">
<input type="text" v-model="inputValue">
<span>輸入框的值是：{{inputValue}}</span>
<h3>2.v-model的原理</h3>
<input type="text" :value="inputValue" @input="changeInputValue">
<span>輸入框的值是：{{inputValue}}</span>
<h2>3.v-model和radio</h2>
<label for="male">
<input type="radio" id="male" name="sex" value="男" v-model="gender">男
</label>
<label for="female">
<input type="radio" id="female" name="sex" value="女" v-model="gender">女
</label>
<h5> ---您選擇的性別是：{{gender}}</h5>
<h2>4.v-model和checkbox</h2>
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">知情同意
</label>
<h4>是否選擇{{isAgree}}</h4>
<button :disabled="!isAgree">下一步</button>
<h2>5.v-model 和 checkbox的多選框</h2>
<label v-for="hobby in constHobby">
<input type="checkbox" :id="hobby" :value="hobby" :key="hobby" v-model="chooseHobby"> {{hobby}}
</label>
<h5>你選擇的愛好是：{{chooseHobby}}</h5>
<h2>6.v-model和select</h2>
<select name="" id="" v-model="selectHobby">
<option v-for="hobby in constHobby" :value="hobby" >{{hobby}}</option>
</select>
<h5>你選擇的愛好是：{{selectHobby}}</h5>
<h2>7.v-model和select多選</h2>
<select name="" id="" v-model="selectHobbyArray" multiple>
<option v-for="hobby in constHobby" :value="hobby" >{{hobby}}</option>
</select>
<h5>你選擇的愛好是：{{selectHobbyArray}}</h5>
<h2>8.v-model的修飾符</h2>
<!-- 懶加載，只有在按回車和失去焦點(diǎn)的時(shí)候會(huì)重新加載該數(shù)據(jù) -->
<input type="text" v-model.lazy="lazyValue">
<span>輸入框的值:{{lazyValue}}</span>
<!-- 去掉前后空格 -->
<input type="text" v-model.trim="trimValue">
<span>輸入框的值:{{trimValue}}</span>
<!-- 數(shù)據(jù)類型改為number -->
<input type="text" v-model.number="numberValue">
<span>輸入框的值:{{numberValue}} {{typeof numberValue}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#main",
data: {
inputValue: "111",
gender: "男",
isAgree: false,
constHobby: ['籃球', '羽毛球', '乒乓球', '足球'],
chooseHobby: [],
selectHobby: '籃球',
selectHobbyArray:[],
lazyValue:'',
trimValue:"",
numberValue:""
},
methods: {
changeInputValue(event) {
this.inputValue = event.target.value;
}
}
})
</script>
</body>
九、computed：計(jì)算屬性
- 包含本實(shí)例里面的變量發(fā)生變化觸發(fā)（數(shù)據(jù)聯(lián)動(dòng)）
- 在html中
<div id="box">
<label>firstName：</label><input type="text" v-model="firstName">+
<label>lastName：</label><input type="text" v-model="lastName">=
<label>fullName: </label><input type="text" v-model="fullName">
</div>
- 在JS中
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#box',
data:{
firstName: '',
lastName: ''
},
computed:{
//計(jì)算屬性的本質(zhì)是對(duì)象，有一個(gè)get方法和set方法，我們一般不同set方法（沒有set方法，相當(dāng)于一個(gè)只讀屬性）
fullName:{
get:function(){
return this.firstName+'-'+this.lastName
},
set:function(){}
}
// 沒有set方法，可以直接如下寫
fullName:function () {
return this.firstName+'-'+this.lastName
}
}
})
</script>
- 特點(diǎn)：
- 計(jì)算屬性在引用的時(shí)候，不需要加（）來(lái)調(diào)用，直接把他當(dāng)成是普通的屬性使用
- 和methods的區(qū)別：只要在計(jì)算屬性的function內(nèi)部，所用到的data中的數(shù)據(jù)發(fā)生變化，computed就會(huì)重新計(jì)算這個(gè) 計(jì)算屬性,當(dāng)觸發(fā)重新渲染時(shí)，調(diào)用方法將總會(huì)再次執(zhí)行函數(shù)。
- 計(jì)算屬性求值的結(jié)果會(huì)被緩存起來(lái)，方便下次使用；如果計(jì)算屬性方法中的數(shù)據(jù)沒有發(fā)生變化，則不會(huì)重新對(duì)這個(gè) 計(jì)算屬性 求值（computed種的屬性： 在頁(yè)面中使用四次，只會(huì)調(diào)用一次，其余使用緩存顯示）（methods 中的方法，在頁(yè)面中使用四次，會(huì)調(diào)用四次）
watch ：偵聽（異步場(chǎng)景）
- 通常更好的做法是使用計(jì)算屬性而不是命令式的 watch 回調(diào)
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#box',
data:{
firstName: '',
lastName: '',
fullName: ''
},
watch:{
firstName: function (newValue) {
this.fullName = newValue +'----'+ this.lastName
},
lastName: function (newValue) {
this.fullName = this.firstName +'----'+ newValue
}
}
})
</script>
- 上面代碼是命令式且重復(fù)的。
過濾器：
- 全局過濾器：Vue.filter('過濾器的名稱'，function (dateStr,formate) { } )
- 函數(shù)的第一個(gè)參數(shù)是管道前面?zhèn)鬟f過來(lái)的數(shù)據(jù)
- 私有的過濾器：new Vue({ el:'#box',data:{},
filters：{ dateFormate:function (dateStr, formate) {} } })
組件化
-
定義：為了拆分Vue實(shí)例的代碼量，能夠用不同的組件劃分不同的功能塊。
- 模塊化：從代碼邏輯的角度進(jìn)行劃分，方便代碼分層開發(fā)，保證模塊的職能單一。
- 組件化：從UI界面的角度進(jìn)行劃分，前端的組件化，方便UI組件的重用
-
創(chuàng)建組件的方式
- 創(chuàng)建方式一：使用Vue.extend({template:' '})來(lái)創(chuàng)建全局的組件。使用Vue.component('組件名稱'，創(chuàng)建出來(lái)的組件)
var myCompontnt = Vue.extend({ template:`<h2>這是用extend創(chuàng)建</h2>` }) Vue.component('myCompontnt',myCompontnt);Vue.component('myCompontnt',Vue.extend({ template:`<h2>這是用extend創(chuàng)建</h2>` }));
- 創(chuàng)建方式二：Vue.component('組件名稱'，組件的模板template)
Vue.component('myCompontnt',{ template:`<h2>這是用extend創(chuàng)建</h2>` }); - 創(chuàng)建方式三：將template寫在html中 Vue.component('組件名稱'，{template：'#id'})
-
組件注冊(cè)
Vue.component('my-component-name',{ /* ... */ })- 全局注冊(cè)： Vue.component('component-a',{ /* ... */ })在注冊(cè)之后可以用在任何新創(chuàng)建的 Vue 根實(shí)例 (new Vue) 的模板中
- 局部注冊(cè)：
-
var ComponentA = { /* ... */ } var ComponentB = { /* ... */ } var ComponentC = { /* ... */ } //components 選項(xiàng)中定義你想要使用的組件： new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB } })- 局部注冊(cè)的組件在其子組件中不可用
-
組件中的data
- 組件可以擁有自己的data數(shù)據(jù)，組件中的data是一個(gè)方法，而且必須返回一個(gè)對(duì)象
-
組件名的命名和使用
- 在使用駝峰命名定義一個(gè)組件時(shí)，在引用這個(gè)元素時(shí)使用kebab-case的方式。不使用駝峰則直接使用定義的名稱。
組件切換可以使用<component :is="存組件名稱的參數(shù)">通過改變參數(shù)
-
傳遞參數(shù)
- 父組件向子組件傳遞參數(shù)使用props
-
Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) /*使用*/ <todo-item v-for="item in groceryList" :todo="item" :key="item.id" ></todo-item>- props中的數(shù)據(jù)是只讀的，data中的數(shù)據(jù)是可讀可寫的
- prpos：使用駝峰命名法，在傳參時(shí)需要使用其等價(jià)的短橫線分隔命名
- prop 指定的值類型。以對(duì)象形式列出 prop。
props: { title: String } - 在JavaScript 中對(duì)象和數(shù)組是通過引用傳入的，所以對(duì)于一個(gè)數(shù)組或?qū)ο箢愋偷?prop 來(lái)說，在子組件中改變這個(gè)對(duì)象或數(shù)組本身將會(huì)影響到父組件的狀態(tài)。
- 子組件通過事件調(diào)用向父組件傳值
<div id="app7"> <childNode @func="show"></childNode> </div> <template id="temp1"><!--這是樣式--> <div> <h2>這里是子組件</h2> <input type="button" value="調(diào)用父組件函數(shù)" @click="emitfunction"> </div> </template> <script src="js/vue.js"></script> <script> Vue.component('childnode',{ template:'#temp1', data : function(){ return { user:[{id:1,name:'張三'},{id:2,name:'李四'}] } }, methods:{ emitfunction (){ this.$emit('func','111','222',this.user) } } }); var app7 = new Vue({ el:'#app7', data:{ msg:'父組件的數(shù)據(jù)', user:[] }, methods:{ show(msg1,msg2,data){ console.log('這是父組件的函數(shù)調(diào)用'+msg1+'---'+msg2) this.user = data console.log(this.user[0].id) } } }) </script> -
使用ref獲取組件元素和dom方法
<div id="app7"> <input type="button" value="使用ref" @click="getDomMesg"> <h2 ref="title">這是父組件的H2啊</h2> <childnode ref="child"></childnode> </div> <template id="temp1"> <div> <h2>這里是子組件</h2> </div> </template> <script src="js/vue.js"></script> <script> Vue.component('childnode',{ template:'#temp1', data : function(){ return { msg:'這是子組件的msg' } }, methods:{ show (){ console.log('調(diào)用了子組件的方法------') } } }); var app7 = new Vue({ el:'#app7', data:{ msg:'父組件的數(shù)據(jù)', user:[] }, methods:{ getDomMesg(){ console.log(this.$refs.title.innerText) console.log(this.$refs.child.msg) this.$refs.child.show() } } }) </script>
自定義全局指令
Vue.directive( 'focus',{
updated:function (el) { },//可執(zhí)行多次，當(dāng)VNode更新時(shí)使用
bind:function (el,bindding) { },//只執(zhí)行一次，當(dāng)指令綁定到元素時(shí)。第二個(gè)參數(shù)可獲得傳入的參數(shù)，bindding。value。和樣式有關(guān)的操作。
inserted:function (el) { el.focus() }//只執(zhí)行元素，當(dāng)元素插入dom中。和JS行為有關(guān)的操作在這執(zhí)行
})
- 定義私有指令
directives:{
'fontweight':{
bind:function (el,bindding){
el.style.fontWeight = bindding.value
}
}
}
- 簡(jiǎn)寫：
'fontsize':function (el,bindding) {
el.style.fontSize = parseInt(bindding.value) +'px'
}
生命周期
- 生命周期鉤子 = 生命周期函數(shù) = 生命周期事件
- 創(chuàng)建期間的生命周期函數(shù)
- beforeCreate： data和methods中的數(shù)據(jù)都還未被初始化
- created： data和methods中的數(shù)據(jù)初始化完成，調(diào)用數(shù)據(jù)和方法最早在這個(gè)方法中
- beforeMount：模板在內(nèi)存中已經(jīng)編輯好了，但是還沒渲染到頁(yè)面上，頁(yè)面中的元素還未被真正的替換，只是一些模板字符串。document.getElementbyId（‘info’）.innerText----->獲取不到
- mounted：實(shí)例創(chuàng)建期間的最后一個(gè)生命周期函數(shù)，實(shí)例完全創(chuàng)建好了，沒有其他操作的話，這實(shí)例就不變。操作dom節(jié)點(diǎn)最早在mounted
- 實(shí)例運(yùn)行期間的生命周期函數(shù)
- updated和beforeUpdate在data中數(shù)據(jù)發(fā)生改變時(shí)觸發(fā)0次或多次。
- beforeUpdate執(zhí)行時(shí)，頁(yè)面中的數(shù)據(jù)還是舊的，data中數(shù)據(jù)是最新的，頁(yè)面和最新的數(shù)據(jù)還未同步
- updated事件執(zhí)行時(shí)，界面和data已經(jīng)保持同步，都是最新的
- 銷毀階段的鉤子
- beforeDestroy：Vue實(shí)例從運(yùn)行階段進(jìn)入銷毀階段。實(shí)例上的所有data和methods以及過濾器、指令等都處于可用狀態(tài)，此時(shí)還未真正銷毀。
- destoryed。組件完全被銷毀。組件中所有的數(shù)據(jù)等都不可以用。
生命周期.png
v-resource發(fā)起get、post、jsonp請(qǐng)求
methods:{
getMessage (){
this.$http.get('http://vue.studyit.io/api/getlunbo').then(
( result ) => {
this.getMessageResult = result.body;
console.log(result.body)
})
},
postMessage () {
this.$http.post('http://vue.studyit.io/api/post',{headers:
{'Access-Control-Allow-origin': 'http://localhost:8080/resource'}},
{emulateJSON:true}).then(
( result ) => {
this.PostMessageResult = result.body;
console.log(result.body)
})
},
jsonpMessage (){
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(
( result ) => {
this.JsonpMessageResult = result.body;
console.log(result.body)
})
}
}
動(dòng)畫
圖片.png
- 在html中
<button @click="flag = !flag">toggle</button>
<transition>
<h2 v-show="flag">hello animation</h2>
</transition>
+在css中
<style>
.v-enter,
.v-leave-to{
transform: translateX(200px);
opacity: 0;
}
.v-enter-active,
.v-leave-active{
transition: all 0.8s ease;
}
</style>
- 在<transition name='disp'> 定義了name后，修改v-前綴為disp-
- 使用第三方類庫(kù)animate.css 在
<transition enter-active-class='animated bounceIn '> - 使用鉤子函數(shù)完成半場(chǎng)動(dòng)畫
- 在html中
<button @click="flag = !flag">加入購(gòu)物車</button>
<transition @before-enter="beforeEnter" @enter="Enter" @after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
- 在JS中
new Vue({
el:'#box',
data:{
flag:false
},
methods:{
beforeEnter (el){
el.style.transform = 'translate(0,0)'
},
Enter (el,done){
el.offsetLeft //沒有實(shí)際作用，但是不寫，沒有顯示動(dòng)畫效果
el.style.transform = 'translate(200px,300px)'
el.style.transition= 'all 1s ease'
done()//done是afterEnter函數(shù)的引用，不調(diào)用會(huì)延遲
},
afterEnter(el){//flag的作用是控制小球的隱藏和顯示；跳過后半場(chǎng)動(dòng)畫
this.flag = !this.flag//直接使用opacity無(wú)法實(shí)現(xiàn)該功能
}
}
})
- <transition-group>實(shí)現(xiàn)列表動(dòng)畫
<div id="box"> <label>Id : <input type="text" v-model="id"></label> <label>Name : <input type="text" v-model="name"></label> <button @click="add">添加</button> <ul> <transition-group> <li v-for="item in list" :key="item.id" @click="del(item.id)">{{item.id}} and {{item.name}}</li> </transition-group> </ul> </div>- style
<style> li{ width: 400px; height:30px; font-size: 20px; border: 1px dashed #999; margin: 5px; list-style: none; padding-left: 10px; } li:hover{ background-color: burlywood; } .v-enter,.v-leave-to{ opacity: 0; transform: translateY(80px); } .v-enter-active,.v-leave-active{ transition: all 3s ease; } .v-move{ transition: all 1s ease; } .v-leave-active{ position: absolute; } </style>
- style
- 動(dòng)畫-transition-group中appear和tag屬性的作用
- appear 實(shí)現(xiàn)頁(yè)面剛展示出來(lái)的時(shí)候的效果
- tag用來(lái)指定渲染成什么屬性，沒有添加默認(rèn)渲染成<span>屬性
- mode可以實(shí)現(xiàn)組件切換時(shí)進(jìn)出的先后順序
插槽
- 編譯作用域：父級(jí)模板里的所有內(nèi)容都是在父級(jí)作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的。
- 后備內(nèi)容（默認(rèn)的)內(nèi)容）
- 具名插槽 <slot> 元素有一個(gè)特殊的特性：name
- 任何沒有被包裹在帶有 v-slot 的 template>中的內(nèi)容都會(huì)被視為默認(rèn)插槽的內(nèi)容。任何沒有被包裹在帶有 v-slot 的 template>中的內(nèi)容都會(huì)被視為默認(rèn)插槽的內(nèi)容。
- 插槽prop
<slot v-bind:user="user">{{ user.lastName }} </slot> - v-slot也有縮寫，字符 “#”
