Vue.js框架总结(一)

1：Vue实例中的data属性使用
https://blog.csdn.net/fengjingyu168/article/details/72900624

为什么在大型项目中需要使用return返回数据呢？

因为不适用return包裹的数据会在项目的全局可见，会造成变量污染，使用return包裹的数据中变量只在当前组件中生效，不会影响其他组件

2：为什么在export default要写个name: ‘Bar’ 为了方便确定错误在哪

3：Vue.use(Router) Vue.use(vueResource) 注入依赖初始化数据

4：路由配置和子路由配置

import Vue from 'vue'
import Router from 'vue-router'
// 先引入vue 和 router
// 再引入对应的路由的模板
import login from '@/components/login'
import home from '@/components/home'
import home1 from '@/components/home1'
import home2 from '@/components/home2'
// 注入依赖
Vue.use(Router)
Vue.use(vueResource)
// 配置路由
export default new Router({
  routes: [
    {  // 可以直接使用path 访问该路由 也可以使用name
      path: '/',
      name: 'login',
      component: login // 上面引入的模板
    },
    {
      path: '/home', // home页面有两个子组件 分别为home1 和 home2
      component: home,
      name: 'home',
      redirect: '/home/home1',
      children: [
        {
          path: '/home/home1',
          component: home1,
          name: 'home1'
        },
        {
          path: '/home/home2',
          component: home2,
          name: 'home2'
        }
      ]
    }
  ]
})

5：Vue.config.productionTip = false
设置来关闭生产模式下给出的提示

6：Vue.prototype.$ajaxj=axios
将axios挂载到Vue原型上方便调用

7：export default vuexStore;
使export default封装，让外部可以访问

8：var vuexStore=new Vuex.Store({ })
实例化vuex状态库

Vue.js框架总结(一)

猜你喜欢