vue2.0开发过程中踩的坑！

昨天素素终于跳了诛仙台，我好开心呀！今儿个特地整理了下vue2.0开发过程中踩得坑！希望和大家交流！

一、声明周期

声明周期钩子详见这张图 https://segmentfault.com/q/1010000007704114

1.0的ready替换成了mounted，即模板编译挂载之后

数据data要写成function的形式了，像这样

 

data () {
    return {
        tableList: [],
        currentModel: "",
        modal: {
            name: "",
            ip: "",
            ipList: [{"ip":"11"},{"ip":"22"},{"ip":"33"}], //
            desc: "",
        }
    }
}

 

二、路由中引入静态js，全局组件，全局变量，全局function

1.引入全局的静态js库，建立一个与src同级的目录例如static，然后把静态资源放入该文件夹下，直接在根目录的index.html中引入如下，其他路由页面就都可以用了！（看起来好简单啊 我可是折腾了好久！！）

 

 

2.页面内的公共的参数

比如，用户名，分组，权限等都放在framework.vue里，子页面用this.$parent.$parent.userInfo调用

3.引入公共组件 component

在main.js里import singleSelect from './components/functional_select/single_select' //引入

 

Vue.component('singleSelect', singleSelect) //注册

 

 

这样注册后，所有路由页面都可以使用singleSelect了

4.引入公共方法 function

在main.js里，把一个方法绑定到vue的原型上，

Vue.prototype.hello = function(){
    console.log('ppppp')
}

然后在路由页面，调用this.hello('lemon',callback)就可以使用了

同样适用于公共的util方法，不过我没有使用这种拓展Vue原型链的方法，而是在每个路由页面都单独import util，使用公共方法

 

三、内插值属性1.0和2.0的写法不同了

 

test
test
test
//字符串+变量

 

四、v-for循环的key，value值互换了位置，还有track-by

 

 

五、filter过滤器

 

filter过滤器现在要定义到和methods同级的对象下

{{ title | titleFilter }}
methods: {},
filters: {
    titleFilter: function(value){
    return value+ 'ppp'
    }
}

 

六、遍历数组时，key值不能做model

 

v-model绑定数据的时候，{key,value}这种数据类型，key值是不能做model的，js里不能修改key值，value值未声明的话会报错，但是modal.value没有的话，不会报错，数组也是同理，会报错

下面是错误的写法：

taskList: ["lemontest1","lemontest2","lemontest3"]

    

 

改为:：

taskList: [ {name: "lemontest1"},{name: "lemontest2"},{name: "lemontest3"} ]

    

 

七、父子通信

其实父子通信踩得坑最多了，很多的api和方法1.0和2.0都完全不一样了！详见之前的一篇组件父子通信！