谷粒学院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中编写。
代码语言：javascript复制<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 1.html。
es6中使用let定义变量，let定义的变量具有作用范围而js中的var定义变量每有作用范围，查看示例代码。
代码语言：javascript复制<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则无此约束。
代码语言：javascript复制<script>
// var 可以声明多次
// let 只能声明一次
var m = 1;
var m = 2;
let n = 3;
let n = 4;
console.log(m);
console.log(n);
</script>浏览器验证，控制台输出。
代码语言：javascript复制Uncaught SyntaxError: Identifier 'n' has already been declared可以发现，es6中提供的语法更为严谨。
(2) const定义常量
代码语言：javascript复制<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可以对数组进行解构。这可以简化我们对于变量赋值、数组操作等的编程。
代码语言：javascript复制<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) 解构对象
还可以对对象进行解构，可以方便我们对对象的编程。
代码语言：javascript复制<!-- 结构对象 -->
<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)简化字符串编程
使用符号`可以实现加强版的字符串，他可以简化字符串的换行。
代码语言：javascript复制<script>
let str = `Hey,
can you stop angry now?`
console.log(str);
</script>打印结果。
代码语言：javascript复制Hey,
can you stop angry now?符号`还可以实现在字符串中引用变量表达式。
代码语言：javascript复制<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>甚至还可以调用函数。
代码语言：javascript复制<script>
function f(){
return 'have fun!'
}
let str = `the game start,${f()}`
console.log(str);
//the game start,have fun!
</script>(4)简化对象创建
解构也可以方便对象的创建。
代码语言：javascript复制<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 方法定义
代码语言：javascript复制<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)复制对象
代码语言：javascript复制<script>
let person1 = {"name":"wz", "age":"18"}
let person2 = {...person1}
console.log(person2)
</script>(2)合并对象
代码语言：javascript复制<script>
//合并对象
let age = {age:15}
let name = {name:'wz'}
let person2 = {...age,...name}
console.log(person2); //{age:15,name:'wz'}
</script>2.7 箭头函数
代码语言：javascript复制<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.
代码语言：javascript复制<!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中把这种频繁使用的代码片段抽取出来，避免重复编程。选择:文件=>首选项=>用户片段=>新建全局代码片段.内容如下。
代码语言：javascript复制{
"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".
代码语言：javascript复制<!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)双向数据绑定
代码语言：javascript复制<!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 事件绑定
代码语言：javascript复制<!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中的拦截器，或者增强，具体参考下列代码。
代码语言：javascript复制<!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 条件判断
代码语言：javascript复制<!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 循环指令
代码语言：javascript复制<!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的标签元素。
代码语言：javascript复制<!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文件代码如下。
代码语言：javascript复制Vue.component(
// 组件名称
"Navbar",
{
// 组件内容
template:"<ul><li>首页</li><li>学员管理</li></ul>"
}
)html测试代码如下。
代码语言：javascript复制<!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(在数据渲染后)
参考下面代码测试。
代码语言：javascript复制<!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。
代码语言：javascript复制<!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>
