临时笔记 Vue.js

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’)

小工具类 util

CSS class
CSS动画库Animate.css
过滤钩子函数 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:初始化事件、数据观测，数据和data属性绑定。

created-beforeMount:有无el属性，vm.$mount(el)。template->render函数，优先级render->template->outerHTML。

beforeMount-mounted:Vue实例对象添加$el成员。替换DOM元素。

mounted: {{占位}}->数据

beforeUpdate-updated:数据改变，触发组件重新渲染

beforeDestroy:实例销毁煎，实例可用
destroyed:实例销毁后，解绑定/监听器移除/子实例销毁

响应式原理

JavaScript对象传入Vue实例作data选项，Vue遍历对象所有property，用Object.defineProperty转getter/setter。
组件实例对应watcher实例，记录数据property依赖。依赖项setter触发，通知watcher，重新渲染组件。

Vue不能检测数组和对象变化。
对象，property必须在data对象上存在才能转响。
已创建实例，不允许添加根级别响应式property。Vue.set(object, propertyName, value)向嵌套对象添加。
用原对象和新增property创建新对象，this.someObject = Object.assign({},this.someObject, {})

数组
Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
vm.items.splice(newLength)

声明响应式property
初始化实例前声明所有根级property(data:下第一级)

异步更新队列
异步执行DOM更新，侦听到数据变化，开启队列，缓冲(替换)同一事件循环所有数据变更。异步队列Promixe.then/MutationObserver/setImmediate/setTimeout(fn,0)。在下一个事件循环中刷新队列重新演染。Vue.nextTick(callback), 回调函数在DOM更新完成后调用。this. $nextTick(function(){}),返回Promise对象。async function(){await this.$ nextTick()}

常用函数
$emit 向父组件派发事件$ set 向响应式对象添加属性 target, propertyName/index, value
$delete$ on 监听自定义事件 name, data
$once 监听事件，只触发一次，触发后移除$ off 移除事件监听可指定事件回调
$refs 引用信息注册在父组件$ refs对象上，作为渲染结果创建，初始渲染不能访问，不是响应式。

{{}}
v-once
v-html
v-bind:[attributeName]
v-if
v-on:[eventName]
null值会移除绑定
属性名全小写