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

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,时间)
------------------------------------------------------

时间: 2024-10-05 06:17:31

vue2.0的变化的相关文章

Vue2.0的变化(2)———vue2.0动画的变化、vue-2.0路由的变化

之前讲解的都是vue1.0的使用,现在我们开始介绍vue2.0,这里的介绍是在vue1.0的基础上进行介绍的,主要介绍的是同vue1.0版本相比2.0的变化 vue2.0动画的变化:现在变成: <transition> 运动东西(元素,属性,路由.....); </transition> class的定义: .fade-enter{} //初始状态 .fade-enter-active{} //变化成什么样 --当元素出来(显示) .fade-leave{} //可不写 .fade

vue2.0有哪些变化

vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3> <p>hshsh</p> </template>     现在:必须有根元素 <template> <div> <h3>vue-router+vue-loader</h3> <p>hshsh</p&

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

今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也没发现什么问题,浏览器也没报错或者提示,很令人捉急.然后去github看了webpack-simple源码,才发现原来vue init webpack-simple默认安装的vue是2.0版本.马上推测到是不是因为vue2.0废弃了ready的用法,果然不出所料,我真是太机智了.看了下vue2.0的

初试 vue2.0——9.项目开发_better-scroll 实现移动端滑动2

写在前面的话: 上一篇文章实现了滑动效果,这部分来试试左右联动效果的实现方法吧 九.better-scroll + vue2.0 实现移动端滑动2--左右联动 效果:滑动右侧时,左侧也能有相应的变化:点击左侧时,右侧也能自动定位到相应的位置. 如下图所示界面,左侧为分栏,右侧为分栏详情. 滑动右边使左边联动的大概的思路: 1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中. 2)实现左边联动,则必须要监控 "scroll"事件,获取其高度 3)将scroll 的高度与右侧分栏

vue2.0 transition

vue2.0 transition -- demo实践填坑 前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果的时候,虽然比1.0版本强大很多,但是实践过程中还是踩了一些不应该踩但是还是踩了的坑.虽然官网文档已经很详细地介绍了各种应用场景,但是这里还是通过几个小demo案例来感受下vue2.0 transition 带来的便利吧! 实践 这里将通过

通信vue2.0组件

vue2.0组件通信各种情况总结与实例分析 Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html <div id="app1"> <i>注意命名规定:仅在html内使用my-message</i> <child my-message="组件内部数据传递"></child&

使用vue2.0 vue-router vuex 模拟ios7操作

其实你也可以,甚至做得更好... 首先看一下效果:用vue2.0实现SPA:模拟ios7操作 与 通讯录实现 github地址是:https://github.com/QRL909109/ios7 如果您觉得可以,麻烦给一个star,支持我一下. 之前接触过Angular1.0,React,都只是学点入门,但对于Vue却觉得很容易上手,不止入门简单,插件也是很丰富的,脚手架也是便利的很... 项目分析: 1.首屏滑动解锁,并能移动小圆点 2.主屏幕  长按图标抖动,删除图标,点击小圆点的主屏幕

Vue2.0源码阅读笔记--生命周期

一.Vue2.0的生命周期 Vue2.0的整个生命周期有八个:分别是 1.beforeCreate,2.created,3.beforeMount,4.mounted,5.beforeUpdate,6.updated,7.beforeDestroy,8.destroyed. 用官方的一张图就可以清晰的了解整个生命周期: Vue最新源码下载:地址 二:源码分析 1.先看new Vue实例的方法 创建Vue实例的文件是: src/core/instance/index.js function Vue

饿了么基于Vue2.0的通用组件开发之路(分享会记录)

Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的 大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍生出很多后台系统,UED 部门也接到越来越多的设计需求,