❤ 作者主页：欢迎来到我的技术博客😎
❀ 个人介绍：大家好，本人热衷于 Java后端开发，欢迎来交流学习哦！(￣▽￣)~*
🍊 如果文章对您有帮助，记得关注、点赞、收藏、评论⭐️⭐️⭐️
📣 您的支持将是我创作的动力，让我们一起加油进步吧！！！🎉🎉

@TOC

一、前端开发和前端开发工具

一、前端开发

PRD（产品原型-产品经理） - PSD（视觉设计-UI工程师） - HTML/CSS/JavaScript（PC/移动端网页，实现网页端的视觉展示和交互-前端工程师）。

二、下载和安装VS Code

下载地址

https://code.visualstudio.com/

安装

三、初始设置

中文界面配置

首先安装中文插件：Chinese (Simplified) Language Pack for Visual Studio Code
右下角弹出是否重启vs，点击“yes”
有些机器重启后如果界面没有变化，则点击左边栏Manage -> Command Paletet...【Ctrl+Shift+p】
在搜索框中输入“configure display language”，回车
打开locale.json文件，修改文件下的属性 "locale":"zh-cn"
重启vs code

插件安装

为方便后续开发，建议安装如下插件（红色矩形框标记的插件）
在这里插入图片描述

创建项目

vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如project_xxxx。
然后打开vscode，再在vscode里面选择 File -> Open Folder 打开文件夹，这样才可以创建项目。

保存工作区

打开文件夹后，选择“文件 -> 将工作区另存为...”，为工作区文件起一个名字，存储在刚才的文件夹下即可。

新建文件夹和网页

在这里插入图片描述

预览网页
以文件路径方式打开网页预览

需要安装“open in browser”插件：
文件右键 -> Open In Default Browser

**以服务器方式打开网页预览**

需要安装“Live Server”插件：
文件右键 -> Open with Live Server

左边栏Manage -> settings -> 搜索 “font” -> Font size

开启完整的Emmet语法支持

设置中搜索 Emmet：启用如下选项，必要时重启vs
请添加图片描述

二、ES6入门

一、ECMAScript 6 简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

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 语言”。

二、基本语法

ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
本部分只学习前端开发中ES6的最少必要知识，方便后面项目开发中对代码的理解。

1. let声明变量

创建 let.html

<script>
    // es6如何定义变量，定义变量特点
    // js定义变量： var a =10;
    // es6写法定义变量： 使用关键字 let；let a = 10;

    {//代码块
        var a = 10;
        let b = 20;
    }
    //在代码块，外面输出变量
    console.log(a)  // 0
    console.log(b)  // ReferenceError: b is not defined

</script>

<script>
    // var 可以声明多次
    // let 只能声明一次
    var m = 1;
    var m = 2;
    let n = 3;
    let n = 4;
    console.log(m)  // 2
    console.log(n)  // Identifier 'n' has already been declared
</script>

2. const声明常量（只读变量）

创建 const.html

<script>
    //const 声明之后不允许改变
    const PI = "3.1415926"
   PI = 3  // TypeError: Assignment to constant variable.
</script>

<script>
    //const 一但声明必须初始化，否则会报错
    const MY_AGE  // SyntaxError: Missing initializer in const declaration
</script>

3. 解构赋值

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

<script>
//数组解构
    
    // 传统
    let a=1 ,b = 2, c= 3
    console.log(a,b,c)

    // ES6
    let [x,y,z]=[1,2,3]
    console.log(x,y,z)

</script

<script>
    
    let user = {name:'achang',age:18}
    //传统
    let name1 = user.name;
    let age1 = user.age;
    console.log(name1,age1);
    //ES6
    let {name,age} = user //注意：结构的变量必须是user中的属性
    console.log(name,age);

</script>

4. 模板字符串

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

<script>
    let str = `Hey,
    can you stop angry now?`
    console.log(str);
    //Hey,
    //can you stop angry now？
</script>

<script>

    let name = 'Tom'
    let age = 18
    let info = `My Name is ${name},I am ${age+1} years old next year.`
    console.log(info);
    //My Name is Tom,I am 19 years old next year.

</script>

