在学习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 '路径...';
    }
  };
Logo

前往低代码交流专区

更多推荐