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

最新推荐文章于 2024-03-06 10:43:25 发布

lemon678

最新推荐文章于 2024-03-06 10:43:25 发布

阅读量1.1w

点赞数 2

本文链接：https://blog.csdn.net/lemon_zhao/article/details/55510589

版权

js 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

vue

10 篇文章 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中引入如下，其他路由页面就都可以用了！（看起来好简单啊我可是折腾了好久！！）

<head>
    <link rel="shortcut icon" href="./static/img/favicon.ico" /> 
    <!-- 静态css -->
    <link rel="stylesheet" type="text/css" href="./static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./static/css/framework.css">
    <link rel="stylesheet" type="text/css" href="./static/css/common.css">
    <link rel="stylesheet" type="text/css" href="./static/css/date-time-picker.css">
    <link rel="stylesheet" type="text/css" href="./static/css/dataTables.bootstrap.css">


    <!-- 静态js -->
    <script type="text/javascript" src="./static/js/lib/jQuery-2.1.4.min.js"></script>
    <script type="text/javascript" src="./static/js/lib/bootstrap.min.js"></script>


    <!-- <link rel="stylesheet" type="text/css" href="./static/css/fixedColumns.bootstrap.min.css"> -->
    <script type="text/javascript" src="./static/js/lib/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="./static/js/lib/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="./static/js/lib/date-time-picker.js"></script>
    <!-- <script type="text/javascript" src="./static/js/lib/dataTables.fixedColumns.min.js"></script> -->


    <meta charset="utf-8">
    <title>XYvod</title>
</head>

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的写法不同了

<div id="{{ selected.title }}">

<div v-bind:title="selected.title" >test</div>
<div v-bind:someprop="testModel">test</div>
<div v-bind:class="'id-' + item.id">test</div>//字符串+变量

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

<!-- 1.x -->
<div v-for="(index,item) in list" track-by="id">

<!-- 2.0 -->
<div v-for="(item,index) in list" :key="item.id">

五、filter过滤器

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

<div>{{ title | titleFilter }}</div>
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"]
<div class="form-group" v-for="(task,index) in taskList">
    <input type="text" class="form-control" placeholder="请输入任务名称" v-model="task">
</div>

改为:：

taskList: [ {name: "lemontest1"},{name: "lemontest2"},{name: "lemontest3"} ]
<div class="form-group" v-for="(task,index) in taskList">
    <input type="text" class="form-control" placeholder="请输入任务名称" v-model="task.name">
</div>

七、父子通信

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

lemon678

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
vue2.0开发过程中踩的坑！

昨天素素终于跳了诛仙台，我好开心呀！今儿个特地整理了下vue2.0开发过程中踩得坑！希望和大家交流！一、声明周期声明周期钩子详见这张图 https://segmentfault.com/q/10100000077041141.0的ready替换成了mounted，即模板编译挂载之后数据data要写成function的形式了，像这样 data () { retur...
复制链接

扫一扫