Vue中發(fā)ajax的時(shí)機(jī):要趁早
應(yīng)該在created鉤子函數(shù)中發(fā)起請(qǐng)求,這樣可以并行的做一些其他的事情,等到頁(yè)面掛載好,數(shù)據(jù)也請(qǐng)求回來(lái)了.
如果實(shí)在mounted鉤子函數(shù)中發(fā)起請(qǐng)求,那么,當(dāng)時(shí)用戶已經(jīng)可以看到頁(yè)面的假數(shù)據(jù)或者空數(shù)據(jù),然后才會(huì)顯示從數(shù)據(jù)庫(kù)查詢出的正常數(shù)據(jù),造成數(shù)據(jù)閃爍,用戶體驗(yàn)不好.
使用vue-resource模塊,做根路徑默認(rèn)配置
使用方式:
this.$http.get("api/getproplist").then(result=>{...})
啟用全局emulateJSON配置,用于轉(zhuǎn)換post提交的編碼方式
動(dòng)畫:
分為兩個(gè)半場(chǎng)動(dòng)畫
進(jìn)入動(dòng)畫
初始(v-enter)狀態(tài) opacity:0
進(jìn)入之后終止(v-enter-to)狀態(tài) opacity:1
進(jìn)入動(dòng)畫過(guò)程 v-enter-active
離開動(dòng)畫
離開之前(v-leave)狀態(tài) opacity:1
離開之后(v-leave-to)狀態(tài) opacity:0
離開動(dòng)畫過(guò)程 v-leave-active
其中v-enter和v-leave-to樣式差不多
v-enter-to和v-leave樣式差不多
使用<transition>標(biāo)簽把需要控制的標(biāo)簽包裹起來(lái).再通過(guò)style樣式進(jìn)行更改動(dòng)畫顯示
其中 <transition>標(biāo)簽中的name屬性,可以修改樣式的前綴,(v-enter --> my-enter),用于和其他動(dòng)畫樣式做區(qū)分.
使用第三方的css實(shí)現(xiàn)動(dòng)畫效果(animated.css),可以使用duration來(lái)設(shè)置動(dòng)畫時(shí)長(zhǎng).
使用javascript鉤子函數(shù)來(lái)實(shí)現(xiàn)半場(chǎng)動(dòng)畫效果(僅包含入場(chǎng)動(dòng)畫)
下面的鉤子函數(shù)依次執(zhí)行
如果沒(méi)有顯示的調(diào)用done()函數(shù),那么動(dòng)畫效果會(huì)出現(xiàn)延遲.
注意:afterEnter(el){}這個(gè)鉤子函數(shù)中,this.flag=!this.flag,作用:隱藏小球,更重要的是強(qiáng)制把flag由true改成false,結(jié)束后半場(chǎng)動(dòng)畫,讓每次點(diǎn)擊都只執(zhí)行前半場(chǎng)動(dòng)畫.
對(duì)于<li>標(biāo)簽 應(yīng)該使用<transition-group>標(biāo)簽包裹
使用相應(yīng)的動(dòng)畫樣式
固定的動(dòng)畫模板
通過(guò)appear屬性實(shí)現(xiàn)頁(yè)面展示后,列表入場(chǎng)效果
組件:
為了拆分Vue實(shí)例的代碼量,能夠讓我們以不同的組件,來(lái)劃分不同的功能模塊,將來(lái)我們需要什么樣的功能,就可以去調(diào)用對(duì)應(yīng)的組件即可.
模塊化:從代碼邏輯的角度進(jìn)行劃分,方便代碼分層開發(fā),保證每個(gè)功能模塊的職能單一
組件化:從UI界面的角度進(jìn)行劃分的,前端的組件化,方便UI組件的重用.
定義全局組件的三種方式
創(chuàng)建組件的方式一:
使用Vue.extend 來(lái)創(chuàng)建全局的Vue組件
1.通過(guò)Vue.extend({})創(chuàng)建一個(gè)組件的模板對(duì)象
2.通過(guò)Vue.component()定義全局組件,將組件的模板對(duì)象注冊(cè)成具有名稱的組件,但是如果組件名采用駝峰命名,需要將大寫的駝峰改為小寫的字母,并且兩個(gè)單詞之間 使用 '-'連接,
如果不使用駝峰,直接拿名稱來(lái)使用即可.
創(chuàng)建組件的方式二:(通過(guò)字面量來(lái)直接創(chuàng)建)
創(chuàng)建組件的方式三:
和第二種相比,不用把標(biāo)簽寫在字符串中,防止出現(xiàn)錯(cuò)誤
采用<template>標(biāo)簽來(lái)提供HTML模板,然后通過(guò)id進(jìn)行引入,注意:<template>標(biāo)簽必須在Vue實(shí)例控制的標(biāo)簽范圍之外,并且只能有一個(gè)根元素.
定義實(shí)例內(nèi)部私有組件的方式:該Vue實(shí)例獨(dú)享這個(gè)組件,和filters,methods,directives一樣
和全局組件一樣,可以在template后直接寫html標(biāo)簽,也可以通過(guò)id引入<template>模板.
組件中的data,必須是一個(gè)方法,且返回值是一個(gè)對(duì)象,可以被template通過(guò)插值表達(dá)式來(lái)使用
關(guān)于為什么data必須是一個(gè)函數(shù):
如果在函數(shù)外部定義一個(gè)對(duì)象,在data函數(shù)中返回這個(gè)對(duì)象,那么,頁(yè)面在多次引入組件的時(shí)候,多個(gè)組件共享的是同一個(gè)對(duì)象,互相干擾,官方建議:在data函數(shù)中返回的對(duì)象必須是內(nèi)部的,即:return { count : 0 }
組件顯示切換(登錄|注冊(cè))
方式1:
可以通過(guò)flag標(biāo)簽,v-if和v-else指令進(jìn)行切換顯示.
缺陷:只能2個(gè)頁(yè)面進(jìn)行切換顯示.
方式2:
把<component>標(biāo)簽的 :is 屬性作為Vue實(shí)例中屬性,然后通過(guò)點(diǎn)擊事件進(jìn)行賦值更改,就可以實(shí)現(xiàn)組件位置切換顯示.
通過(guò)<transition>標(biāo)簽來(lái)為組件切換增加動(dòng)畫效果
