Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器
组件模板：
之前:
<template>
<h3>我是组件</h3><strong>我是加粗标签</strong>
</template>
现在: 必须有根元素，包裹住所有的代码
例如：
<script>
var Home={
template:'#aaa'
};
window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
},
components:{
'aaa':Home
}
});
};
</script>
<body>
<template id="aaa">
<div>
<h3>我是组件</h3>
<strong>我是加粗标签</strong>
</div>
</template>
<div id="box">
<my-aaa></my-aaa>
{{msg}}
</div>
</body>
生命周期：
之前:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
Destroyed
现在:
beforeCreate 组件实例刚刚被创建,属性都没有
created 实例已经创建完成，属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后，代替之前ready *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销
例如：
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
},
methods:{
update(){
this.msg='大家好';
},
destroy(){
this.$destroy();
}
},
beforeCreate(){
console.log('组件实例刚刚被创建');
},
created(){
console.log('实例已经创建完成');
},
beforeMount(){
console.log('模板编译之前');
},
mounted(){
console.log('模板编译完成');
},
beforeUpdate(){
console.log('组件更新之前');
},
updated(){
console.log('组件更新完毕');
},
beforeDestroy(){
console.log('组件销毁之前');
},
destroyed(){
console.log('组件销毁之后');
}
});
<div id="box">
<input type="button" value="更新数据" @click="update">
<input type="button" value="销毁组件" @click="destroy">
{{msg}}
</div>
循环：
2.0里面默认就可以添加重复数据
去掉了隐式一些变量
$index $key
之前:
v-for="(index,val) in array"
现在:
v-for="(val,index) in array"
track-by="id"
变成
<li v-for="(val,index) in list" :key="index">
例如：
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
list:['width','height','border']
},
methods:{
add(){
this.list.push('background');
}
}
});
};
</script>
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="(val,index) in list">
{{val}} {{index}}
</li>
</ul>
</div>
自定义键盘指令
之前：Vue.directive('on').keyCodes.f1=17;
现在: Vue.config.keyCodes.ctrl=17
例如：
<script>
//Vue.directive('on').keyCodes.ctrl=17;
Vue.config.keyCodes.ctrl=17;
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
change(){
alert('改变了');
}
}
});
};
</script>
<div id="box">
<input type="text" @keyup.ctrl="change">
</div>
window.onload=function(){
new Vue({
el:'#box',
data:{
list:['width','height','border']
},
methods:{
add(){
this.list.push('background');
}
}
});
};
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="(val,index) in list" :key="index">
{{val}} {{index}}
</li>
</ul>
</div>
过滤器
之前:
系统就自带很多过滤
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些简单功能，自己通过js实现
到了2.0， 内置过滤器，全部删除了
自定义过滤器——还有
但是,自定义过滤器传参
之前: {{msg | toDou '12' '5'}}
现在: {{msg | toDou('12','5')}}
例如：
<script>
Vue.filter('toDou',function(n){
//alert(input);
return n<10?'0'+n:''+n;
});
window.onload=function(){
new Vue({
el:'#box',
data:{
msg:9
}
});
};
</script>
例如：
<script>
Vue.filter('toDou',function(n,a,b){
alert(a+','+b);
//alert(input);
return n<10?'0'+n:''+n;
});
window.onload=function(){
new Vue({
el:'#box',
data:{
msg:9
}
});
};
</script>
<div id="box">
{{msg | toDou('12','5')}}
</div>
Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器的更多相关文章
- Vue2.0源码阅读笔记--生命周期
一.Vue2.0的生命周期 Vue2.0的整个生命周期有八个:分别是 1.beforeCreate,2.created,3.beforeMount,4.mounted,5.beforeUpdate,6 ...
- vue2.0 关于Vue实例的生命周期
什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过 ...
- 通俗易懂了解Vue组件的生命周期
1.前言 在使用vue2.0进行日常开发中,我们总有这样的需求,我就想在页面刚一加载出这个表格组件时就发送请求去后台拉取数据,亦或者我想在组件加载前显示个loading图,当组件加载出来就让这个loa ...
- React Native 中组件的生命周期
概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...
- Vue2.0的通用组件
饿了么基于Vue2.0的通用组件开发之路(分享会记录) Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
- React组件和生命周期简介
React 简介----React 是 Facebook 出品的一套颠覆式的前端开发类库.为什么说它是颠覆式的呢? 内存维护虚拟 DOM 对于传统的 DOM 维护,我们的步骤可能是:1.初始化 ...
- Jetpack 架构组件 Lifecycle 生命周期 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 202-React.Component组件、生命周期
一.概述 React可以将组件定义为类或函数.定义为类的组件当前提供了更多的功能.要定义React组件类,您需要扩展React.Component: class Welcome extends Rea ...
随机推荐
- HTML Socket实现 .NET
HTML5 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等等.虽然现在大家把它捧的很火的样子,但是个人认为它还需要其他平台的支持才能真正的"火起 ...
- 利用python的爬虫技术爬取百度贴吧的帖子
在爬取糗事百科的段子后,我又在知乎上找了一个爬取百度贴吧帖子的实例,为了巩固提升已掌握的爬虫知识,于是我打算自己也做一个. 实现目标:1,爬取楼主所发的帖子 2,显示所爬去的楼层以及帖子题目 3,将爬 ...
- linux服务器证书安装指引
下面提供了3类服务器证书安装方法的示例: 1. Apache 2.x 证书部署 1.1 获取证书 Apache文件夹内获得证书文件 1_root_bundle.crt,2_www.domain.com ...
- WebService返回数据前台获取并处理JSON的相关问题
起因: 记录这个问题的起因是一次解答网友的问题,当初自己初次接触webservice时也遇到过,但在写答案时,并没有很深的印象,只是知道webservice在后台返回值的时候,那里是有个坑的.网友问的 ...
- js-面试题之字符串
问题:输入两个字符串,从第一个字符串中删除第二个字符串中的所有字符串不可以使用replace<!--例如:输入"They are students" 和"aeiou ...
- Linux简介与厂商版本上
Linux简介与厂商版本 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 1. Linux简介 Linux可以有狭义和广义两种 ...
- iOS StoreKit
简述: 本文讲解iOS系统框架StoreKit中的SKStoreProductViewController与SKStoreReviewController这两个Controller. SKStoreP ...
- AVL树的旋转操作详解
[0]README 0.0) 本文部分idea 转自:http://blog.csdn.net/collonn/article/details/20128205 0.1) 本文仅针对性地分析AVL树的 ...
- 如何高效实现扫描局域网IP、主机名、MAC和端口
近几年工作经常使用RFID识读器,智能家居网关,温湿度传感器.串口服务器.视频编码器等,一般是有串口和网口,由于现场原因一般较少使用串口,大多使用网口.连接方法是IP地址和端口,有的设备带搜索软件,有 ...
- c++标准库容器【转】
C++最原始的容器之一是数组.数组的特点有: 1.大小固定 2.单独存在的数组建立在栈上,作为对象成员存在的数组建立在堆上还是栈上则要看作为宿主对象是被建立在堆上还是栈上.栈空间是有限的,所以如果数组 ...