ES-6常用语法和Vue初识

一、ES6常用语法

1、变量的定义

1. 介绍
ES6以前 var关键字用来声明变量，无论声明在何处都存在变量提升这个事情，会提前创建变量。
作用域也只有全局作用域以及函数作用域，所以变量会提升在函数顶部或全局作用域顶部。
let 关键字表示变量，const 表示常量。都是块级作用域，比如一个函数内部，代码块{}内部~


不会报错：
<script>
    console.log(age);
    var age = 18;
</script>


<script>
    function f() {
        console.log(age);
        if(1){
            var age = 1;
        }
    }
</script>


会报错：
<script>
    console.log(age);
</script>



2. let：块级作用域,let定义的变量只能作用于一对花括号内{}

会报错：
<script>
    console.log(age);
    let age = 18;
</script>



<script>
    function f() {
        console.log(age);
        if (1) {
            let age = 1;
        }
    }
    f()
</script>


不会报错：
<script>
    let age = 18;
    console.log(age);
</script>



<script>
    function f() {
        if (1) {
            let age = 1;
            console.log(age);
        }
    }
    f()
</script>




3. 修改
var:可以重新定义，也可以重新赋值
let:不可以重新定义，但可以重新赋值
const:不可以重新定义，也不可以重新赋值


不会报错：
<script>
    var age = 18;
    var age = 20;
</script>

<script>
    var age = 18;
    age = 20;
</script>


<script>
    let age = 18;
    age = 20;
</script>



会报错：
<script>
    let age = 18;
    let age = 20;
</script>


<script>
    const age = 18;
    const age = 20;
</script>


<script>
    const age = 18;
    age = 20;
</script>

2、模板字符串

1. 语法：反引号``
2. 变量：${}
3. 相对于普通字符串：模板字符串可以换行，变量可以使用${}来替换
4. 示例
<body>
<div id="app">

</div>

<script>
   // 给div添加HTML代码
   let ele = document.getElementById("app");
   let hobby1 = "抽烟";
   let hobby2 = "打架";
   let hobby3 = "看女主播";
   ele.innerHTML = `<ul>
        <li>${hobby1}</li>
        <li>${hobby2}</li>
        <li>${hobby3}</li>
    </ul>`
</script>
</body>

如果使用普通的字符串：不可以换行，变量不能放在引号里面，因为在引号里面会被解析成普通字符而不是变量
ele.innerHTML = "<ul><li>" + hobby1 + "</li></ul>"

3、箭头函数

1. 介绍
类比Python的匿名函数


2. this
-- 普通函数的this取决于函数最近的调用者
-- 箭头函数的this取决于当前上下文的环境


3. 箭头函数示例
3-1、
ES6中允许使用“箭头”(=>)定义函数
var f = a => a;
相当于
var f = function( a )  {
    return a;
}

3-2、无参数的箭头函数
var f = () => 10;
相当于
var f = function() { 
    return 10;
}


3-3、有参数的箭头函数
var sum = (a, b) => a + b;
相当于
var sum = function(a, b) {
    return a +b;
}


4. this是谁
<script>
    // 普通函数的this取决于函数最近的调用者
    // 箭头函数的this取决于当前上下文的环境

    // 普通函数
    function aa() {
        console.log(this)
    }

    aa();  // aa这个函数最近的调用者是window，this是window

    let obj1 = {
        a: 1,
        func: aa
    }
    obj1.func();  // aa这个函数最近的调用者是obj1，this是obj1

    let obj2 = {
        obj1: obj1,
        a: 2
    }
    obj2.obj1.func();  // aa这个函数最近的调用者是obj1，this是obj1

    // 箭头函数
    let fun2 = () => this;
    console.log(fun2())  // 这个箭头函数是在window下调用的，this是window
</script>

4、数据的解构(相当于python的*args, **kwargs)

