Vue1.x 到Vue2.0的一个变化
小弟初来乍到,写的不好的地方还望指正。谢谢各位!
废话不多说 进入正题:
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的一个变化的更多相关文章
- 基于vue2.0的一个豆瓣电影App
1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
- vue2.0有哪些变化
vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...
- 基于vue2.0的一个系统
前言 这是一个用vue做的单页面管理系统,这里只是介绍架子搭建思路 前端架构 沿用Vue全家桶系列开发,主要技术栈:vue2.x+vue-router+vuex+element-ui1.x+axios ...
- 基于vue2.0的一个分页组件
分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...
- vue2.0实现一个模态弹框,内容自定义(使用slot)
定义模态框:合理使用插槽 model.vue <!-- 模态弹窗 --> <template> <div class="self-modal" v-s ...
- vue1.0和vue2.0的区别(一)
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...
- vue2.0动画
相对于vue1.0来说,vue2.0的动画变化还是挺大的, 在1.0中,直接在元素中加 transition ,后面跟上名字. 而在vue2.0中,需要把设置动画的元素.路由放在<transit ...
- vue2.0实现购物车功能
购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...
- 用Vue2.0实现简单的分页及跳转
用Vue2.0实现简单的分页及跳转 2018年07月26日 20:29:51 Freya_yyy 阅读数 3369 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...
随机推荐
- Qt禁止调整窗口的大小
项目中使用的是基于对话框的程序,所以限制调整窗口大小会比较合适,下面是两种方法. 1.使用代码修改 #include "dialog.h" #include "ui_di ...
- 使用Cookie报错Control character in cookie value, consider BASE64 encoding your value
参考资料: http://www.blogjava.net/persister/archive/2009/10/02/297103.html http://blog.csdn.net/xiaozhen ...
- [gpio]Linux GPIO简单使用方式2-sysfs
转自:http://blog.csdn.net/cjyusha/article/details/50418862 在Linux嵌入式设备开发中,对GPIO的操作是最常用的,在一般的情况下,一般都有对应 ...
- STM32CubeMX软件工程描述_USART配置过程
推荐 分享一个朋友的人工智能教程,零基础!通俗易懂!希望你也加入到人工智能的队伍中来! http://www.captainbed.net/strongerhuang Ⅰ.写在前面 学习本文之前可以查 ...
- Hbase基础篇
namespace:命名空间的作用是把多个属于相同业务领域的表分成一个组.一个表可以自由选择是否有命名空间,如果创建表的时候加上了命名空间后,这个表名字就成为了:<NameSpace> : ...
- SQL Server 数据库同步,订阅、发布、复制、跨服务器
随便说两句 折腾了一周,也算把数据库同步弄好了.首先局域网内搭建好,进行各种测试,弄的时候各种问题,弄好以后感觉还是挺简单的.本地测试好了,又在服务器进行测试,主要的难点就是跨网段同步,最后也解决了, ...
- plsql programming 01 plsql概述
授权 从 oracle 8i 开始, oracle 用通过提供 authid 子句为 pl/sql 的执行授权模型, 这样我们可以选择使用 authid current_user(调用者权限)来执行这 ...
- Scala中Stream的应用场景及其实现原理
欢迎关注我的新博客地址:http://cuipengfei.me/blog/2014/10/23/scala-stream-application-scenario-and-how-its-imple ...
- 逻辑斯特回归(logistic regression)与最大熵模型(maximum entropy model)
- php -- 设计模式 之 单例模式
实现单例的条件:三私一公 三私:私有化构造方法:不让外部创建对象 私有化克隆方法:不让外部克隆对象 私有静态属性:保存已经产生的对象 一公:公共静态方法:在类内部创建对象 实例: <?php / ...