谷粒学院day03——讲师管理模块前端基础(上)

水深无声 2023-10-02 11:32 22阅读 0赞

#### 谷粒学院day04——讲师管理模块前端基础(上） ####

*   *   *   *   *  1.准备工作
                 *   *  1.1下载vscode与环境配置
                     *  1.2 前置知识
                 *  2.ES6入门
                 *   *  2.1 什么是javascirpt
                     *  2.2 什么是ES6
                     *  2.3 定义变量与常量
                     *  2.4 解构模板和生命对象
                     *  2.5 方法定义
                     *  2.6 对象扩展运算符
                     *  2.7 箭头函数
                 *  3.Vue入门
                 *   *  3.1 什么是vue
                     *  3.2 hello，vue
                     *  3.3 vscode抽取代码片段
                     *  3.4 数据绑定指令
                     *  3.5 事件绑定
                     *  3.6 修饰符
                     *  3.7 条件判断
                     *  3.8 循环指令
                     *  3.9 组件
                     *  3.10 vue的生命周期
                     *  3.11 vue路由

###### 1.准备工作 ######

###### 1.1下载vscode与环境配置 ######

(1)vscode与插件下载

官网：https://code.visualstudio.com/

安装插件。Chinese,Live Server(模拟tomcat功能)，Vetur&vue-helper(支持vue的开发，方便其使用)。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

(2)创建工作区

在本地创建文件夹，取名vscodeworkspace。在vscode中点击:文件->打开文件夹，打开该文件夹。然后点:文件->将工作区另存为，如下图另存工作区。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

之后想要打开该工作区只需要点:文件->打开工作区即可。

(3)验证插件功能

按照下图所示目录结构新建文件。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]

在html中编写。

<h1>hello,world！</h1>

保存文件后，右键选择open with live server。将直接通过浏览器访问该html页面，这说明live server安装成功了。如果每页该选项请检查是否成功安装。如果选择该选项而无法访问到浏览器，可能与电脑配置相关，可以手动访问[127.0.0.1:5500/vs0101/demo01/01.html][127.0.0.1_5500_vs0101_demo01_01.html]

###### 1.2 前置知识 ######

javascript,jquery,html。

关于html可以看我的这篇博客速成:[一小时速成html\_半旧518的博客-CSDN博客][html_518_-CSDN].

###### 2.ES6入门 ######

###### 2.1 什么是javascirpt ######

JavaScript是世界上最简单的一门脚本型语言。Brendan Eich祖师爷十天开发出来的。

![在这里插入图片描述][c190572ac1a3471b906b0a6f08266d0a.png_pic_center]

###### 2.2 什么是ES6 ######

ECMAScript是javascript的一种标准，目前常用es6开发，其语法比es5更加简洁，但是目前大部分浏览器只支持es5，开发环境需要进行一定的处理提供语法支持将es6转换为es5。

###### 2.3 定义变量与常量 ######

(1) let定义变量

在文件夹vs0101下新建es6demo\\01.html。

es6中使用let定义变量，let定义的变量具有作用范围而js中的var定义变量每有作用范围，查看示例代码。

在浏览器的控制台中验证结果。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]

let定义的变量也不能够重复定义，而var则无此约束。

浏览器验证，控制台输出。

Uncaught SyntaxError: Identifier 'n' has already been declared

可以发现，es6中提供的语法更为严谨。

(2) const定义常量

###### 2.4 解构模板和生命对象 ######

(1) 解构数组

es6可以对数组进行解构。这可以简化我们对于变量赋值、数组操作等的编程。

(2) 解构对象

还可以对对象进行解构，可以方便我们对对象的编程。

<script>
        user = {name:"wz",age:20,sex:"male",email:"wz@qq.com"}
        // 传统方式获取对象的属性
        name1 = user.name
        email1 = user.email
        console.log(name1 + "==" + email1)
    
        // es6中获取对象的属性
        let{name, email} = user //注意要使用结构对象，需要保证所取的变量命名与对象属性名一致
        console.log(name + "**" + email) 
    
    </script>

(3)简化字符串编程

