【重点突破】—— 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 ×废弃createdbeforeCompile ×废弃compiled ×废弃ready ×废弃beforeDestroydestroyed
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 ...
随机推荐
- 前端应该掌握的CSS实现多列等高布局
1.引言 我们在写页面的时候,有的时候会遇到多栏布局,每个栏目里面的内容有的时候可能不一样,这样就会导致每个栏目实际的高度也是不一样的,如果每个栏目有背景颜色的,就会导致每个栏目的底部是对不齐的,用户 ...
- 【homework week5】初步了解敏捷开发——自由与约束的哲学统一
“自由与束缚的哲学统一”或许不该放到标题上去,毕竟它只是我灵光一闪的感悟.但这个spark让我感到高中到大学的哲学应该也没有白学,这是让人非常兴奋的一件事. 所以我还是把它放到了标题上. 来谈敏捷软件 ...
- 基础概念:Oracle数据库
基础概念:Oracle数据库.实例.用户.表空间.表之间的关系 数据库:Oracle数据库是数据的物理存储.这就包括(数据文件ORA或者DBF.控制文件.联机日志.参数文件).其实Oracle数据库的 ...
- grep_awk_sed文本处理
小技巧 1.删除0字节文件find -type f -size 0 -exec rm -rf {} \; 2.查看进程按内存从大到小排列ps -e -o “%C : %p : %z : %a”|sor ...
- CodeForces875C[拓扑排序] Codeforces Round #440 [Div2E/Div1C]
只要保存每相邻两行字符串 第一个不同位 即可.然后按照 第一个不同位上的字符有: " 来自下一行的 大于 来自上一行的" 构图,跑拓扑排序即可. 当然要判断一下有没有环构成, 有环 ...
- 草摆动shader
Shader "Custom/Grass" { Properties { _MainTex ("Grass Texture", 2D) = "whit ...
- 十一黄(xun)金(lian)周感想
实际上并没有训整整一周-_-|| 只训了三天 听说纪中全员没过节(ΩДΩ)好可怕 这三天考了5场模拟赛,一场初赛模拟 让我感觉我和开学时比起来还是有很大的提升的 最主要就是在dp方面. 经过整个九月疯 ...
- 【HDU 3746 Cyclic Nacklace】
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...
- git - 搭建最简单的git server
以下操作都在 centos7 下进行,但同样适用于centos 6. 1. 安装git-core yum -y install git 添加git用户,用于启动管理git仓库 useradd git ...
- Codeforces Round #316 (Div. 2) B 贪心
B. Simple Game time limit per test 1 second memory limit per test 256 megabytes input standard input ...