【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习。
组件模板不再支持片段代码,必须有一个顶级元素包裹,例如:
Vue1.0:
<template>
<h3>h3标签</h3>
<p>p标签</p>
</template>
Vue2.0:
<template>
<div>
<h3>h3标签</h3>
<p>p标签</p>
</div>
</template>
关于组件的定义
Vue1.0:
Vue.component(组件名称,{ //vue2.0能用,但不再那么用了。
//组件内容
})
Vue2.0:
var home={
template:' ' //代替了之前的Vue.extend({})的形式,直接把对象抛出来,就认为成是组件了。
}
生命周期
Vue1.0:
init ×废弃
created
beforeCompile ×废弃
compiled ×废弃
ready ×废弃
beforeDestroy
destroyed
Vue2.0:
- beforeCreate 组件实例刚刚被创建,属性都没有
- created 组件实例创建完毕,属性已经绑定
- beforeMount 模板编译之前 √新增
- mounted 模板编译之后,代替了之前的ready* √新增
- beforeUpdate 组件更新之前 √新增
- updated 组件更新完毕 √新增
- beforeDestroy 组件销毁之前
- destroyed 组件销毁后
循环
Vue1.0:
v-for="(index,val) in array"
需要 track-by="$index"
属性解决添加重复数据问题。
Vue2.0:
v-for="(val,index) in array"
默认可以添加重复数据,必须用:key="index"
属性提高循环性能,对功能没有影响。
自定义键盘事件(以ctrl键为例)
Vue1.0:
Vue.directive("on").keyCodes.ctrl = 17;
Vue2.0:
Vue.config.keyCodes.ctrl = 17;
过滤器
Vue1.0:
- 有很多系统自带过滤器,如:
{{msg|json}}
、{{msg|currency}}
Vue2.0:
- 内置过滤器全部删除,要用的时候需要自己用一些辅助函数解决
组件通信
Vue1.0:
- 子组件利用
sync
(eg::msg.sync="change"
) 可以更改父组件信息
Vue2.0:
- 子级想拿到父级的数据:通过
props
,且不允许更改父组件信息 - 如何改:
- 父组件每次传一个对象给子组件,对象引用。
- 只是追求不报错,可以用
mounted
的钩子函数,改变自身数据
可以单一事件管理组件通信
var Event = new Vue();
Event.$emit('事件名','数据');
Event.$on('事件名',function(){ ... }.bind(this));
动画
transition
不再是属性:transition=“fade”
而是像模板一样的标签
<transition name="fade" @before-enter="" @enter="" @after="" @before-leave="" @leave="" @after-leave="">这里放运动的元素,属性,路由...</transition>
路由
- link 不再是指令,而是标签
Vue1.0:
<a v-link="{path:'/home'}">我是主页</a>
Vue2.0:
<router-link to="/home">我是主页</router-link>
- 路由嵌套
Vue1.0:
var Home ={ //准备组件
template:'<h3>我是主页</h3>'
}
const routes = [ //配置路由
{path:'/home',component:Home},
{path:'*',redirect:'/home'} //重定向
...
];
const router = new VueRouter({routes:routes}); //生成路由实例
//简写成对象的形式 :const router = new VueRouter({routes});
new Vue({ //最后挂到vue上
router,
el:'#box'
});
Vue2.0:
const routes = [ //配置路由
{path:'/home',component:Home},
{path:'/news',component:News,
children:[
{path:'/newsname',component:newsNameDetail},
...
]
},
{path:'*',redirect:'/home'} //重定向
...
];
绑定原生html
Vue1.0:
<span>{{{message}}}</span> //弃用
Vue2.0:
<span v-html="message"></span>
绑定标签属性
Vue1.0:
<span id="{{message}}"></span> //弃用
Vue2.0:
<span v-bind:id="message"></span>
Vue2.0其它改变的地方
- el 属性绑定的元素,限制为一个普通元素,不能再绑定在body、html等元素上
- v-model 增加了
.trim
,.number
等后缀修饰符<input v-model.trim="msg">
增加了
directives
属性自定义指令,也可以定义全局的指令
【重点突破】—— Vue1.0到Vue2.0的变化的更多相关文章
- vue1.0和vue2.0的区别(一)
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...
- vue1.0和vue2.0的区别(二)
这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...
- vue1.0与vue2.0对于v-for的使用的区别
vue1.0与vue2.0对于v-for的使用的区别: 1,vue1.0中有$index,而vue2.0将$index移除. 2,vue1.0中(index,item) in list 而vue2.变 ...
- vue1.0+vue2.0实现选项卡
通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,用vue实现也是同样的原理,都是操作active类. 我们都知道用vue ...
- vue1.0 与 Vue2.0的一些区别 及用法
1.Vue2.0的模板标记外必须使用元素包起来: eg:Vue1.0的写法 <!DOCTYPE html> <html> <head> <meta chars ...
- Vue1.x 到Vue2.0的一个变化
小弟初来乍到,写的不好的地方还望指正.谢谢各位! 废话不多说 进入正题: Vue1.x到2.0的一个变化 1. 在每个组件模板,不在支持片段代码 组件中模板: 之前: <templa ...
- 用webpack2.0构建vue2.0超详细精简版
初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...
- 用webpack2.0构建vue2.0单文件组件超级详细精简实例
npm init -y 初始化项目 //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 np ...
- vue使用中遇到的,以及vue1.0到vue2.0新手踩的坑
最近再写一个vue的项目,视频中用的是vue1.0,但是现在vue已经2.0,所以踩了很多坑,先记录下来.理解有误再来修改. 路由问题 之前的路由是写在app.vue里边,而2.0的路由直接有个rou ...
随机推荐
- sqlserver 操作access数据库
exec sp_configure 'show advanced options',1 reconfigure exec sp_configure 'Ad Hoc Distributed Quer ...
- maven学习(八)——使用maven创建javaweb项目
构建JavaWeb项目 1.创建JavaWeb项目 1.使用mvn archetype:generate命令,如下所示: mvn archetype:generate -DgroupId=com.my ...
- 错误:支持“EFDbContext”上下文的模型已在数据库创建后发生更改。请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/?LinkId
支持"EFDbContext"上下文的模型已在数据库创建后发生更改.请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/ ...
- 【Luogu】P4159迷路(矩阵优化)
题目链接 将每个点拆成时刻1~9,然后根据题目要求连边,比如i-j有一条权为x的边就从点i-x向点j-1连一条边,表示经过x次之后可以到达. 然后就矩阵快速幂乱搞就好了. #include<cs ...
- 记一次 pip list --outdated 错误
在 Windows CMD 执行 pip list --outdated,出现如下错误:" [WinError 10061] 由于目标计算机积极拒绝,无法连接",原因是我之前用的源 ...
- windows系统——U 盘损坏修复
u盘损坏怎么修复 1.打开控制面板——管理工具——计算机管理——存储——磁盘管理——右击“磁盘1”——点击“初始化磁盘”——“确定”——初始化完毕后,U盘为“联机”状态. 2.在右边空白处“新建磁盘分 ...
- vue基础教程
1.执行npm install 2.安装stylus,(npm install之后node_module已经有了stylus,但还是要再安装一次) npm install --save-dev sty ...
- shell for 循环实践
for循环语法结构如下 [root@backup tmp]# .sh #!/bin/bash ` do echo $i done [root@backup tmp]# .sh 3 批量修改文件名 [r ...
- js 如何刷新页面
Javascript刷新页面的几种方法(未测试):1 history.go(0)2 location.reload()3 location=location4 location.assign(loca ...
- jsp导出table数据excel表
<html> <head> <meta http-equiv="content-Type" content="text/html;chars ...