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

刺骨的言语ヽ痛彻心扉 2023-09-27 12:29 227阅读 0赞

#### 文章目录 ####

*  一、前端开发和前端开发工具
 *   *  一、前端开发
     *  二、下载和安装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. 路由

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

### 一、前端开发 ###

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

### 二、下载和安装VS Code ###

1.  **下载地址**  
    [https://code.visualstudio.com/][https_code.visualstudio.com]
2.  **安装**

### 三、初始设置 ###

1.  **中文界面配置**

*  首先安装中文插件：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

1.  **插件安装**  
    为方便后续开发，建议安装如下插件（红色矩形框标记的插件）  
    ![在这里插入图片描述][9a2b69567ad04a88b716dcc2b1d69104.png]
2.  **创建项目**  
    vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如project\_xxxx。  
    然后打开vscode，再在vscode里面选择 File -> Open Folder 打开文件夹，这样才可以创建项目。
3.  **保存工作区**  
    打开文件夹后，选择“文件 -> 将工作区另存为…”，为工作区文件起一个名字，存储在刚才的文件夹下即可。
4.  **新建文件夹和网页**  
    ![在这里插入图片描述][0839e8e52cfa489e82512c6ead10a542.png]
5.  **预览网页**
    
    **以文件路径方式打开网页预览**  
    需要安装“open in browser”插件：  
    文件右键 -> Open In Default Browser
    
    **以服务器方式打开网页预览**  
    需要安装“Live Server”插件：  
    文件右键 -> Open with Live Server
6.  **设置字体大小**  
    左边栏Manage -> settings -> 搜索 “font” -> Font size
7.  **开启完整的Emmet语法支持**  
    设置中搜索 Emmet：启用如下选项，必要时重启vs  
    ![请添加图片描述][cf078a1f5c684f56b5e8083ea8087017.png]

## 二、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`

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

`创建 const.html`

#### 3. 解构赋值 ####

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

#### 4. 模板字符串 ####

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

#### 5. 声明对象简写 ####

#### 6. 定义方法简写 ####

`创建 定义方法简写.html`

#### 7. 对象拓展运算符 ####

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

#### 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][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>
        
        <div id="app">
            
            {
       {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">
            
            <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` 进行双向数据绑定

#### 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">
            
            <button v-on:click="search()">查询</button>
    
            
            <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`

#### 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 元素，封装可重用的代码。  
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：  
![在这里插入图片描述][524e81338bb0400ab7c56d412c25a060.png_pic_center]

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

**定义组件：**

**使用组件：**

1.  **全局组件**  
    `创建 01-2-全局组件.html`

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

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

#### 7. 生命周期 ####

![在这里插入图片描述][850a179be9994fe89dfdd77ee564a2a6.png_pic_center]  
`创建 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`

1.  **引入 js**

1.  **编写html**

<div id="app">
            <h1>Hello App!</h1>
        <p>
            
            
            
            <router-link to="/">首页</router-link>
            <router-link to="/student">会员管理</router-link>
            <router-link to="/teacher">讲师管理</router-link>
        </p>
        
        
        <router-view></router-view>
        </div>

1.  **编写js**

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

[https_code.visualstudio.com]: https://code.visualstudio.com/
[9a2b69567ad04a88b716dcc2b1d69104.png]: https://img-blog.csdnimg.cn/9a2b69567ad04a88b716dcc2b1d69104.png
[0839e8e52cfa489e82512c6ead10a542.png]: https://img-blog.csdnimg.cn/0839e8e52cfa489e82512c6ead10a542.png
[cf078a1f5c684f56b5e8083ea8087017.png]: https://img-blog.csdnimg.cn/cf078a1f5c684f56b5e8083ea8087017.png
[https_cn.vuejs.org]: https://cn.vuejs.org
[524e81338bb0400ab7c56d412c25a060.png_pic_center]: https://img-blog.csdnimg.cn/524e81338bb0400ab7c56d412c25a060.png#pic_center
[850a179be9994fe89dfdd77ee564a2a6.png_pic_center]: https://img-blog.csdnimg.cn/850a179be9994fe89dfdd77ee564a2a6.png#pic_center