实战项目-05(前端(es6,vue,axios))
项目前端需求
下载vscode
- 下载地址:https://code.visualstudio.com/
- 安装之后
- 安装插件
- 前端的代码都在工作区中
- 在本地新建一个空文件夹
- 使用vscode打开文件夹
- 将文件夹保存成工作区
- ok
- 写好页面之后用一下的打开,就类似于tomcat
ECMAScript6
1. 简介
简称es6是js语言的下一代标准,在2015年6月发布
2. 基本语法
Es标准中不包含DOM BOM的定义,只涵盖基本的数据类型,关键字,语句,运算符,内建对象,内建函数等通用语法.
- let声明变量
创建let.heml
<!-- js代码需要写在script标签中 -->
<script>
//es6中如何定义变量,定义变量的特点(var)
//js中这样定义 var a = 1;
//es6中这样定义 let a = 10;
//1. 创建代码块然后在代码块外面输出
{
var a = 10;
let b = 20;//在代码块中定义了只能在代码块中使用
}
//2. 输出
console.log(a)
console.log(b) //Uncaught ReferenceError: b is not defined
var a = 1;
var a = 2;
//let 不能定义多次相同名字变量
let m = 10;
let m = 20;
console.log(a)
console.log(m)//Uncaught SyntaxError: Identifier 'm' has already been declared
//3. var可以声明多次,let只能声明一次
</script>
- 声明常量
创建const.html
<script>
//定义常量
const PI = "3.14"
PI = 3; //常量值一旦定义,就不能改变了(Uncaught TypeError: Assignment to constant variable.)
//定义常量必须初始化(赋值)
const AA //Missing initializer in const declaration
</script>
- 解构赋值
分为数组和对象解构
//数组解构
//传统写法
let a=1,b=2,c=3
console.log(a,b,c)
//ES6写法
let [x,y,z]=[10,20,30]
console.log(x,y,z)
//对象解构
let user = {"name":"lucy","age":20}
//传统从里面获取值
let name1 = user.name
let age1 = user.age
console.log(name1+"====="+age1)
//ES6写法获取对象中的值
let{name , age}=user
console.log(name+"******"+age)
- 模板字符串
创建模板字符串.html
模板字符串相当于加强版的字符串，用反引号 1左边的那个,除了作为普通字符串，还可以用来定义多行字符串，还可
以在字符串中加入变量和表达式
<script>
//1.使用这个符号可以实现换行的效果`
let str1 = `hello,
es6 qwq `
console.log(str1)
//2.在`的符号中可以使用表达式来获取变量的值
let name = "Mike"
let age = 20
let str2 = `hello,${name},age is${age+1}`
console.log(str2)
//3.在`符号中可以调用方法
function f1(){
return "hello f1"
}
let str3 = `qwq,${f1()}`
console.log(str3)
</script>
- 声明对象的简写
创建声明对象.html
<script>
const age = 12
const name = "lucy"
//使用传统方式来定义对象
const p1 = {name:name,age:age}
console.log(p1)
//es6来定义
const p2 = {name,age}
console.log(p2)
</script>
- 定义方法简写
创建定义方法简写.html
<script>
//传统的定义方法的方式
const person1 = { //相当于java中的类
sayHi:function(){ //相当于java中的方法
console.log("Hi")
}
}
//调用
person1.sayHi() //对象调用方法
//ES6写法
const person2 = {
sayHello(){
console.log("hello")
}
}
//调用
person2.sayHello()
</script>
- 对象扩展运算符
创建对象扩展运算符.html
扩展运算符(...)用于取出参数对象所有可遍历属性然后copy到当前的对象
<script>
//对象的复制(原来需要解构出对象中的属性然后再复制给新的对象)
let person1 = {name:"Amy",age:20}
let person2 = {...person1}
console.log(person2)
//对象的合并(一个有age 一个有name ,两个对象合并成一个)
let name = {name:"sli"}
let age = {age:20}
let p2 = {...name,...age}
console.log(p2)
</script>
- 箭头函数
创建箭头函数.html
箭头函数提供了一种更加简洁的函数书写方式,基本的语法是
参数 => 函数体
<script>
//箭头函数是提供了一种更加简介的函数书写方式,语法为:参数(function()括号中的部分(也就是需要传入的参数))=>函数体(返回值部分)
//传统的写法
var f1 = function(a){
return a+1
}
console.log(f1(2))
//es6
//第一个a对应函数体(function(a))
//第二个a对应返回值部分(return a)
var f2 = a => a+1
console.log(f2(3))
//2.复杂的方法
var f3 = function(a,b){
let result = a + b
return result
}
console.log(f3(1,3))
//使用箭头函数简化
var f4 = (a,b) => a+b
console.log(f4(3,4))
</script>
Vue
Vue是什么
是一套用于构建用户界面的渐进式框架
核心库只关注视图层,便于与第三方库或既有项目整合
官方网站:https://cn.vuejs.org/
初始化Vue.js
创建01-vue入门.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>
<!-- 先注册组件,然后使用 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<!-- 差值表达式 -->
{{message}}
</div>
<script>
//创建一个vue对象
new Vue({
el: '#app',//绑定vue的作用范围,需要对应的id
data: {//定义页面中显示的模型数据
message: 'hello vue'
}
})
</script>
</body>
</html>
这就是声明式渲染:Vue.js的核心就是一个允许采用简介的模板语法来声明式地将数据渲染进DOM的系统
这里的思想就是美欧繁琐的DOM操作,例如jQuery中,我们需要找到div节点,获取到dom对象,然后进行一系列的节点操作
在vscode中创建代码片段,方便以后的开发
文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：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>",
"<script src=\"https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js\"></script>",
" <div id=\"app\">",
"",
" </div>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
" </html>",
],
"description": "my vue template in html"
}
}
基本语法
- v-bind
创建03-指令v-bind.html
v-bind特性被称为指令,指令带有前缀v-
除了使用插值表达式{{}}进行数据渲染,也可以使用v-bind指令,它的简写就是一个:
<!-- v-bind单向数据绑定,指令一般用于标签属性里面获取值 -->
<h1 v-bind:title="message">
{{content}}
</h1>
data: {
content: '我是标题',
message: '页面加载于' + new Date().toLocaleString()//鼠标停留在标题上就可以看到信息了
}
- v-model双向绑定
创建04-v-model.html
数据双向绑定使用v-model
<div id="app">
<input type="text" v-bind:value="searchMap.keyWord"/>
<!-- 双向绑定,一个变另一个也会改变 -->
<input type="text" v-model="searchMap.keyWord"/>
<p>{{searchMap.keyWord}}</p>
</div>
data: {
searchMap:{
keyWord: 'sli'
}
}
测试之后发现修改里面v-model中的文本输入框变动,p标签的内容也会变动
- 事件
创建05-vue事件操作.html
需求:点击查询按钮之后,控制台输出文本
<div id="app">
<!-- vue绑定事件(例如点击按钮触发一些事件,就是方法) -->
<button v-on:click="search()">查询</button>
<button @click="f1()">查询</button>
</div>
data: {
searchMap:{
keyWord: 'sli'
},
result:{}
},
methods:{
search(){
console.log('serch.....')
},
f1(){
console.log('f1....')
}
}
测试点击第一个按钮之后控制台输出如下,第二个也如下
- 修饰符
创建06-vue修饰符.html
修饰符(Modifiers)是以.指明的特殊后缀,用于之处一个指令应该以特殊的方式绑定.例如:.prevent修饰符告诉v-on指令对于触发的事件调用event.preventdefault()及阻止事件原本的默认行为
<form action="save" v-on:submit.prevent="onSubmit">
<input type="text" name="name" v-model="user.username"></input>
<button type="submit">保存</button>
</form>
data: {
user:{}
},
methods:{
onSubmit(){
if(this.user.username){
console.log('提交表单')
} else{
alert('请输入用户名')
}
}
}
测试之后发现控制台输出提交表单,成功阻止了form的默认行为
- 条件渲染
创建07-vue-if.html
<div id="app">
<input type="checkbox" v-model="ok">是否同意</input>
<h1 v-if="ok">sli</h1>
<h1 v-else>qwq</h1>
</div>
data: {
ok:false
}
- 列表渲染
创建08-v-for.html
<table>
<!-- 下面的意思是遍历userList这个数组,in是固定的,user是得到的对象名字随便起(user就相当于对象,user.id就相当于对象.属性) -->
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.age}}</td>
</tr>
</table>
data: {
userList:[
{id:1,username:'helen',age:18},
{id:2,username:'peter',age:10},
{id:3,username:'andy',age:12},
]
}
组件
组件(Component)是Vue.js最强大的功能之一
可以扩展html元素,封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型的应用,任意的类型的应用的界面都可以抽象出去为一个组件树
- 局部组件
创建09-vue组件.html
<!--使用组件-->
<div id="app">
<Navbar></Navbar>
</div>
new Vue({
el: '#app',
//定义vue使用的组件
components: {
//组件内容
'Navbar': {
//组件内容
template: '<ul><li>首页</li><li>学院管理</li></ul>'
}
}
})
测试结果
- 全局组件
创建Navbar.js里面定义全局组件
//定义全局组件
Vue.component('Navbar',{
template:'<ul><li>首页</li><li>学院管理</li><li>讲师管理</li></ul>'
})
创建10-vue全局组件.html在里面加入js引用,然后使用组件
<script src="components/Navbar.js"></script>
<div id="app">
<Navbar></Navbar>
</div>
- 实例的生命周期
作为后端开发只需要知道created()页面渲染之前和mounted()页面渲染后
debugger是前端的断点,测试的时候启动页面然后打开控制台刷新页面只有可以看到
<div id="app">
hello
</div>
data: {
},
created(){
debugger
//页面渲染之前执行
console.log('created...')
},
mounted(){
debugger
//页面渲染之后执行
console.log('mounted...')
}
- 路由
Vue.js路由允许我们通过不同的Url访问不同的内容
可以实现多视图单页web应用
需要载入vue-router库
创建12-vue路由.html并引入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>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="vue-router.min.js"></script>
<div id="app">
<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>
<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>
</body>
</html>
启动测试
axios
是一个独立的vue项目,基于promise用于浏览器和node.js的http客户端
- 在浏览器中可以帮助我们完成ajax请求
- 在node.js中可以向远程接口发送请求
也就是可以从后端的接口得到json数据
- 引入以下的
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="axios.min.js"></script>
- 模拟后端的数据
创建data.json
{
"success": true,
"code": 20000,
"message":"成功",
"data":{
"items":[
{"name":"lucy","age":20},
{"name":"mary","age":30},
{"name":"jack","age":40}
]
}
}
- 创建页面
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="axios.min.js"></script>
<div id="app">
<!-- 把userList数组中的值进行输出(使用v-for) -->
<div v-for="user in userList">
{{user.name}}
{{user.age}}
</div>
</div>
<script>
new Vue({
el: '#app',
//固定结构
data: {//在data中可以定义变量和初始值
//定义变量,为空数组
userList:[]
},
created(){//页面渲染之前执行
//调用定义的方法
this.getUserList()
},
methods:{//编写具体的方法
//创建方法
getUserList(){
//使用axios发送ajax请求
//axios.提交方式("文件路径/接口路径")
axios.get("data.json")
.then(response => {
//response就是请求之后返回的数据
//通过response获取具体的数据,赋值给定义的空数组
this.userList= response.data.data.items
console.log(this.userList)
}) //请求成功之后会执行then方法
.catch(error => {
}) //请求失败会执行catch方法
}
}
})
</script>
</body>
浙公网安备 33010602011771号