vue项目总结

最近在研究vuex的用法，在GitHub上找到个入门的项目练手，以下就是我在此项目中遇到过的问题

感谢bailicangdu的vue2-happyfri项目

路由的写法

routes: [
    {
      path: '/',
      component: mainIndex,
      children: [
        {
          path: '',
          component: r => require.ensure([], () => r(require('../page/home')), 'home')
        },
        {
          path:'/item',
          component:r=>require.ensure([],()=>r(require('../page/item')),'item')
        },
        {
          path:'/score',
          component:r=>require.ensure([],()=>r(require('../page/score')),'score')
        }
      ]
    }
  ]


component:r=>require.ensure([],()=>r(require('../page/score')),'score') 表示按需加载，减少首屏加载渲染的时间

2、vuex是其中最难理解的，看了好久才弄明白
store下面有三个js文件分别是：index.js、mutations.js、action.js分别对应store的三个对象：state,mutations和actions

• state:用于存储数据，类似于vue实例的data属性
• mutations：用于递交变更，对state对象中的属性进行更改（同步）,触发方式是this.$store.commit(‘methodsName’)
• actions：用于进行递交异步更改，通过调用mutations实现对数据的更改（异步）,触发方式是 this.$store.dispatch(‘methodsName’)

vuex看起来听复杂，但只要你理解了本质就很容易理解了。state用于定义数据eg:state{num:1}定义了num=1;mutations定义数据的变化（对数据进行处理的方法）eg:num++或num--等；actions中通过commit调用mutations方法从而改变数据eg:commit('mutationNum')

3、es6的扩展运算符…

4、动态绑定class的语法

:class=”{‘has_choosed’:choosedNum == index}

以上就是我在这个项目中遇到的几个有问题的点，总结下勉励下自己。嘻嘻……