Vue2.0中使用ES6
程序员文章站
2022-06-27 07:52:56
...
在学习Vue.js之前,我们首先要了解ES6,ECMAScript 6(简称ES6)是JavaScript的语言标准。我是在Vue-cli脚手架上进行ES6的学习,Vue环境的搭建可以看我上一篇博客(小飞机)
1.let与const命令
需要注意的一点是:let只在当前所在的代码块有效。
所以在for循环中我们一般用let命令
2.数组
在ES6之前,为变量赋值是这样的
ES6后可以采用let[a,b] = [1,2]的形式
3.函数参数的默认值
4.最重要的是Vue中script下的export default
以下是我对Vue.js需要用到的一些基础的ES6的内容的理解。
export default {
props: { //用于接收父组件向子组件传递的数据
tester: {
type: Object
}
},
data() { //本组件的数据
return {
tests: [],
selectedTest: {}
};
},
computed: { //计算属性,所有get,set的this上下文都被绑定到Vue实例
方法名() {
//.....
}
},
created() { //在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
this.classMap = ['a', 'b', 'c', 'd', 'e'];
//如进行异步数据请求
this.$http.get('/api/tests').then((response) => {
response = response.body;
if (response.errno === 0) {
this.goods = response.data;
}
});
},
mounted() { //在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作
this.$nextTick(() => {
this._initScroll();
this._initPics();
});
},
methods: { //定义方法
方法名(参数) {
//...
}
},
filters: { //过滤器,可用来写,比如格式化日期的代码
//例
formatDate(time) {
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm');
}
},
watch: { //用来观察Vue实例的数据变动,后执行的方法
//...
},
components: { //注册组件,首先要在最上面导入组件
//如test(要在export default上加入import test from '路径...';
}
};
推荐阅读
-
Linux中的MySQL使用(CentOS默认安装)
-
php中curl使用指南,phpcurl使用指南_PHP教程
-
会声会影x4注册机使用方法 PHP中strtotime函数使用方法分享
-
jQuery中length与size()使用区别有哪些
-
在Python中处理字符串之isdecimal()方法的使用
-
Sql Server中REPLACE函数的使用
-
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试_javascript技巧
-
解析使用substr截取UTF-8中文字符串出现乱码的问题
-
HTML 中 dl(dt,dd)、ul(li)、ol(li) 的使用方法
-
JavaScript设计模式开发中组合模式的使用教程(高级篇)