vuejs学习4.4 vueCLI3和箭头函数

vueCLI3创建项目

vueCLI3基本上零配置

vue create vuecli3learn

然后pick a preset选择一个配置，这里选择Manually select features来手动选择配置，（空格选择取消），选择完成回车

这里选择单独的配置文件便于修改
选择n，
如果选择了向想删掉，可以找到vuerc文件删掉下面红框内容

vueCLI3目录结构

main.js

new Vue({
  render: h => h(App),
}).$mount('#app')

和之前el几乎没有区别，意思一样

vueCL3配置文件

启动本地服务 vue ui

在任意一个终端

查看隐藏配置

在node_modules下的@vue/@cli-service/lib/config下

修改配置

在当前目录创建vue.config.js，里面添加配置文件，和默认配置进行合并

箭头函数

箭头函数是es6语法

基本使用

//箭头函数：也是一种定义函数的方式
  //1，定义函数的方式：function
  const aaa = function () {

  }
  //2，对象自变量中定义函数
  const obj = {
    bbb(){

    }
  }
  //ES6中箭头函数
  const ccc = (参数列表) => {

  }

参数和返回值

//参数问题
  //1.1，放入两个参数
  const sum = (num1,num2) =>{
    return num1+num2;
  }
  //1.2，放入一个参数，一个参数时括号可以省略
  const power = (num) =>{
    return num*num;
  }
  const power2 = num =>{
    return num*num;
  }
  //2，函数中的代码数量问题
  //2.1，函数代码中有多行代码
  const test = () =>{
    console.log("hello world");
    console.log("hello vuejs");
  }
  //2.2，函数代码中只有一行代码，且是返回值
  const mul = (num1,num2) => num1*num2 ;
  //2.3，函数代码中只有一行代码，没有返回值，只有打印
  const demo = () => console.log("hello world");
  //console.log("hello world");没有返回值，所以返回值为undefined
  console.log(demo());//打印undefined

箭头函数中的this使用

//结论：箭头函数中的this引用的最近作用域中的this
  const obj = {
    aaa(){
      setTimeout(function () {
        console.log(this)//打印window
      })
    }
  }
  obj.aaa();
  const obj2 = {
    bbb(){
      setTimeout(() => {
        console.log(this)
        //打印obj对象(最近作用域为bbb的this，为obj)
      })
    }
  }
  obj2.bbb();
  setTimeout(function () {
    console.log(this)//打印window
  })
  setTimeout(()=>{
    console.log(this);//打印window(最近作用域为window的this)
  },3000)