使用符号\`可以实现加强版的字符串，他可以简化字符串的换行。

打印结果。

Hey,
        can you stop angry now?

符号\`还可以实现在字符串中引用变量表达式。

甚至还可以调用函数。

(4)简化对象创建

解构也可以方便对象的创建。

###### 2.5 方法定义 ######

###### 2.6 对象扩展运算符 ######

(1)复制对象

(2)合并对象

###### 2.7 箭头函数 ######

###### 3.Vue入门 ######

###### 3.1 什么是vue ######

用于构建用户界面的渐进式框架。

###### 3.2 hello，vue ######

新建目录vuedemo下创建一个新的html文件。

参考博客下载vue.js和vue.min.js：[Vue官网下载Vue.js和Vue.min.js\_醉梦洛的博客-CSDN博客][Vue_Vue.js_Vue.min.js_-CSDN]，将其拷贝到目录vuedemo，参考下列代码实现hello，vue.在浏览器中打开后页面将会打印Hello,vue.

<!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>
            new Vue({
                el:'#app', // 用于绑定vue的作用范围,即id为"app"的div块
                data:{ // 定义页面中的模型数据
                    message:'Hello,vue!'
                }
            })
        </script>
        
    </body>
    </html>

###### 3.3 vscode抽取代码片段 ######

在使用vue时步骤基本上是固定的:创建html，导入vue.min.js，创建内容显示的容器，编写脚本。我们可以在vscode中把这种频繁使用的代码片段抽取出来，避免重复编程。选择:文件=>首选项=>用户片段=>新建全局代码片段.内容如下。

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

注意到上面代码`"prefix": "vuehtml"`，这就是生成代码的快捷关键字。新建一个html，输入vuehtml就会出现对应代码的提示片段，按enter选择即可生成。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]

###### 3.4 数据绑定指令 ######

(1)单向数据绑定

使用v-bind可以单向绑定值，将其用于标签属性中。下面代码的效果是，鼠标放置在在浏览器显示的“我是标题”上，将会显示"页面加载时间:xxxx".

(2)双向数据绑定

###### 3.5 事件绑定 ######

###### 3.6 修饰符 ######

修饰符其实是狸猫换太子，阻止事件绑定的行为，转为指定的行为。其实有点类似于java中的拦截器，或者增强，具体参考下列代码。

###### 3.7 条件判断 ######

###### 3.8 循环指令 ######

###### 3.9 组件 ######

组件时vue.js中最强大的功能之一，可以扩展html的标签元素。

不过上面的组件仅仅在当前页面有效，要想在其他html中使用组件扩展的标签，可以在创建js文件，然后导入js文件。js文件代码如下。

Vue.component(
        // 组件名称
        "Navbar",
        {
            // 组件内容
            template:"<ul><li>首页</li><li>学员管理</li></ul>"
        }
    )

html测试代码如下。

###### 3.10 vue的生命周期 ######

重点关注`created`(在数据渲染前)，`mounted`(在数据渲染后)

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]

参考下面代码测试。

调试过程如下。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]

###### 3.11 vue路由 ######

路由通俗来说就是菜单。从官网下载依赖文件vue.router.js。如果无法访问可以参考博客下载：[简单免费下载vue-router.js和vue-router.min.js文件\_于小猿的博客-CSDN博客\_vue-router.min.js][vue-router.js_vue-router.min.js_-CSDN_vue-router.min.js]。

<!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">
            <p>
                
                
                
                <router-link to="/foo">Go to Foo</router-link>
                <router-link to="/bar">Go to Bar</router-link>
              </p>
              
              
              <router-view></router-view>
        </div>
        <script src="vue.min.js"></script>
        <script src="vue-router.min.js"></script>
        <script>
            // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
    
            // 1. 定义 (路由) 组件。
            // 可以从其他文件 import 进来
            const Foo = { template: '<div>foo</div>' }
            const Bar = { template: '<div>bar</div>' }
    
            // 2. 定义路由
            // 每个路由应该映射一个组件。 其中"component" 可以是
            // 通过 Vue.extend() 创建的组件构造器，
            // 或者，只是一个组件配置对象。
            // 我们晚点再讨论嵌套路由。
            const routes = [
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar }
            ]
    
            // 3. 创建 router 实例，然后传 `routes` 配置
            // 你还可以传别的配置参数, 不过先这么简单着吧。
            const router = new VueRouter({
            routes // (缩写) 相当于 routes: routes
            })
    
            // 4. 创建和挂载根实例。
            // 记得要通过 router 配置参数注入路由，
            // 从而让整个应用都有路由功能
            const app = new Vue({
            router
            }).$mount('#app')
    
            // 现在，应用已经启动了！
        </script>
    </body>
    
    </html>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/0ec94eb3d246454b9d195594972dceee.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y2K5penNTE4,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: https://img-blog.csdnimg.cn/422416ac8e4c4d20a682a1b753265360.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y2K5penNTE4,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: https://img-blog.csdnimg.cn/e6cff7f4b1144f159828cf9b8d5db617.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y2K5penNTE4,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[127.0.0.1_5500_vs0101_demo01_01.html]: http://127.0.0.1:5500/vs0101/demo01/01.html
[html_518_-CSDN]: https://blog.csdn.net/qq_41708993/article/details/120680062?spm=1001.2014.3001.5501
[c190572ac1a3471b906b0a6f08266d0a.png_pic_center]: https://img-blog.csdnimg.cn/c190572ac1a3471b906b0a6f08266d0a.png#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: https://img-blog.csdnimg.cn/788aa7c229cf4f998cad0fa3ef07d225.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y2K5penNTE4,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[Vue_Vue.js_Vue.min.js_-CSDN]: https://blog.csdn.net/weixin_39921821/article/details/108618616
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]: https://img-blog.csdnimg.cn/e859ff4bd2204b54803fe53688eb2113.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y2K5penNTE4,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]: https://img-blog.csdnimg.cn/e5d1578480bd485ab560d865ffebac95.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y2K5penNTE4,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Y2K5penNTE4_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]: https://img-blog.csdnimg.cn/c7a18cff6340448bbb80552434ba1922.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Y2K5penNTE4,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[vue-router.js_vue-router.min.js_-CSDN_vue-router.min.js]: https://blog.csdn.net/YyjYsj/article/details/113821946