Vue2.0中使用ES6
在学习Vue.js之前,我们首先要了解ES6,ECMAScript 6(简称ES6)是JavaScript的语言标准。我是在Vue-cli脚手架上进行ES6的学习,Vue环境的搭建可以看我上一篇博客(小飞机) 1.let与const命令 需要注意的一点是:let只在当前所在的代码块有效。 所以在for循环中我们一般用let命
·
在学习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 '路径...';
}
};
更多推荐
已为社区贡献1条内容
所有评论(0)