vue踩坑之旅

1.vue项目外部js（es5，es6）,css文件的引入；
  方法一：
      在index.html通过script ，link标签引入，要将文件先放入static文件夹（静态资源）下， 注意不能放src下
  方法二：
      如果是es6,参照export和import来引入；
      css文件如果放在src文件夹下，(App.vue或src其他文件下)@import './assets/css/bootstrap.css';

2.如果在index.html中引入layer，

//info是data(){return {info: 'layer-vue'}}
layer.confirm('修改info:<input v-model="info">', { 
                     btn: ['确定','取消'] 
                    }, function(){
                       layer.msg('重要', {icon: 1});
                    }
                });

    问题：触发的弹框弹出时，生成的input标签的v-model = "info"是无效的，因为此时已经过了vue的生命周期；

    解决方法：npm install vue-layer

3.在index.html页面中引入的外部js插件 plugins/My97DatePicker4.8/WdatePicker.js

<input onClick="WdatePicker()" v-model="beginTime"/>  //绑定不了值

   问题：外部js插件，绑定不了值  

   解决方法：用其他时间插件 或者 用h5的新特性date <input type="date"  v-model="beginTime"/>或者是ui框架的组件

4.vuex 的store.js中的mutations：mutations中只能是数据管理，不能有页面操作；然后mutations中方法的参数不能超过2个
   问题：传入的值会变成undefined,就不能正常操作store。

 mutations：{
     addList (state, value){ //这里的state直接指向store.js里的state ; 注意：参数不能超过2个
               state.lists.unshift(value)
         }
   }

5.vuex的store数据 与 组件里的data 和 v-model的绑定问题（修改页面未点击确定修改，输入的数据已经写入到store里面 ：input的输入改变，直接导致this.$store.state.param改变
                   
   问题代码如下：

 <template>
     <input type="text" v-model="param"/>  <!--双向绑定到data中的param-->
 </template>


  export default {
      name: 'List',
      data () {
          return {
              param: this.$store.state.param
          }
      }
   }

    解决方法：$store.state.param如果是对象采用深拷贝 ，如果是普通变量直接赋值，不然存入store中的是data中的引用地址             

   let paramNow = this.$store.state.param ;//this.$store.state.param是字符串，直接赋值

   data () {
         return {
            param: paramNow   //所以此时v-model双向绑定的就是paramNow ,不再对store进行操作
         }
   }

6.vue中html属性绑定值v-bind，遍历写在input 的value中没有解析出正确的值（不能使用{{}} 双大括号来绑定属性值）         

<label v-for="(item, index) in skillList" :key="index"> 
<!--value="item.skillName"赋值只是个字符串-->
<input type="radio" class="skill" value="item.skillName" v-model="hobbylist.skill"/>
</label>

   解决方法：v-bind:value=item.skillName

<label v-for="(item, index) in skillList" :key="index">
    <!--v-bind:value=item.skillName"-->
    <input type="radio" v-bind:value=item.skillName" v-model="hobbylist.skill"/>
</label>

     说明：v-model 绑定的值通常是静态字符串 ；把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind
7.vue路由问题
   router/index.js的路径配置

 
    {
      path: '/',   //一定要把这个配置写上
      component: Home
    },
    {
      path: '/staffList',
      name: 'StaffList',
      component: StaffList
    }

  <li v-for = "(item ,index) in lists" :key = "index">
     <router-link :to="{path:'/detailStaff', query:item}" v-on:click="setIndex(index)"> 
     </router-link>
  </li>  
<!-- (router-link :to) to加冒号是表达式（不能太复杂），没加就是普通字符串-->
<!--注意{path:'/detailStaff', query:item}一定是query 不能改-->
<!--params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失，query并
不会出现这种情况-->

8.vue的核心思想：渐进式的javaScript框架，数据驱动视图（所以用data中的数据去构成dom，不用js或jquery去操作dom）

9.this.$store.commit传参的问题： value的值 data(){return { info : {name:'youyou'} }}不能是地址引用（也不能是对象的浅拷贝）

  问题：this.$store.commit('addList' , this.info);此时store保存的数据是this.info的引用地址,当info v-model绑定时,修改了       this.info,store里的值由于引用地址的原因同时也被修改 ;
 解决方法：传值的时候最好不传引用 ，拷贝一份数据，传过去；
 深拷贝的方法（浅拷贝的还是地址引用）：
              JSON.parse(JSON.stringify( this.info ))    //转化为字符串基本类型，直接赋值拷贝
              $.extend(true, {}, this.info))     //jquery的方法
           Object.assign()     //es6的方法，但是只能拷贝一层（浅拷贝）{ name :'youyou'} ；如果是两层以上{ user: { name :'youyou'}}就不行，需要自己写方法遍历一层一层判断赋值