<script>

    function f(){
        return 'have fun!'
    }
    let str = `the game start,${f()}`
    console.log(str);
    //the game start,have fun!

</script>

5. 声明对象简写

<script>
    
    const age = 12
    const name ='Amy'

    //传统
    const person1 =  {age: age,name: name}
    console.log(person1);

    //ES6
    const person2 = {age,name}
    console.log(person2) //{age: 12, name: "Amy"}

</script>

6. 定义方法简写

创建定义方法简写.html

<script>

    //传统
    const person1 = {
        sayHi:function(){
            console.log("hi");
        }
    }
    person1.sayHi();//hi

    //ES6
    const person2 = {
        sayHi(){
            console.log("h1");
        }
    }
    person2.sayHi();//h1

</script>

7. 对象拓展运算符

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

<script>

    //拷贝对象
    let person1 = {name:'Amy',age:17}
    let someone = {...person1}
    console.log(someone); //{name:'Amy',age:17}

</script>

<script>

    //合并对象
    let age = {age:15}
    let name = {name:'Amy'}
    let person2 = {...age,...name}
    console.log(person2); //{age:15,name:'Amy'}

</script>

8. 箭头函数

创建箭头函数.html
箭头函数提供了一种更加简洁的函数书写方式。基本语法是：

参数 => 函数体

// 传统
var f1 = function(a){
return a
}
console.log(f1(1))

// ES6
var f2 = a => a
console.log(f2(1))

// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {
let result = a+b
return result
}
console.log(f3(6,2)) // 8
// 前面代码相当于：
var f4 = (a,b) => a+b

箭头函数多用于函数的定义。

三、Vue

一、介绍

1. Vue.js 是什么

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

官方文档：https://cn.vuejs.org

2. 初始Vue.js

创建 demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- id标识vue作用的范围 -->
    <div id="app">
        <!-- {{}} 插值表达式，绑定vue中的data数据 -->
        {{message}}
    </div>

    <script src="vue.min.js"></script>

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

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

在vs code中创建代码片段：
文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets

{

        "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"
    
        }
    
    }

二、基本语法

1. 基本数据渲染和指令

创建 01-基本数据渲染和指令.html
你看到的 v-bind 特性被称为指令。指令带有前缀 v-
除了使用插值表达式 {{}} 进行数据渲染，也可以使用 v-bind 指令，它的简写的形式就是一个冒号（:）

<!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">
        <!-- v-bind指令
            单向数据绑定
            这个指令一般用在标签属性里面，获取值
        -->
        <h1 v-bind:title="message">
            {{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>

</html>

2. 双向数据绑定

创建 02-双向数据绑定.html
双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定

<!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">
        <input type="text" v-bind:value="searchMap.keyWord"/>
        <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>

</html>

3. 事件

创建 03-事件.html
需求：点击查询按钮，按照输入框中输入的内容查找公司相关信息
在前面的例子基础上，data节点中增加 result，增加 methods节点并定义 search方法。

<!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">
        <!-- vue绑定事件 -->
        <button v-on:click="search()">查询</button>

        <!-- vue绑定事件简写 -->
        <button @click="search()">查询2</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>

</html>

4. 修饰符

创建 04-修饰符.html

<!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">
        <form action="save" v-on:submit.prevent="onSubmit">
            <input type="text" id="name" v-model="user.username"/>
            <button type="submit">保存</button></button>
        </form>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user: {}
            },
            methods:{
                onSubmit() {
                    if (this.user.username) {
                        console.log('提交表单')
                    } else {
                        console.log('请输入用户名')
                    }
                }   
            }
        })
    </script>
</body>

</html>

5. 条件渲染

创建 05-条件渲染.html

<!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">
        <input type="checkbox" v-model="ok"/> 是否同意
        <!-- 条件指令 v-if v-else -->
        <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>

</html>

6. 列表渲染

创建 06-列表渲染.html

<!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">
        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul> 
        <ol>
            <li v-for="(n, index) in 10">{{n}} -- {{index}}</li>
        </ol>

        <hr>

        <table border="1">
            <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: 'helen', age: 18 },
                        { id: 2, username: 'peter', age: 28 },
                        { id: 3, username: 'andy', age: 38 }
                    ]
            }
        })
    </script>
