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
过滤钩子函数 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()}
常用函数
set 向响应式对象添加属性 target, propertyName/index, value
on 监听自定义事件 name, data
off 移除事件监听 可指定事件 回调
refs对象上，作为渲染结果创建，初始渲染不能访问，不是响应式。
{{}}
v-once
v-html
v-bind:[attributeName]
v-if
v-on:[eventName]
null值会移除绑定
属性名全小写