写在前面

真的是要全栈了，提前了解多个方向也挺好的，说不定到了后面就转了哈哈。没有想到谷粒学苑前端讲的都这么细，真得好好学了。虽然在学Javaweb的时候在黑马学了一点前端的基础，html的常用标签以及css和JavaScript常规语法，但是好像已经忘记了，当时只截了图没有像这样做过笔记，现在可得好好的再看一次了。加油！(ง •_•)ง
我必须说一下这第四天的学习，很乱，我都不知道怎么记笔记了。学的好多东西我感觉我现在写的时候都忘记了。只能大概梳理一下加深一下印象了。

前端ES6标准

ECMAScript 6 简介

1、ECMAScript 和 JavaScript 的关系
一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？
要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）

2、ES6 与 ECMAScript 2015 的关系
ECMAScript 2015（简称 ES2015）这个词，也是经常可以看到的。它与 ES6 是什么关系呢？
2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。
ES6 的第一个版本，在 2015 年 6 月发布，正式名称是《ECMAScript 2015 标准》（简称 ES2015）。
2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布，这个版本可以看作是 ES6.1 版，因为两者的差异非常小，基本上是同一个标准。根据计划，2017 年 6 月发布 ES2017 标准。
因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

基本语法

let声明变量

var声明的变量没有局部作用域
let声明的变量有局部作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    //es6如果定义一个变量，定义变量特点
    //js定义：var a = 1;
    //es6写法定义变量，使用关键字 let   let a = 1;
    //1、创建代码块，定义变量
    {
        var a = 10;//在里外都可用(全局使用)
        let b = 20;//在外不可用了(局部使用)
    }
    //2、在代码块 外面输出
    console.log(a);
    console.log(b);

</script>
1
2
3
4
5
6
7
8
9
10
11
<script>
    //var可以声明多次
    //let只能声明一次
    var a = 1;
    var a = 2;

    let m = 10;

    console.log(a);
    console.log(m);
</script>

const声明常量

1
2
3
4
5
6
7
8
9
<script>
    //定义常量
    const PI = "3.1415926";
    //常量值一旦定义，不能够改变
    //PI = 3;

    //定义常量必须初始化
    console.log(PI);
</script>

解构赋值

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

数组解构以及对象解构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
    //数组解构
    //传统写法
    let a=1,b=2,c=3;
    console.log(a,b,c);

    //es6写法
    let [x,y,z] = [10,20,30];
    console.log(x,y,z);

    //定义对象
    let user = {"name":"Herry","age":20}

    //传统从对象里面获取值
    let name1 = user.name;
    let age1 = user.age;
    console.log(name1+"=="+age1);

    //es6写法从对象里面获取值
    let {name,age} = user//注意大括号中的name和age要和定义的对象属性值一致
    console.log(name+"**"+age);
</script>

模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    //1 使用`符号实现换行
    let str1 = `hello,
    es6 demo up!`
    console.log(str1)

    //2 在`符号里面可将字符串插入变量和表达式，变量名写在${}中，${}中可以放入JavaScript表达式
    let name ="Mike"
    let age = 20

    let str2 = `hello,${name},age is ${age+1}`
    console.log(str2)

    //3 在`符号里面，字符串中可调用函数
    function f1() {
        return "hello f1"
    }
    let str3 = `demo,${f1()}`
    console.log(str3)
</script>

声明对象和方法简写

声明对象简写

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    const age = 12
    const name = "lucy"

    //传统方式定义对象
    const p1 = {name:name,age,age}//第一个name指的是key的名称，第二个name取的是key对应的值，有点键值对的意思。
    console.log(p1)

    //es6定义变量
    const p2 = {name,age}//直接简写传值就行了
    console.log(p2)
</script>

定义方法简写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
    //传统方式定义的方法
    const person1 = {
        sayHi:function(){
            console.log("Hi")
        }
    }
    //调用
    person1.sayHi()

    //es6
    const person2 = {
        sayHi(){
            console.log("Hi")
        }
    }
    //调用
    person2.sayHi()
</script>

对象拓展运算符

拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    //对象拓展运算符: ...
    //1 对象拷贝
    let person1 = {name:"崽崽",age:20}
    let someone = {...person1}
    console.log(someone)// ...加上一个对象名就表示对象拷贝了(好草率哈哈)

    //2 合并对象
    let name = {name:"崽崽"}
    let age = {age:20}
    let p2 = {...name,...age}
    console.log(p2)
</script>

箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：
参数 => 函数体
当箭头函数没有参数或者有多个参数，要用 () 括起来。
当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    //传统写法
    var f1 = function(a) {
        return a
    }
    console.log(f1(1))

    //es6中的箭头函数改造
    var f2 = a => a//对应传统方法，第一个a是传入参数，第二个a是返回值
    console.log(f2(2))

    //2 复杂一点的方法
    var f3 = function(a,b){
        return a+b
    }
    console.log(f3(1,2))

    var f4 = (a,b) => a+b;
    console.log(f4(1,3))
</script>

Vue.js

基本介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

基本用法

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>

    <div id="app">
        <!-- {{}} 插值表达式，绑定vue中的data数据 -->
        {{message}}
    </div>

    <script src="vue.min.js"></script><!-- 引入vue的js文件-->

    <script>
        //创建一个vue对象
        new Vue({
            el: '#app',//绑定vue作用的范围
            data: {//定义页面中显示的模型数据
                message: 'Hello Vue!'
            }
        })
        
    </script>
</body>

创建测试代码片段

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets
注意：制作代码片段的时候，字符串中如果包含文件中复制过来的“Tab”键的空格，要换成“空格键”的空格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
        "vue htm": {
        "scope": "html",
        "prefix": "vuehtml",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "    <meta charset=\"UTF-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "    <title>Document</title>",
            "</head>",
            "",
            "<body>",
            "    <div id=\"app\">",
            "",
            "    </div>",
            "    <script src=\"vue.min.js\"></script>",
            "    <script>",
            "        new Vue({",
            "            el: '#app',",
            "            data: {",
            "                $1",
            "            }",
            "        })",
            "    </script>",
            "</body>",
            "",
            "</html>",
        ],
        "description": "my vue template in html"
    }
}

基本语法

指令 v-bind

你看到的 v-bind 特性被称为指令。指令带有前缀 v-
也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
    <div id="app">
        <!-- v-bind指令
            单向数据绑定
            这个指令一般用来在标签属性里面，获取值    
        -->
        <h1 v-bind:title="message"><!-- v-bind使用方法：v-bind:+标签名 -->
            {{content}}
        </h1>

        <!-- 简写方式: 就加:+标签名 -->
        <h2 :title="message">
            {{content}}
        </h2>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: '我是标题',
                message: '页面加载于' + new Date().toLocaleString()
            }
        })
    </script>
</body>

双向数据绑定

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定
单向绑定使用v-value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
    <div id="app">
        <!-- v-bind:value只能进行单向的数据渲染 -->
        <input type="text" v-bind:value="searchMap.keyWord">
        <!-- v-model 可以进行双向的数据绑定 -->
        <input type="text" v-model="searchMap.keyWord">

        <p>您要查询的是:{{searchMap.keyWord}}</p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: '尚硅谷'
                }
            }
        })
    </script>
</body>

事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
    <div id="app">
        <!-- vue中绑定事件 -->
        <button v-on:click="search()">查询</button>
        <!-- 简略写法，@代替v-on 而且方法可以不加括号(建议写上) -->
        <button @click="f1">查询函数</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: '尚硅谷'
                },
                //查询结果
                result: {}
            },
            methods:{//定义多个方法
                search(){
                    console.log("search...")
                },
                f1(){
                    console.log("f1...")
                }
            }
        })
    </script>
</body>

修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
即阻止事件原本的默认行为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<body>
    <div id="app">
        <!-- 
            修饰符用于指出一个指令应该以特殊方式绑定。
            这里的prevent 修饰符告诉 v-on 指令对于触发的时间调用js的 event.preventDefalut();
            即阻止表单提交的默认行为
         -->
        <form action="save" v-on:submit.prevent="onSubmitForm">
            <input type="text" id="name" v-model="user.name"/>
            <button type="submit">保存</button>
        </form>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{
            
                }
            },
            methods:{
                onSubmitForm(){
                    if(this.user.name){
                        console.log('提交表单')
                    }else {
                        alert('请输入用户名')
                    }
                }
            }
        })
    </script>
</body>

v-if指令

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <div id="app">
        <input type="checkbox" v-model="ok">是否同意永远？</input>
        <h1 v-if="ok">你真的好可爱呀</h1>
        <h1 v-else>为什么不同意捏？</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>
</body>

v-for指令

v-for：列表循环指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<body>
    <div id="app">
        <ul>
            <!-- n是要遍历的值,随便取，10表示遍历十次，中间用in连接 -->
            <li v-for="n in 10">{{n}}</li>
        </ul>

        <ol>
            <!-- index表示索引值 -->
            <li v-for="(n,index) in 10">{{n}} -- {{index}}</li>
        </ol>

        <hr></hr>

        <table border="5">
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList:[
                    { id: 1, username: 'herry', age: 18},
                    { id: 2, username: '崽崽', age: 19},
                    { id: 3, username: 'hg', age: 20}
                ]
            }
        })
    </script>
