Vue.js
常用第三方庫 npm install | import from
滾動 better-scroll scrollToElement
滑動 swipper :options wiper-slide :key loop pagination navigation scrollbar
http axis get(url,{params:{}}).then.catch post(url,{}).then.catch all([]).then(axios.spread((acct,perms){})) axios({method:, url:, data:, responseType:,}).then(){} data: status: statusText: headers: config:
組件傳值 Vuex Vue.use(Vuex) export Vuex.Store(){state: actions:(ctx,data){ctx.commit(name,data)} mutations:(statue,data) getters:} computed:{…mapGetters}
進度條 nprogress router.beforeEach(to, from, next){NProgress.start() next()} router.afterEach(transition){NProgress.done()}
charts setOption({title:, tooltip:, xAxis:, yAxis, series:[{name:, type:, data:[]}]})
圖片懶加載 vue-lazyload Vue.use(VueLazyload, {preLoad:, error:, loading:, attempt:}) v-bind:->v-lazy
element rem less
excel file-saver/xlsx/xlsx-style/script-loader
高德地圖 vue-amap
日期 moment.js moment(value).format(‘YYYY-MM-DD’)
工具類 utility md5 sha1 sha256 hmac | base64encode base64decode escape unescape encodeURIComponent decodeURIComponent | accessLogDate logDate YYYYMMDDHHmmssSSS timestamp | isSafeNumberString toSafeNumber random | map log | split replace | strictJSONparse readJSONSync
小工具類 util
CSS class
CSS動畫庫Animate.css
過濾鉤子函數(shù) JS操作DOM
JS動畫庫Velocity.js
Webpack webpack.base.conf.js
Browserify
Vue.js devtools Chrome
id
export
Vue.component
el:
props:
data:
computed:
methods:
mounted:
template: {{}}
render: {}
v-on:click
生命周期
beforeCreate-created:初始化事件、數(shù)據(jù)觀測，數(shù)據(jù)和data屬性綁定。
created-beforeMount:有無el屬性，vm.$mount(el)。template->render函數(shù)，優(yōu)先級render->template->outerHTML。
beforeMount-mounted:Vue實例對象添加$el成員。替換DOM元素。
mounted: {{占位}}->數(shù)據(jù)
beforeUpdate-updated:數(shù)據(jù)改變，觸發(fā)組件重新渲染
beforeDestroy:實例銷毀煎，實例可用
destroyed:實例銷毀后，解綁定/監(jiān)聽器移除/子實例銷毀
響應(yīng)式原理
JavaScript對象傳入Vue實例作data選項，Vue遍歷對象所有property，用Object.defineProperty轉(zhuǎn)getter/setter。
組件實例對應(yīng)watcher實例，記錄數(shù)據(jù)property依賴。依賴項setter觸發(fā)，通知watcher，重新渲染組件。
Vue不能檢測數(shù)組和對象變化。
對象，property必須在data對象上存在才能轉(zhuǎn)響。
已創(chuàng)建實例，不允許添加根級別響應(yīng)式property。Vue.set(object, propertyName, value)向嵌套對象添加。
用原對象和新增property創(chuàng)建新對象，this.someObject = Object.assign({},this.someObject, {})
數(shù)組
Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
vm.items.splice(newLength)
聲明響應(yīng)式property
初始化實例前聲明所有根級property(data:下第一級)
異步更新隊列
異步執(zhí)行DOM更新，偵聽到數(shù)據(jù)變化，開啟隊列，緩沖(替換)同一事件循環(huán)所有數(shù)據(jù)變更。異步隊列Promixe.then/MutationObserver/setImmediate/setTimeout(fn,0)。在下一個事件循環(huán)中刷新隊列重新演染。Vue.nextTick(callback), 回調(diào)函數(shù)在DOM更新完成后調(diào)用。this.nextTick()}
常用函數(shù)
set 向響應(yīng)式對象添加屬性 target, propertyName/index, value
on 監(jiān)聽自定義事件 name, data
off 移除事件監(jiān)聽 可指定事件 回調(diào)
refs對象上，作為渲染結(jié)果創(chuàng)建，初始渲染不能訪問，不是響應(yīng)式。
{{}}
v-once
v-html
v-bind:[attributeName]
v-if
v-on:[eventName]
null值會移除綁定
屬性名全小寫
