小弟初来乍到,写的不好的地方还望指正。谢谢各位!

  废话不多说  进入正题:

    Vue1.x到2.0的一个变化

        1. 在每个组件模板,不在支持片段代码
             组件中模板:
      

                            之前:
                     <template>
                        <h3>我是组件</h3><strong>我是加粗标签</strong>
                     </template>
                  现在:  必须有根元素,包裹住所有的代码
                     <template id="aaa">
                             <div>
                                  <h3>我是组件</h3>
                                  <strong>我是加粗标签</strong>
                             </div>
                     </template>

        2. 关于组件定义

            Vue.extend 这种方式,在2.0里面有,但是有一些改动,这种写法,即使能用,咱也不用——废弃
 
            Vue.component(组件名称,{ 在2.0继续能用
                data(){}
                methods:{}
                template:
             });
           2.0推出一个组件,简洁定义方式:
             var Home={
                template:''  ->   Vue.extend()
             };

        3. 生命周期

之前:
        init
        created
        beforeCompile
        compiled
        ready        √    ->     mounted
        beforeDestroy
现在:
        beforeCreate    组件实例刚刚被创建,属性都没有
        created    实例已经创建完成,属性已经绑定
        beforeMount    模板编译之前
        mounted    模板编译之后,代替之前ready  *
        beforeUpdate    组件更新之前
        updated    组件更新完毕    *
        beforeDestroy    组件销毁前
        destroyed    组件销毁后          

        4. 循环       

        2.0里面默认就可以添加重复数据

        去掉了隐式一些变量
            $index    $key

        之前:
            v-for="(index,val) in array"
        现在:
            v-for="(val,index) in array"    

        5. 自定义键盘指令

      

       之前:Vue.directive('on').keyCodes.f1=17;    

       现在:  Vue.config.keyCodes.ctrl=17

    

        6.过滤器

    

    之前:
        系统就自带很多过滤
        {{msg | currency}}
        {{msg | json}}
        ....
        limitBy
        filterBy
        .....
    一些简单功能,自己通过js实现

    到了2.0, 内置过滤器,全部删除了

    lodash    工具库    _.debounce(fn,200)

    自定义过滤器——还有
        但是,自定义过滤器传参

        之前:    {{msg | toDou '12' '5'}}
        现在:     {{msg | toDou('12','5')}}

        7.组件通信

    

   vm.$emit()
    vm.$on();

    父组件和子组件:

    子组件想要拿到父组件数据:
        通过  props

    之前,子组件可以更改父组件信息,可以是同步  sync
    现在,不允许直接给父级的数据,做赋值操作

    问题,就想更改:
        a). 父组件每次传一个对象给子组件, 对象之间引用    √
        b). 只是不报错, mounted中转

  

      
       

Vue1.x 到Vue2.0的一个变化的更多相关文章

  1. 基于vue2.0的一个豆瓣电影App

    1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...

  2. vue2.0有哪些变化

    vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...

  3. 基于vue2.0的一个系统

    前言 这是一个用vue做的单页面管理系统,这里只是介绍架子搭建思路 前端架构 沿用Vue全家桶系列开发,主要技术栈:vue2.x+vue-router+vuex+element-ui1.x+axios ...

  4. 基于vue2.0的一个分页组件

    分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...

  5. vue2.0实现一个模态弹框,内容自定义(使用slot)

    定义模态框:合理使用插槽 model.vue <!-- 模态弹窗 --> <template> <div class="self-modal" v-s ...

  6. vue1.0和vue2.0的区别(一)

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...

  7. vue2.0动画

    相对于vue1.0来说,vue2.0的动画变化还是挺大的, 在1.0中,直接在元素中加 transition ,后面跟上名字. 而在vue2.0中,需要把设置动画的元素.路由放在<transit ...

  8. vue2.0实现购物车功能

    购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...

  9. 用Vue2.0实现简单的分页及跳转

    用Vue2.0实现简单的分页及跳转 2018年07月26日 20:29:51 Freya_yyy 阅读数 3369    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...

随机推荐

  1. yii2 beta版 执行流程

    yii2 beta版 执行流程 自动加载 1.composer的自动加载 //composer的加载实现了四种方式,可以看看 require(__DIR__ . '/../../vendor/auto ...

  2. Redis 面试题(持续更新)

    前言 看了一圈,发现Redis的面试题主要问的是如下几块: 原理 用处(缓存/队列 包括Pub.Sub/计数器/排行榜等) 基本操作与数据类型 消息队列 且与其它消息队列的区别 主从备份 宕机如何处理 ...

  3. django中ModelForm save方法 以及快速生成空表单或包含数据的表单 包含错误信息

    django中ModelForm学习系列一~save方法 Model代码 from django.db import models # Create your models here. class P ...

  4. oracle autotrace

    --======================= -- 启用 AUTOTRACE功能 --======================= AUTOTRACE是一个SQL*Plus工具,用于跟踪SQL ...

  5. c#省市联动(sqlHelper的应用)

    sqlHelper: using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...

  6. C - The C Answer (2nd Edition) - Exercise 1-2

    /* Experiment to find out what happens when printf's argument string contains \c, where c is some ch ...

  7. 扩展KMP - HDU 4333 Revolving Digits

    Revolving Digits Problem's Link Mean: 给你一个字符串,你可以将该字符串的任意长度后缀截取下来然后接到最前面,让你统计所有新串中有多少种字典序小于.等于.大于原串. ...

  8. TensorFlow基础笔记(6) 图像风格化实验

    参考 http://blog.csdn.net/wspba/article/details/53994649 https://www.ctolib.com/AdaIN-style.html Ackno ...

  9. 002杰信-陌生的maven-web项目整改成我们熟悉的Web架构;classpath的含义;ssm框架的整合;junit测试

    这篇博客的资源来源于创智播客,先在此申明.这篇博客的出发点是jk项目,传智的做法是Maven的web模板生成的,但是这样子的结构目录与我们熟知的Web项目的结构目录相差很大,所以要按照我们熟知的项目结 ...

  10. 【POJ】1094 Sorting It All Out(拓扑排序)

    http://poj.org/problem?id=1094 原来拓扑序可以这样做,原来一直sb的用白书上说的dfs............ 拓扑序只要每次将入度为0的点加入栈,然后每次拓展维护入度即 ...