</body>

Vue的组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

局部组件

1
2
3
4
5
6
7
8
9
10
11
var app = new Vue({
    el: '#app',
    // 定义局部组件，这里可以定义多个局部组件
    components: {
        //组件的名字
        'Navbar': {
            //组件的内容
            template: '<ul><li>首页</li><li>学员管理</li></ul>'
        }
    }
})

写完这个方法就可以调用

1
2
3
<div id="app">
    <Navbar></Navbar>
</div>

全局组件

1
2
3
4
// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})
1
2
3
4
5
6
7
8
9
10
11

<div id="app">
    <Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
    var app = new Vue({
        el: '#app'
    })
</script>

Vue的生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    <div id="app">
        hello
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            },
            created(){
                debugger
                //在页面渲染之前执行
                console.log('created...')
            },
            mounted(){
                debugger
                //在页面渲染之后执行
                console.log('mounted...')
            }
        })
    </script>
</body>

路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库

引入js文件

1
2
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

编写html以及js部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<body>
    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!-- 使用router-link 组件来导航 -->
            <!-- 通过传入 'to' 属性指定链接， -->
            <!-- <router-link>默认会被渲染成一个'<a>'标签 -->
                <router-link to="/">首页</router-link>
                <router-link to="/student">会员管理</router-link>
                <router-link to="/teacher">讲师管理</router-link>

                <!-- 路由出口 -->
                <!-- 路由匹配到的组件将渲染在这里 -->
                <router-view></router-view>
        </p>
    </div>
    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>

    <script>
            // 1. 定义（路由）组件。
            // 可以从其他文件 import 进来
            const Welcome = { template: '<div>欢迎</div>' }
            const Student = { template: '<div>student list</div>' }
            const Teacher = { template: '<div>teacher list</div>' }
            // 2. 定义路由
            // 每个路由应该映射一个组件。
            const routes = [
                { path: '/', redirect: '/welcome' }, //设置默认指向的路径
                { path: '/welcome', component: Welcome },
                { path: '/student', component: Student },
                { path: '/teacher', component: Teacher }
            ]
            // 3. 创建 router 实例，然后传 `routes` 配置
            const router = new VueRouter({
                routes // （缩写）相当于 routes: routes
            })
            // 4. 创建和挂载根实例。
            // 从而让整个应用都有路由功能
            const app = new Vue({
                el: '#app',
                router
            })
            // 现在，应用已经启动了！
        </script>
</body>

axios

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端
在浏览器中可以帮助我们完成 ajax请求的发送
在node.js中可以向远程接口发送请求

设置假数据

1
2
3
4
5
6
7
8
9
10
11
12
{
    "success":true,
    "code":20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"herry","age":20},
            {"name":"崽崽","age":19},
            {"name":"jack","age":40}
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<body>
    <div id="app">
        <!-- 把numberList数组里面数据显示 使用v-for指令 -->
        <div v-for="user in numberList">
            {{user.name}} -- {{user.age}}
        </div>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定结构
            data: {//在data定义变量和初始值
                //定义变量，值为空数组
                numberList: []
            },
            created(){//页面渲染之前执行
                //调用定义的方法
                this.getUserList()
            },
            methods:{//编写具体的方法
                //创建方法 查询所有用户的数据
                getUserList(){
                    //使用axios发送ajax请求
                    //axios.提交方式(括号内写的是请求路径，这里是测试).then(箭头函数).catch(箭头函数)
                    axios.get("data.json")
                        .then(response => {
                            //response就是请求之后的返回数据
                            //console.log(response)
                            //通过response获取具体数据，赋值给定义空数组
                            this.numberList = response.data.data.items
                            console.log(this.numberList)
                        })//请求成功执行then方法
                        .catch(error => {

                        })//请求失败执行cath方法
                }
            }
        })
    </script>
</body>

Node.js

介绍

1、什么是Node.js
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

2、Node.js有什么用
如果你是一个前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那么Node.js是一个非常好的选择。
Node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。

当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。

安装

1、下载
官网：https://nodejs.org/en/
中文网：http://nodejs.cn/
LTS：长期支持版本
Current：最新版

2、安装

3、查看版本
node -v

快速入门

直接在控制台用就好了

浏览器的内核包括两部分核心：
DOM渲染引擎；
js解析器（js引擎）
js运行在浏览器中的内核中的js引擎内部
Node.js是脱离浏览器环境运行的JavaScript程序，基于V8 引擎（Chrome 的 JavaScript的引擎）