</body>

</html>

7. 组件（重点）

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

局部组件

创建 01-1-局部组件.html

定义组件：

 <script>
        new Vue({
            el: '#app',
            // 定义局部组件，这里可以定义多个局部组件
            components: {
            //组件的名字
            'Navbar': {
                //组件的内容
                template: '<ul><li>首页</li><li>学员管理</li></ul>'
        }
    }
        })
    </script>

使用组件：

 <div id="app">
        <Navbar></Navbar>
</div>

全局组件

创建 01-2-全局组件.html

定义全局组件：components/Navbar.js

// 定义全局组件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})

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

7. 生命周期

在这里插入图片描述
创建 03-vue实例的生命周期.html

data: {
    message: '床前明月光'
},
methods: {
    show() {
        console.log('执行show方法')
    },
    update() {
        this.message = '玻璃好上霜'
    }
},

<button @click="update">update</button>
<h3 id="h3">{{ message }}</h3>

分析生命周期相关方法的执行时机:

//===创建时的四个事件
beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行
    console.log(this.message) //undefined
    this.show() //TypeError: this.show is not a function
    // beforeCreate执行时，data 和 methods 中的 数据都还没有没初始化
},
created() { // 第二个被执行的钩子方法
    console.log(this.message) //床前明月光
    this.show() //执行show方法
    // created执行时，data 和 methods 都已经被初始化好了！
    // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount() { // 第三个被执行的钩子方法
    console.log(document.getElementById('h3').innerText) //{{ message }}
    // beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
},
mounted() { // 第四个被执行的钩子方法
    console.log(document.getElementById('h3').innerText) //床前明月光
    // 内存中的模板已经渲染到页面，用户已经可以看见内容
},

//===运行中的两个事件
beforeUpdate() { // 数据更新的前一刻
    console.log('界面显示的内容：' + document.getElementById('h3').innerText)
    console.log('data 中的 message 数据是：' + this.message)
    // beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染
},
updated() {
    console.log('界面显示的内容：' + document.getElementById('h3').innerText)
    console.log('data 中的 message 数据是：' + this.message)
    // updated执行时，内存中的数据已更新，并且页面已经被渲染
}

8. 路由

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

引入 js

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

编写html

<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>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    </div>

编写js

 <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>

创作不易，如果有帮助到你，请给文章==点个赞和收藏==，让更多的人看到！！！
==关注博主==不迷路，内容持续更新中。

谷粒学院——Day03【项目前端相关基础知识一】

一、前端开发和前端开发工具

一、前端开发

二、下载和安装VS Code

三、初始设置

二、ES6入门

一、ECMAScript 6 简介

1. ECMAScript 和 JavaScript 的关系

2. ES6 与 ECMAScript 2015 的关系

二、基本语法

1. let声明变量

2. const声明常量（只读变量）

3. 解构赋值

4. 模板字符串

5. 声明对象简写

6. 定义方法简写

7. 对象拓展运算符

8. 箭头函数

三、Vue

一、介绍

1. Vue.js 是什么

2. 初始Vue.js

二、基本语法

1. 基本数据渲染和指令

2. 双向数据绑定

3. 事件

4. 修饰符

5. 条件渲染

6. 列表渲染

7. 组件（重点）

7. 生命周期

8. 路由

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

谷粒学院——Day03【项目前端相关基础知识一】

一、前端开发和前端开发工具

一、前端开发

二、下载和安装VS Code

三、初始设置

二、ES6入门

一、ECMAScript 6 简介

1. ECMAScript 和 JavaScript 的关系

2. ES6 与 ECMAScript 2015 的关系

二、基本语法

1. let声明变量

2. const声明常量（只读变量）

3. 解构赋值

4. 模板字符串

5. 声明对象简写

6. 定义方法简写

7. 对象拓展运算符

8. 箭头函数

三、Vue

一、介绍

1. Vue.js 是什么

2. 初始Vue.js

二、基本语法

1. 基本数据渲染和指令

2. 双向数据绑定

3. 事件

4. 修饰符

5. 条件渲染

6. 列表渲染

7. 组件（重点）

7. 生命周期

8. 路由

热门文章

最新文章

相关课程

相关电子书

相关实验场景