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

用户10127530

发布于 2022-10-26 17:20:38

7390

发布于 2022-10-26 17:20:38

文章被收录于专栏：半旧的技术栈半旧的技术栈

谷粒学院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的开发，方便其使用)。

(2)创建工作区

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

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

(3)验证插件功能

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

在html中编写。

<h1>hello,world！</h1>

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

1.2 前置知识

javascript,jquery,html。

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

2.ES6入门

2.1 什么是javascirpt

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

2.2 什么是ES6

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

2.3 定义变量与常量

(1) let定义变量

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

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

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

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

</script>

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

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

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

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

Uncaught SyntaxError: Identifier 'n' has already been declared

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

(2) const定义常量

<script>
    const PI = "3.14"; //Uncaught TypeError: Assignment to constant variable.
    // 常量不允许重复赋值
    PI = 3;

    // 常量必须进行初始化
    const AA // Uncaught SyntaxError: Missing initializer in const declaration
</script>

2.4 解构模板和生命对象

(1) 解构数组

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

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

(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)简化字符串编程

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

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

打印结果。

Hey,
    can you stop angry now?

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

<script>

    let name = 'wz'
    let age = 18
    let info = `My Name is ${name},I am ${age+1} years old next year.`
    console.log(info);
    //My Name is wz,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>

(4)简化对象创建

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

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

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

    //ES6
    const person2 = {age,name}
    console.log(person2);

</script>

2.5 方法定义

<script>

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

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

</script>

2.6 对象扩展运算符

(1)复制对象

<script>
    let person1 = {"name":"wz", "age":"18"}
    let person2 = {...person1}
    console.log(person2)
</script>

(2)合并对象

<script>

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

</script>

2.7 箭头函数

<script>
    // 传统
    let f1 = function(m) {
        return m + 1
    }
    console.log(f1(2))

    // es6
    let f2 = m => m + 1
    console.log(f2(3))
</script>

3.Vue入门

3.1 什么是vue

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

3.2 hello，vue

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

参考博客下载vue.js和vue.min.js：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对应的值：hello，vue -->
        {{message}}
    </div>

    <!-- 在html中导入vue.min.js. -->
    <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选择即可生成。

3.4 数据绑定指令

(1)单向数据绑定

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

<!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)双向数据绑定

<!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">
        <!-- value是文本框中的默认值，单向绑定，只是读到searchMap的值 -->
        <input type="text" v-bind:value="searchMap">
        <!-- 双向绑定，读，写，值发生改变则其他绑定了searchMap的值也发生改变 -->
        <input type="text" v-model="searchMap">
        <p>{{searchMap}}</p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:"520"
            }
        })
    </script>
</body>

</html>

3.5 事件绑定

<!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">
        <!-- 绑定click事件到search() -->
        <button v-on:click="search()">
            search
        </button>
        <!-- 简写:绑定click事件到find() -->
        <button @click="find()">find</button>
    </div>

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

    <script>
        new Vue({
            el: '#app',
            data: { //无关紧要的数据
                result:"result"
            },
            methods:{ 
                search(){
                    console.log("search...");
                },
                find() {
                    console.log("find...");
                }
            }
        })
    </script>
</body>

</html>

3.6 修饰符

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

<!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">
        <!-- 修饰符将组织submit执行，转而执行onsubmit -->
        <form action="save" v-on:submit.prevent="onsubmit">
            <input type="text" v-model="user.username">
            <!-- button按钮的效果是执行submit -->
            <button type="submit">保存</button>
        </form>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{}
            },
            methods:{
                onsubmit(){
                    if(this.user.username) {
                        console.log("save successfully!")
                    } else{
                        alert("please input the user name.");
                    }
                }
            }
        })
    </script>
</body>

</html>

3.7 条件判断

<!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">是否同意《xxx》</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 //默认为fasle,即未选中
            }
        })
    </script>
</body>

</html>

3.8 循环指令

<!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">
        <table border="1">
            <!-- index：数据索引，从0开始 -->
            <tr v-for="(user,index) in userList">
                <td>{{index}}</td>
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList:[
                    {id:"001",age:50,name:"aa"},
                    {id:"002",age:18,name:"wz"},
                    {id:"003",age:9,name:"pp"}
                ]
            }
        })
    </script>
</body>

</html>

3.9 组件

组件时vue.js中最强大的功能之一，可以扩展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">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            components: {
                // 组件名称
                "Navbar":{
                    // 组件内容
                    template:"<ul><li>首页</li><li>学员管理</li></ul>"
                }
            }
        })
    </script>
</body>

</html>

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

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

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">
        <Navbar></Navbar>
    </div>
    <script src="vue.min.js"></script>
    <script src="component/navbar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html>

3.10 vue的生命周期

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

参考下面代码测试。

<!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: {
                
            },
            created() {
                debugger // 断点，程序执行到这里会停止
                console.log("created...")
            },
            mounted() {
                debugger
                console.log("mounted")
            }
        })
    </script>
</body>

</html>

调试过程如下。

3.11 vue路由

路由通俗来说就是菜单。从官网下载依赖文件vue.router.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` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-10-12，如有侵权请联系 cloudcommunity@tencent.com 删除

html