美文网首页
临时笔记 Vue.js

临时笔记 Vue.js

作者: 利炳根 | 来源:发表于2020-08-21 10:10 被阅读0次

    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(function(){}),返回Promise对象。async function(){await this.nextTick()}

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

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

    相关文章

      网友评论

          本文标题:临时笔记 Vue.js

          本文链接:https://www.haomeiwen.com/subject/sdcjjctx.html