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 ...
随机推荐
- Tomcat+Eclipse乱码问题解决方法
概述 乱码问题是大家在日常开发过程中经常会遇到的问题,由于各自环境的不同,解决起来也费时费力,本文主要介绍一般性乱码问题的解决方法与步骤,开发工具采用Eclipse+Tomcat,统一设置项目编码UT ...
- Cassandra-java操作——基本操作
接着上篇博客,我们来谈谈java操作cassandra; 上篇博客的环境:jdk1.7 + python2.7.10 + cassandra2.2.8; 由于2.2.8没有对应的驱动文档,那么我们就用 ...
- 读书笔记 effective c++ Item 36 永远不要重新定义继承而来的非虚函数
1. 为什么不要重新定义继承而来的非虚函数——实际论证 假设我告诉你一个类D public继承类B,在类B中定义了一个public成员函数mf.Mf的参数和返回类型并不重要,所以假设它们都是void. ...
- 机器学习：python中如何使用朴素贝叶斯算法
这里再重复一下标题为什么是"使用"而不是"实现": 首先,专业人士提供的算法比我们自己写的算法无论是效率还是正确率上都要高. 其次,对于数学不好的人来说,为了实 ...
- 老李推荐：第14章6节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-装备ViewServer-启动ViewServer
老李推荐:第14章6节<MonkeyRunner源码剖析> HierarchyViewer实现原理-装备ViewServer-启动ViewServer poptest是国内唯一一家培养 ...
- 手机自动化测试：appium源码分析之bootstrap二
手机自动化测试:appium源码分析之bootstrap二 在bootstrap项目中的io.appium.android.bootstrap.handler包中的类都是对应的指令类, priva ...
- CSS3——复杂选择器
今天把视频里的CSS3复杂选择器部分看完了,来整理一下学到的知识点. 1.兄弟选择器:同一位置级别,可称为兄弟元素 a.相邻兄弟选择器:next紧紧跟在[当前元素之后的](一个),指定选择器的元素 ...
- 用Xamarin + VS 编写Android程序体验及其与Android Studio的比较
昨天看了微软2016Build大会,Xamarin免费了.恩,5亿美刀的家伙,哈哈,我也要体验一下..... 1. 首先在Xamarin官网下载安向导:https://www.xamarin.com/ ...
- 学习MVC之租房网站（二）-框架搭建及准备工作
在上一篇<学习MVC之租房网站(一)-项目概况>中,确定了UI+Service的“双层”架构,并据此建立了项目 接下来要编写Common类库.配置AdminWeb和FrontWeb 一.编 ...
- Java与面向对象之随感（1）
大一下学期上完了c++课程,当时自我感觉很良好,认为对面向对象编程已经是身经百战了,但是上了院里HuangYu老师的Java课之后,才发现自己对于面向对象的编程风格的理解只在皮毛,着实惭愧不已. 假设 ...