vue 1.0和vue 2.0的变化和区别
一.在每个组件模板,不在支持片段代码
vue 1.0是
<template><h3>我是组件</h3><strong>我是加粗标签</strong>
</template>复制代码
vue 2.0是:必须有根元素,包裹住所有的代码
<template id="aaa"><div><h3>我是组件</h3><strong>我是加粗标签</strong></div>
</template>
复制代码
二.关于组件定义
VUE1.0定义组件的方式有:
Vue.extend 这种方式,在2.0里面有,但是有一些改动
Vue.component(组件名称,{ 在2.0继续能用data(){}methods:{}template:
});复制代码
VUE2.0定义组件的方式则更为简单:
var Home={template:'' -> 相当于Vue.extend()
};复制代码
对比局部注册:
vue 1.0
var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({template: '...',components: {// <my-component> will only be available in Parent's template'my-component': Child}
})复制代码
vue 2.0
var Child = {template: '<div>A custom component!</div>'
}
new Vue({// ...components: {// <my-component> 将只在父模板可用'my-component': Child}
})复制代码
三.生命周期的变化
vue1.0的生命周期为
init ->初始化
created ->创建
beforeCompile ->编译之前
compiled ->编译完成
ready √ -> mounted
beforeDestroy ->销毁之前
destroyed ->已经销毁复制代码
vue2.0的生命周期为(标*的为经常用的)
beforeCreate 组件实例刚刚被创建,属性都没有
created 实例已经创建完成,属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后,代替之前ready *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销毁后复制代码
四.循环
学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西。
而vue2.0默认就支持添加重复数据,而且vue2.0还去掉了$index和$key这两个东西换成在循环里定义
Vue 1.0
v-for="(index,val) in array"复制代码
Vue 2.0
v-for="(val,index) in array" 这是vue2.0复制代码
五. 给元素附唯一值
vue 1.0 trace-by的方式
<div v-for="item in items" track-by="$index">复制代码
vue 2.0 key的方式
<div v-for="item in items" :key="item.id">复制代码
六.自定义键盘指令
vue1.0 Vue.directive('on').keyCodes.f1=17
vue2.0 Vue.config.keyCodes.ctrl=17复制代码
vue2 自定义指令的使用
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Code Splitting</title></head><body><div id="box"><input type="text" @keyup.ctrl="change"> </div><script src="vue.js"></script><script type="text/javascript">Vue.config.KeyCodes.ctrl = 17;window.onload = function (){new Vue({el:'#box',data: {},methods:{change(){alert('改变了');}}})}</script>
</body>
</html>复制代码
七.过滤器
vue 1.0 自带过滤器
{{msg | currency}}{{msg | json}}....limitByfilterBy.....复制代码
vue 2.0 删除
定义过滤器的步骤
1.定义过滤器函数
const findByKey = function (key, options) {const _rs = find(options, function(item){return item.key === key})return _rs ? _rs.value : key;}复制代码
2.在filters中声明
new Vue({el:'#box',data: {},methods:{change(){alert('改变了');}},filters: {findByKey}})复制代码
3.使用
<div>{{value | findByKey(processOptions) }}</div>复制代码
1.0与2.0 过滤器 传参方式不同
vue 1.0
<p>{{ date | formatDate 'YY-MM-DD' timeZone }}</p>复制代码
vue 2.0
<p>{{ date | formatDate('YY-MM-DD', timeZone) }}</p>复制代码
vue 1.0和vue 2.0的变化和区别相关推荐
- 简单了解Vue的异步请求,axios-0.18.0.js插件实现异步
Vue的异步请求 Vue 异步操作 在 Vue 中发送异步请求,本质上还是 AJAX.我们可以使用 axios 这个插件来简化操作! 使用步骤 引入 axios 核心 js 文件. 调用 axios ...
- Vue项目实战09 : vue3.0实现点击切换验证码(组件)及校验
博主博客: https://lvsige.top/ 先看效果 父组件 <template><div class="login"><van-fieldc ...
- 看完后完全了解 Vue 2.0 和 Vue 3.0 的区别
1.数据的双向绑定 Vue2.0使用Object.defineProperty 原理:通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作,当数据发 ...
- vue 生成发布包_Vue 3.0 终于正正正正正式发布了!
Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译.由于时间仓促,文中如有翻译不当的地方还望提出.如有侵权,请联系删帖.以 ...
- 【Vue2.0】—Vue脚手架配置代理(二十二)
[Vue2.0]-Vue脚手架配置代理(二十二) 方法一 方法二
- 【Vue2.0】—Vue与Component的关系(十二)
[Vue2.0]-Vue与VueComponent的关系(十二) <body><div id="root"><h2>{{name}}</h ...
- 【Vue2.0】—Vue监视数据的原理(五)
[Vue2.0]-Vue监视数据的原理(五) <body><div id="root"><h1>学生的基本信息</h1><bu ...
- 【Vue2.0】—Vue中的key有什么作用?(四)
[Vue2.0]-Vue中的key有什么作用?(四) <div id="root"><!-- 遍历数组 --><ul><button @c ...
- iview vue 打包图标不显示_VueCLI3.0干货系列之集成iview
之前项目中一直使用jQuery+bootstrap,使用VueCLI3.0之后接触了iview,自此抛弃了jQuery+bootstrap的组合,iview是纯vue写的,非常的适合在VueCLI3. ...
最新文章
- UI培训分享:导航栏UI设计规范及注意事项有哪些?
- Spring MVC+Spring+Mybatis实现支付宝支付功能(附完整代码)
- SAP WM 二步法确认TO场景下WM库存状态变化
- 优雅地在 Mac上使用 IDE 查看open-jdk源码
- ldifde 神奇功效,对付英文系统下显示中文乱码哦
- Elasticsearch和solr的区别
- JAVA 通过url下载图片保存到本地(亲测)
- Zookeeper的典型应用场景(1)
- java什么是静态_什么是java静态
- JavaScript小技巧一
- 1到n阶乘算法的改进
- NodeJS配置国内源
- CCF201812-5 管道清洁【最小费可行流】(100分题解链接)
- 密码密文 android,Android登录页面密码明文密文的切换
- 定时备份windows机器上的文件到linux服务器上的操作梳理(rsync)
- c语言起点到目的地方法数,最短路径动态规划问题及C语言实现探讨
- JSP学习——EL表达式和JSTL学习小结
- pde中微元分析法的主要思想_有限元法(FEM)
- android 自定义emoji表情包,emoji表情制作
- 优酷的kux格式怎么转换成mp4?教你快速转换的方法