vue、路由、vuex使用点

发布时间:2017-7-1 11:21:15编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"vue、路由、vuex使用点 ",主要涉及到vue、路由、vuex使用点 方面的内容,对于vue、路由、vuex使用点 感兴趣的同学可以参考一下。

/*组件调用时候*/created() {    let _this = this;    console.log(this.$root.rootData)    console.log(this.$router)    debugger},

watch使用

///1********** data(){        return{            a:'',            bus:[                {a1:'',                    a2:[                        {b1:""},                        {b1:""}                    ]                }            ]        }  },methods:{        watchBus(newVal,oldVal){            debugger        },        fn2(){            debugger        }    },watch: {    bus:{handler:'watchBus',deep:true},    a:'fn2'}///2********* data() {        return {            form: {                business: ''            }        }    },    watch: {        'form.business':'watchBus'    },    method:{        watchBus(newVal,oldVal){}    }    

eleRoute(饿了么路由的跳转)

http://element.eleme.io/#/zh-CN/component/menuhttps://github.com/ElemeFE/element/issues/897---------<el-menu default-active="2" class="el-menu-vertical-demo" :router="true"> -----    <el-menu-item index="2" :route="{path:'/logAnalysis/list'}">        <i class="el-icon-menu"></i>日志数据分析    </el-menu-item>    <el-submenu index="3">        <template slot="title">            <i class="el-icon-menu"></i>权限管理</template>        <el-menu-item index="3-1-1" :route="{path:'/role/user/index'}">            <i class="el-icon-setting"></i>用户管理        </el-menu-item>        <el-menu-item index="3-1-2" :route="{path:'/role/businessLine/add'}">            <i class="el-icon-setting"></i>业务线管理        </el-menu-item>

route

 //跳转 $router this.$router.push('index') this.$router.go(-1);  //跳转 this.$route.params  ..created() {    console.log(this.$route.params)}

Render 函数

https://cn.vuejs.org/v2/guide/render-function.html#JSX

路由元信息

http://www.jianshu.com/p/4ad2a6f7b6ff

全局钩子

const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {  // ...})

组件内的钩子 写在组件内

beforeRouteEnter // 不能 访问 thisbeforeRouteLeave

路由(某个)独享的钩子 写在路由表内

export default [    {        path: '',        redirect: '/index',    },    {        path: '/index',        component: main,        // beforeEnter(to, from, next){        //     debugger        //     next()        // }    },

滚动特效

导航完成后获取数据

滚动行为

路由懒加载

vueRoute Namedview 命名视图 和视图的基本使用对比

https://jsfiddle.net/posva/6du90epg/

store

  this.$store.commit('SETCURRENTDIMENSION', mainDemitions)            console.log(this.$store.state.currentDimension);
 inline block  间距问题 父容器font-size:0px; 里面inline-block:14px; 建议换成float

修改prop是被视作反模式的

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "compShow"http://lvyongbo.net/2016/09/27/%E7%AA%BA%E6%8E%A2Vue2/这是因为在vue2中,直接修改prop是被视作反模式的。

store api

 export default {    state: {        currentDimension: []    },    mutations: {        SETCURRENTDIMENSION(state, value) {//this.$store.commit('fn',2) console.log(store.state.a)//->2            state.currentDimension = value;        }    },    actions: {        fn(){            store.commit('MUTATIONS', payload)            store.dispatch('action', payload)            store.registerModule(string, Module)            store.hotUpdate({})            store.string()        }    }};

css selector

css选择
温故 less 变换 过度 动画
aaa   xx  


上一篇:2017 33 款iOS开源库
下一篇:UML类图

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款