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:     
  };

3. 生命周期
之前:
  init
  created
  beforeCompile
  compiled
  ready √ -> mounted
  beforeDestroy
  destroyed
现在:
  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"
      v-for="(val,key,index) in json"

5. track-by="id"
  变成
  <li v-for="(val,index) in arr" :key="index">
6. 自定义键盘指令
  之前:Vue.directive('on').keyCodes.ctrl=17;

  现在: Vue.config.keyCodes.ctrl=17
7. 过滤器
之前:
  系统就自带很多过滤
  {{msg | currency}}
  {{msg | json}}
  ....
  limitBy
  filterBy
  .....
一些简单功能,自己通过js实现

到了2.0, 内置过滤器,全部删除了
  之前需要json过滤器转的,现在不需要了,默认已经转了

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

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

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

------------------------------------------------------
组件通信:
vm.$emit()
vm.$on();

父组件和子组件:

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

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

问题,就想更改:
a). 父组件每次传一个对象给子组件, 对象之间引用 √
b). 只是不报错, mounted中转
------------------------------------------------------
可以单一事件管理组件通信: vuex
var Event=new Vue();

Event.$emit(事件名称, 数据)

Event.$on(事件名称,function(data){
//data
}.bind(this));
------------------------------------------------------
debounce 废弃
-> lodash
_.debounce(fn,时间)
------------------------------------------------------

vue2.0的变化的更多相关文章

  1. Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  2. vue2.0路由变化1

    路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...

  3. 【重点突破】—— Vue1.0到Vue2.0的变化

    前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习.        组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...

  4. vue2.0有哪些变化

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

  5. VUE2.0不可忽视的很多变化

    今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也 ...

  6. vue2.0变化

    之前有很多的vue知识总结都是围绕1.0版本实现的,下面主要总结一下2.0相对于1.0的一些变化. 组件定义 在vue1.0中,我们有使用vue.extend()来创建组件构造器继而创建组件实例,如下 ...

  7. Vue2.0中v-for迭代语法变化(key、index)【转】

    转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...

  8. Vue2.0以后,有哪些变化

    最近移动端项目版本升级,Vue由之前的1.0升级到2.3,那么,Vue2.0之后,有哪些细节的变化呢,现在总结如下: 1.在每个组件模板,不再支持片段代码 组件中模板: 之前: <templat ...

  9. vue2.0构建淘票票webapp

    项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...

随机推荐

  1. 常用的网站站长SEO工具

    网站管理员工具 网站管理员工具需要对网站域名所有权进行验证,通常是通过上传指定文件.增加META或者修改网站DNS来验证管理员身份,通过验证后,网站管理员可以查询到自己网站的各类统计信息. 1. Go ...

  2. Laravel中的模型的创建

    <?phpnamespace App; use Illuminate\Database\Eloquent\Model; class Admin extends Model{ //指定表名 pro ...

  3. 数据可视化-svg入门基础(二)

    接上一篇:数据可视化-svg入门基础(一),基础一主要是介绍了svg概念,元素样式设置等. svg是(scalable vector graphic)伸缩矢量图像. 一.目录 (1)图形元素 (2)文 ...

  4. 如何设置Xcode模拟器地图的当前位置

    使用模拟器上的地图的话,需要设置当前位置,开启定位后,才能定位准确. 一.选中模拟器:Debug - Location - Custom Location 弹出的纬经度坐标.纬经度.纬经度坐标,默认显 ...

  5. phpstudy的mysql版本升级至5.7

    phpstudy安装的mysql版本一般都是5.5或5.4的,但是有时候做项目又必须用到mysql5.7版本,所以我们现在来看一下如何在phpstudy的环境下将mysql版本升级至5.7 温馨提醒: ...

  6. uoj#276. 【清华集训2016】汽水(分数规划+点分治)

    传送门 没想到点分治那一层-- 首先不难发现这是个分数规划,先把所有的边长减去\(k\),二分答案,设为\(mid\),就是要求路径平均值\(ans\in[-mid,mid]\) 先来考虑\(ans\ ...

  7. 新装centos 6.5 基本配置

    开机自动联网 vi /etc/sysconfig/network-scripts/ifcfg-eth0; 将ONBOOT=no,改为ONBOOT=yes,保存退出 开机直接进入命令行模式 vi /et ...

  8. nginx 设置websocket支持

    #websocket======相关 proxy_read_timeout 60m; proxy_http_version 1.1; proxy_set_header Upgrade $http_up ...

  9. 【Codeforces1111D_CF1111D】Destroy the Colony(退背包_组合数学)

    题目: Codeforces1111D 翻译: [已提交至洛谷CF1111D] 有一个恶棍的聚居地由几个排成一排的洞穴组成,每一个洞穴恰好住着一个恶棍. 每种聚居地的分配方案可以记作一个长为偶数的字符 ...

  10. UVA10129:Play on Words(欧拉回路)

    Some of the secret doors contain a very interesting word puzzle. The team of archaeologists has to s ...