vue踩坑之旅

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

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

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

3.在index.html页面中引入的外部js插件 plugins/My97DatePicker4.8/WdatePicker.js
<input onClick="WdatePicker()" v-model="beginTime"/> //绑定不了值
解决方法：用其他时间插件或者用h5的新特性date <input type="date" v-model="beginTime"/>

4.vuex 的store.js中的mutations：mutations中只能是数据管理，不能有页面操作；然后mutations中定义的方法的参数不能超过2个，
不然传入的值会变成undefined,就不能正常添加了。
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"/> 
   </template>
export default {
name: 'List',
   data () {
   return {
           param: this.$store.state.param
       }
   }
}
解决方法：可以$store.state.param是对象采用深拷贝，普通变量直接赋值

let paramNow = 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"> 
<input type="radio" class="skill" name="skill" value="item.skillName" @change="radioChange" v-model="hobbylist.skill"/>{{item.skillName}}
</label>
解决方法：v-bind:value=item.skillName
       <label v-for="(item, index) in skillList" :key="index">
<input type="radio" class="skill" name="skill" v-bind:value=item.skillName @change="radioChange" v-model="hobbylist.skill"/>{{item.skillName}}
</label>
说明：v-model 绑定的值通常是静态字符串；把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind
7.vue路由问题
router/index.js的路径配置
{
path: '/home',
name: 'Home',
component: Home
},
{
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)">{{item.username}}</router-link>
</li>

8.vue的核心思想：渐进式的javas框架，数据驱动视图（所以尽量用data中的数据去构成dom）

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

       问题：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'}}就不行，需要自己写方法遍历一层一层判断赋值

猜你喜欢