前端框架vue使用笔记

1.前言

vue作为最近前端比较火的次时代框架之一，是很有必要学习一下的。在做了两个实战项目后，总结记录一下自己的收获。想学习vue最好直接去官网看文档，非常的详细。

2.常用技巧

•  务必使用vue-cli构建工具来创建项目工程，目前常用的是基于webpack模板，自动帮你创建整个项目的结构和文件，非常方便。项目结构大致如下

--build   
--config  
--dist   //npm run build 之后再生成的目录
--src  
  --components   // 用于存放组件
  --page    //页面组件，由vue-router引入
  --router  //路由
  --store   // 数据流管理
  main.js   //入口文件
  app.vue   //主组件 
--static   //静态文件目录
.babelrc    
.gitignore  //git忽略上传文件
index.html  //静态文件入口
package.json

• 使用vue-router进行路由跳转，单页面应用必备神器。
• 使用axios进行前后台交互，就像使用ajax一样简单。 vue-resource已经过时了。
• 如果项目比较庞大，多个组件共用的状态和数据比较多，建议使用vuex进行状态管理。比起同时修改多个组件的数据方便多了。
• 如果多个组件具有某些相同的逻辑（比如data或者methods），可以使用mixins混入，以便抽象和复用。
• 父组件传递数据给子组件，只需在子组件标签使用v-bind指令传入，子组件通过props接收即可。
• 子组件传递数据个父组件稍微有些麻烦，需要子组件$emit一个事件，并带上参数，然后父组件在外面通过v-on监听这个事件，即可拿到参数的数据。
• 写代码之前，先想清楚哪些地方可以复用，尽量多抽象成组件；还有一些通用的方法，也可以拿出来单独放在一个js文件中，随导随用。
• 如果组件需要经常来回切换，可以加上<keep-alive>将组件包裹起来，以避免反复重渲染导致的性能问题。

 

 

3.常见错误

• 组件的data必须为函数，然后返回一个对象。如

  data(){
    return {
        a:1
        b:2
    };
  }        

  如果不返回函数会报错。原因是因为如果不是函数的话，同一个组件的不同实例会相互影响，返回函数会保证每个实例的data都是独立的。

• 子组件通过props接收的参数，不能直接修改，否则会报错(警告)。如果确实需要修改的，可以采用这种方法：

  props: {
        list: {
          type: Array,
          default: function(){ //为什么不直接返回[]？
            return [];
        }
   }, 
  data(){
  return {
      sList:this.list.slice(); //拷贝list的值，如果是对象可用Object.assign({},obj)或者JSON.parse(JSON.stringify(obj))）
  };
  }           

  上面的方法是在data里定义了一个新的字段来拷贝从props接收的参数，把它变成了子组件的局部参数，修改也不会影响到父组件。值得注意的是上面的红字注释，如果props字段的type是对象（或数组）的话，default需要一个函数来返回默认值。