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>
- SQL Server安全(2/11):身份验证(Authentication)
- SQL Server安全(3/11):主体和安全对象(Principals and Securables)
- 在SQL Server里如何进行页级别的恢复
- 你可能不知道的字符比较中的“秘密”
- c++实现简单计算器
- re模块(正则表达式)
- Python学习——collections系列
- 为stackGan一个工程创建一个虚拟环境,python 2.7 tensorflow0.12-tensorflow 1.01
- linux 普通操作,查看资源使用情况
- Python 函数使用记录,join函数和os.path.join用法
- 01.SQLServer性能优化之----强大的文件组----分盘存储
- stackGan实验
- pyTorch基础入门练习
- 昨天遇到的几个常用函数
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- hexo 图片显示问题及使用typora设置图片路径
- 接口自动化项目实践
- 结对测试算法性能优化(代码层面)
- 结对测试算法性能优化(用例设计层面)
- 使用travisCI自动部署hexo博客并使用国内外不同dns
- 寻找cookie之旅
- send_keys报错element not interactable
- 博客园上传markdown文件
- Git比较分支差异的3个命令
- IntelliJ IDEA添加Class自动生成@author@date模板代码
- 如何优雅的封装requests
- nginx(一) 基础知识
- kubernetes(十三) k8s 集群监控
- TestNG跑个Demo并打个Jar包
- 01-Ansible基础学习