欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue2.0中使用ES6

程序员文章站 2022-06-27 07:52:56
...

        在学习Vue.js之前,我们首先要了解ES6,ECMAScript 6(简称ES6)是JavaScript的语言标准。我是在Vue-cli脚手架上进行ES6的学习,Vue环境的搭建可以看我上一篇博客(小飞机

        1.let与const命令

        Vue2.0中使用ES6

        需要注意的一点是:let只在当前所在的代码块有效。

        所以在for循环中我们一般用let命令

        Vue2.0中使用ES6

        2.数组

         在ES6之前,为变量赋值是这样的

         Vue2.0中使用ES6

         ES6后可以采用let[a,b] = [1,2]的形式

       3.函数参数的默认值

            Vue2.0中使用ES6

          Vue2.0中使用ES6

        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 '路径...';
    }
  };
相关标签: ES6