1. 解构对象 let {key， key} = obj
<script>
    // 定义对象
    let obj = {
        a: 1,
        b: 2,
        x: 3,
        y: 4
    };

    // 解析对象
    let {x, y} = obj;

    console.log(x);  // 3
    console.log(y);  // 4
</script>



2. 解构数组 let [x, y, x] = array
<script>
    // 定义数组
    let hobby = ["吹牛", "泡妞", "打架"];

    // 解析数组
    let [hobby1, hobby2, hobby3] = hobby;

    console.log(hobby1);  // 吹牛
    console.log(hobby2);  // 泡妞
    console.log(hobby3);  // 打架
</script>

5、类的定义：ES6中已经开始支持使用class定义类

1. 定义类：class
2. 构造方法：constructor(相当于python中__init__)
3. 没有self，只有this，this代表这个类本身
4. 继承使用关键字：extends
5. 继承后的子类没有this，需要用super方法来找到父类的this

6. 例子

<script>
    class Animal {
        // 初始化
        constructor(){
            // 设置一个属性名为type
            this.type = "animal"
        };
        // say方法
        say(){
            console.log("FFFFFUUUU")
        }
    };
    // 狗类继承动物类
    class Dog extends Animal {
        // 子类没有this
        constructor(){
            // 用super方法拿到父类的this
            super();
            // 修改属性type的值
            this.type = "dog"
        }
        // 重写say方法
        say(){
            console.log("wow wow wow")
        }
    }
    let animal = new Animal();
    console.log(animal.type);  // animal
    animal.say()  // FFFFFUUUU

    let dog = new Dog();
    console.log(dog.type);  // dog
    dog.say()  // wow wow wow
    // 如果Dog类没有重写say方法，那么则会使用父类的say方法
</script>

View Code

6、import export

1. 介绍
在ES6中，import 导入模块、export导出模块
一个js文件可以导入另一个js文件的变量，但是目前浏览器并不支持这种语法，
不过在后面会讲到 打包 ，打包后就可以使用，现在演示一下语法(目前没有打包，会报错的，这里只是演示语法)

2. aa.js
let name = "xiaoming";
let age = 18;
// export抛出变量，其他js文件就可以导入这些抛出的变量
export {name, age}

3. index.js
// import导入aa抛出的变量
import {name, age} from "aa"

console.log(name)
console.log(age)

4. HTML文件
<script src="index.js"></script>

二、Vue初识

1、Vue框架介绍

Vue是一个构建数据驱动的web界面的渐进式框架。
目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。

使用Vue需要引入相应的JS文件，可到官网下载或者直接使用CDN：https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js

借鉴后端的MVC架构模式：  Model数据  Views模板 Controler数据与模板交互的控制器
    Vue是MVVM架构：Model数据  View模板  ViewModel为模板提供处理好的数据
    主要思想是数据驱动视图 
    从获取DOM渲染DOM的操作中解脱出来

2、Vue常用指令

1. 介绍
Vue的指令directives很像我们所说的自定义属性，指令是Vue模板中最常用的功能，
它带有v-前缀，功能是当表达式改变的时候，相应的行为作用在DOM上。

两种获取数据方式：
    1. {{数据}}
    {{name}}  获取数据name

    2. v-..="数据"
    <h3 v-text="age"></h3>


2. demo

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" charset="utf-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <!--使用Vue的数据name-->
    {{name}}
</div>

<script>
    // 实例化一个Vue对象，其中el必须要有
    const app = new Vue({
        el: "#app",  // el表示这个Vue对象的作用域是id为app的这块，无论app这块嵌套了多少个div，都可以使用这个对象
        data: {  // data存放数据
            name: "小明",
        }
    
    })
</script>

</body>
</html>

上面代码相当于：
let ele = document.getElementById("app");
ele.innerText = "小明";

View Code


3. v-text：相当于innerText

<body>
<div id="app">
    <h3 v-text="name"></h3>
    <h3 v-text="age"></h3>
</div>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            name: "狗明",
            age: 18,
        }
    
    })
</script>
</body>

View Code