vue-cli3/es6箭头函数

vue-cli3

新建脚手架3项目：vue create testvuecli3。
可视化运行管理：vue ui
如果需要改一些配置，在最上层的文件夹下创建vue.config.js

es6箭头函数

1.基本使用

<script>
        //箭头函数也是定义函数的一种方式
        //1.定义函数的方式
        const aaa = function(){
        }
        //2.对象字面量定义函数
        const obj = {
        },

        //3.es6 箭头函数
        // const ccc = (参数列表)=>{

        // }
        const ccc = ()=>{
            
        }
    </script>

2.参数和返回值

<script>
        //1.参数问题
        //1.1放入两个参数
        const sum = (num1,num2) => {
            return num1+num2
        }
        //1.2放入一个参数 小括号可以省略
        const power = num => {
            return num*num
        }
        //2.函数中的代码数
        //2.1函数代码块中有多行代码时
        const test =()=>{
            console.log('helloworld')
            console.log('hello vue')
        }
        //2.2函数代码块中只有一行代码
        const mul = (num1,num2) => num1*num2
        const demo = () => console.log('hello world')
        console.log(demo())
    </script>

3.箭头函数中的this

<script>
        //什么时候使用箭头函数：一个函数要接收一个函数
        setTimeout(function(){
            console.log(this)
        },1000)

        setTimeout(()=>{
            console.log(this)
        },1000)

        //结论：箭头函数的this引用的就是最近作用域中的this
        //箭头函数中的this查找：向外层作用域一层一层查找，直到有this的定义
        const obj={
            aaa(){
                setTimeout(function(){
                    console.log(this) //window
                },1000)

                setTimeout(()=> {
                    console.log(this) //obj对象
                },1000) 
            }
        }
        obj.aaa()
    </script>