04-01 Vue从入门到忘记
一. vue.js的快速入门使用
1 vue.js库的下载
vue.js是目前前端web开发最流行的工具库，由尤雨溪在2014年2月发布的。
另外几个常见的工具库：react.js /angular.js/jQuery
官方网站：
中文：https://cn.vuejs.org/
英文：https://vuejs.org/
官方文档：https://cn.vuejs.org/v2/guide/
vue.js目前有1.x、2.x和3.x 版本，我们学习2.x版本的。
jQuery和vue的定位是不一样的。
jQuery的定位是获取元素和完成特效。
vue的定位是方便操作和控制数据和完成特效。
总结:
# vue版本
目前有1.x、2.x和3.x 版本，我们争对2.x版本
# jQuery和vue的定位
jQuery获取元素, 完成特效
vue方便操作, 控制数据, 完成特效.
2 vue.js库的基本使用
在github下载：
在官网下载地址： https://cn.vuejs.org/v2/guide/installation.html
vue的引入类似于jQuery，开发中可以使用开发版本vue-x.x.x.js，产品上线要换成vue.min.js。
下图是github网站下载的vue.js目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1. 先引入vue核心文件 -->
<script src="vue.js"></script>
<script>
// vue的基本使用三个注意事项：
/*
1. 一个html页面中可以存在多个vue实例对象，但是实例对象的变量名强烈建议唯一，而且每一个vue对象负责一个特效功能
2. js中所有的变量和语法都是区分大小写的，new Vue()
3. 建议实例化vue对象的代码写在body的最后面。免得出现html元素无法获取的错误出现
*/
window.onload = function(){
// 2. 对vue的核心对象vm进行实例化: vue.js的代码开始于一个Vue对象。所以每次操作数据都要声明Vue对象开始。
var vm = new Vue({
el: "#app", // 设置当前vue对象要控制的标签范围, 方便接下来vue要操作的元素的选择符 element的缩写，表示元素
data:{ // 保存一些前端使用的数据, 这里的data是将要展示到HTML标签元素中的数据
message: "hello world",
},
});
}
</script>
</head>
<body>
<!-- 3. 在el属性对象的标签中，填写正确的vue语法展示或者控制数据 -->
<!-- {{ message }} 表示把vue对象里面data属性中的对应数据输出到页面中 -->
<!-- 在双标签中显示数据要通过{{ }}来完成 -->
<div id="app">
{{message}}
</div>
<!--注意: el属性控制的标签范围外的数据的格式, 无法进行数据的显示 -->
{{message}}
</body>
</html>
总结:
# 引入文件:
开发版本vue-x.x.x.js
上线版本vue.min.js
# 实例化Vue对象: el, data是json对象
let vm = Vue({
el: '#app', # 要操作的元素的选择符
data: {
message: 'hello world',
},
});
# 在el属性控制的标签范围展示或者控制数据
<div id="app">
{{message}}
</div>
{{message}}
# 注意: el属性控制的标签范围外的数据的格式, 无法进行数据的显示
# vue的基本使用三个注意事项
1. 可存在多个: 一个html页面中可以存在多个vue实例对象，但是实例对象的变量名强烈建议唯一，而且每一个vue对象负责一个特效功能
2. 区分大小写: js中所有的变量和语法都是区分大小写的，new Vue()
3. 书写的建议: 建议实例化vue对象的代码写在body的最后面。免得出现html元素无法获取的错误出现
书写的第一种方式: head标签内部
window.onload = function() {
let vm = Vue({
...
});
}
书写的第二种方式: body标签底部
3 vue.js的M-V-VM思想
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
View 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。
ViewModel 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。
编写代码，让我们更加清晰的了解MVVM：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1. 先引入vue核心文件 -->
<script src="vue.js"></script>
</head>
<body>
<!-- V，View，视图模板 -->
<div id="app">
<!-- 在表单输入框中显示数据要使用v-model来完成 -->
<input v-model="message"><br>
<!-- 在双标签中显示数据要通过{{ }}来完成 -->
{{message}}
</div>
<script>
// new Vue，VM对象，负责时刻保证视图模板中的数据和data里面的数据一致！
var vm = new Vue({
el:"#app",
data:{ // M，Model，模型里面的所有数据，将来都会作为vm对象的属性存在
message: "一篇文章",
num: 16,
}
})
</script>
</body>
</html>
在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据
console.log(vm.$el) # #app vm对象可以控制的范围
console.log(vm.$data); # vm对象要显示到页面中的数据
console.log(vm.$data.message); # 访问data里面的数据
console.log(vm.message); # 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.
总结：
1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{ }}.
注意: 一定要放在el选择匹配范围内的双标签下.
如果匹配范围是: el: 'input',
那么你如果这样书写将没有效果:
<input type="text">
{{message}}
用法：
vue对象的data属性：
data:{
name:"小明",
}
标签元素：
<h1>{{ name }}</h1>
2. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model
用法：
vue对象的data属性：
data:{
name:"小明",
}
表单元素：
<input v-model="name">
VM思想的同步精髓: 使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。
4 显示数据
- 在双标签中显示纯文本数据一般通过{{ }}来完成数据显示，双括号中还可以支持js表达式和符合js语法的代码，例如函数调用.
- 在表单输入框中显示数据要使用v-model来完成数据显示
- 如果双标签的内容要显示的数据包含html代码，则使用v-html来完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1. 先引入vue核心文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<h1>{{message.toUpperCase()}}</h1>
<p>一共有<span>{{num+100}}</span>个工人在工作!</p>
<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
<!--注意: 使用v-html以后标签中所有的内容都会被替换成data数据中htmlcode指定的内容-->
<div v-html="htmlcode">
<div>我是设置了也没有效果的内容</div>
<div>我是设置了也没有效果的内容</div>
</div>
</div>
<script>
var vm = new Vue({
el: "#box",
data: {
message: "hello world",
num: 16,
htmlcode: "<h1>大标题</h1>"
}
});
</script>
</body>
</html>
双花括号仅用输出文本内容,如果要输出html代码,则不能使用这个.要使用v-html来输出.
v-html必须在html标签里面作为属性写出来.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div class="app">
<h1>{{title}}</h1>
<h3>{{url1}}</h3>
{{img}}<br>
<span v-html="img"></span>
</div>
<script>
let vm = new Vue({
el: ".app",
data: {
title: "我的vue",
url1: "我的收获地址",
img: '<img src="images/shendan.png">',
}
})
</script>
</body>
</html>
总结：
1. 可以在普通标签中使用{{ }} 或者 v-html 来输出data里面的数据
<h1>{{message}}</h1>
2. 可以在表单标签中使用v-model属性来输出data里面的数据，同时还可以修改data里面的数据
<input type="text" v-model="username">
在输出内容到普通标签的使用{{ }}
v-model或者v-html等vue提供的属性，或者 {{}} 都支持js代码。
<h1>{{str1.split("").reverse().join("")}}</h1>
<!-- 3.2 支持js的运算符-->
<h1>{{num1+3}}</h1>
<!-- 3.3 js还有一种运算符,三元运算符,类似于python里面的三元表达式
三元运算符的语法:
判断条件 ? 条件为true : 条件为false的结果
python 三元表达式[三目运算符]的语法:
a if 条件 else b
-->
<h1>num1和num2之间进行比较,最大值:{{ num2>num1?num2:num1 }}</h1>
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的快速使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{url}}</p>
<div>{{text}}</div>
<div v-html="text"></div>
<input v-model="url">
<div>num是{{num%2==0?'偶数':'奇数'}}</div>
<div>num的下一个数字：{{num-0+1}}</div>
<input type="text" v-model="num">
<div>{{message.split("").reverse().join("")}}</div>
<input type="text" v-model="message">
</div>
<script>
var vm = new Vue({
el: "#app", // 设置vue对象控制的标签范围
data: { // vue要操作的数据
url: "http://www.luffycity.com",
text: "<h1>大标题</h1>",
num: 100,
message: "abcdef",
},
})
</script>
</body>
</html>
二. 常用指令
指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。
在vue中，提供了很多指令，常用的有：v-if、v-model、v-for等等。
指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。
因为vue的历史版本原因，所以有一部分指令都有两种写法：
vue1.x写法 vue2.x的写法
v-html ----> v-html
{{ 普通文本 }} {{普通文本}}
v-bind:属性名 ----> :属性
v-on:事件名 ----> @事件名
1. 属性操作
格式
<标签名 :标签属性="data属性"></标签名>
<p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容，{{ }} 是简写 -->
<a :href="url2">淘宝</a>
<a v-bind:href="url1">百度</a> <!-- v-bind是vue1.x版本的写法 -->
点击显示密码, 再次点击隐藏密码效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1. 先引入vue核心文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<a :href="url">百度</a>
<a v-bind:href="url">百度</a><br>
密码：<input :type="type">
<button @click="change">{{text}}</button>
<br>
</div>
<script>
// data里面的属性，和methods里面的方法都会被加载到vm对象里面充当数属性和方法
var vm = new Vue({
el: "#box",
data: {
url: "http://www.baidu.com",
type: "password",
text: "显示密码",
},
methods: {
change() { // change: function(){ 的简写
if (this.text === "显示密码") {
this.type = "text"; // 这里的this表示vm对象
this.text = "隐藏密码";
} else {
this.type = "password";
this.text = "显示密码";
}
}
}
});
</script>
</body>
</html>
2.事件操作
有两种事件操作的写法，@事件名 和 v-on:事件名
<button v-on:click="num++">按钮</button> <!-- v-on 是vue1.x版本的写法 -->
<button @click="num+=5">按钮2</button>
总结：
1. 使用@事件名来进行事件的绑定
语法：
<h1 @click="num++">{{num}}</h1>
2. 绑定的事件的事件名，全部都是js的事件名：
@submit ---> onsubmit
@focus ---> onfocus
@blur ---> onblur
@click ---> onclick
....
例如:完成商城购物车中的商品增加减少数量
步骤：
- 给vue对象添加操作数据的方法
- 在标签中使用指令调用操作数据的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1. 先引入vue核心文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<button :disabled="goods.disabled" @click="sub">-</button>
<input type="text" v-model="goods.num">
<button @click="add">+</button>
</div>
<script>
// data里面的属性，和methods里面的方法都会被加载到vm对象里面充当数属性和方法
// js中，a-=1 和 a-- 是一样的效果，--就是-=1的缩写
var vm = new Vue({
el: "#box",
data: {
goods: {
num: 0,
disabled: true,
}
},
methods: {
sub() {
// 减少商品数量
if (this.goods.num-- <= 1) {
this.goods.disabled = true;
}
},
add() {
if (this.goods.num++ >= 0) {
this.goods.disabled = false;
}
},
}
});
</script>
</body>
</html
3. 样式操作
操作样式，本质就是属性操作，使用冒号：
3-1. 控制标签class类名
格式：
<h1 :class="值">元素</h1> 值可以是字符串、对象、对象名、数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.box1{
color: red;
border: 1px solid #000;
}
.box2{
background-color: orange;
font-size: 32px;
}
</style>
</head>
<body>
<div id="box">
<!--- 添加class类名，值是一个对象
{
class类1:布尔值变量1,
class类2:布尔值变量2,
}
-->
<p :class="{box1:myclass1}">一个段落</p>
<p @click="myclass3=!myclass3" :class="{box1:myclass2,box2:myclass3}">一个段落</p>
</div>
<script>
let vm1=new Vue({
el:"#box",
data:{
myclass1:false, // 布尔值变量如果是false，则不会添加对象的属性名作为样式
myclass2:true, // 布尔值变量如果是true，则不会添加对象的属性名作为样式
myclass3:false,
},
})
</script>
<!-- 上面的代码可以:class的值保存到data里面的一个变量，然后使用该变量作为:class的值 -->
<style>
.box4{
background-color: red;
}
.box5{
color: green;
}
</style>
<div id="app">
<button @click="mycls.box4=!mycls.box4">改变背景</button>
<button @click="mycls.box5=!mycls.box5">改变字体颜色</button>
<p :class="mycls">第二个段落</p>
</div>
<script>
let vm2 = new Vue({
el:"#app",
data:{
mycls:{
box4:false,
box5:true
},
}
})
</script>
<!-- 批量给元素增加多个class样式类 -->
<style>
.box6{
background-color: red;
}
.box7{
color: green;
}
.box8{
border: 1px solid yellow;
}
</style>
<div id="app2">
<p :class="[mycls1,mycls2]">第三个段落</p>
</div>
<script>
let vm3 = new Vue({
el:"#app2",
data:{
mycls1:{
box6:true,
box7:true,
},
mycls2:{
box8:true,
}
}
})
</script>
</body>
</html>
代码执行效果：
总结：
1. 给元素绑定class类名，最常用的就是第二种。
vue对象的data数据：
data:{
myObj:{
complete:true,
uncomplete:false,
}
}
html元素：
<div class="box" :class="myObj">2222</div>
最终浏览器效果：
<div class="box complete">2222</div>
2.3.2 控制标签style样式
# 格式1：值是json对象，对象写在元素的:style属性中
标签元素：
<div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
data数据如下：
data: {
activeColor: 'red',
fontSize: 30
}
# 格式2：值是对象变量名，对象在data中进行声明
标签元素：
<div v-bind:style="styleObject"></div>
data数据如下：
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
# 格式3：值是数组
标签元素：
<div v-bind:style="[style1, style2]"></div>
data数据如下：
data: {
style1:{
color:"red"
},
style2:{
background:"yellow",
fontSize: "21px"
}
}
}
3-2. 实例-vue版本选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#card {
width: 500px;
height: 350px;
}
.title {
height: 50px;
}
.title span {
width: 100px;
height: 50px;
background-color: #ccc;
display: inline-block;
line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
text-align: center;
}
.content .list {
width: 500px;
height: 300px;
background-color: yellow;
display: none;
}
.content .active {
display: block;
}
.title .current {
background-color: yellow;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="card">
<div class="title">
<span @click="num=0" :class="num==0 ? 'current' : ''">国内新闻</span>
<span @click="num=1" :class="num==1 ? 'current' : ''">国际新闻</span>
<span @click="num=2" :class="num==2 ? 'current' : ''">银河新闻</span>
<!--<span>{{num}}</span>-->
</div>
<div class="content">
<div class="list" :class="num==0 ? 'active' : ''">国内新闻列表</div>
<div class="list" :class="num==1 ? 'active' : ''">国际新闻列表</div>
<div class="list" :class="num==2 ? 'active' : ''">银河新闻列表</div>
</div>
</div>
<script>
// 需求: 当用户点击标题栏的按钮[span]时，显示对应索引下标的内容块[.list]
// 思路：利用标题栏每一个标题和内容对应的序号来记录和控制它们的显示和隐藏
// 代码实现：
var card = new Vue({
el: "#card",
data: {
num: 0,
},
});
</script>
</body>
</html>
代码运行效果：
4.. 条件渲染指令
vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。
4-1. v-if
标签元素：
<!-- vue对象最终会把条件的结果变成布尔值 -->
<h1 v-if="ok">Yes</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
登录展示模态框示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<style>
.login-box {
width: 200px;
height: 200px;
background-color: darkslateblue;
}
</style>
</head>
<body>
<div id="card">
<button @click="is_show=!is_show">登录</button>
<div class="login-box" v-if="is_show"></div>
</div>
<script>
var vm = new Vue({
el: "#card",
data: {
is_show: false,
},
});
</script>
</body>
</html>
代码运行的效果:
4-2. v-else
v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
标签元素：
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
登录退出功能展示示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="card">
<p v-if="is_login">欢迎回到路飞学城! <a href="#" @click="is_login=!is_login">退出</a></p>
<p v-else><a href="#" @click="is_login=!is_login">登录</a></p>
</div>
<script>
var vm = new Vue({
el: "#card",
data: {
is_login: false, // 登录状态
},
});
</script>
</body>
</html>
代码运行的效果:
4-3. v-else-if
可以出现多个v-else-if语句，但是v-else-if之前必须有一个v-if开头。后面可以跟着v-else，也可以没有。
标签元素：
<h1 v-if="num==1">num的值为1</h1>
<h1 v-else-if="num==2">num的值为2</h1>
<h1 v-else>num的值是{{num}}</h1>
data数据：
data:{
num:2
}
展示今天是星期几代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="card">
<li v-if="num==1">星期一</li>
<li v-else-if="num==2">星期二</li>
<li v-else-if="num==3">星期三</li>
<li v-else-if="num==4">星期四</li>
<li v-else-if="num==5">星期五</li>
<li v-else-if="num==6">星期六</li>
<li v-else>星期天</li>
</div>
<script>
var vm = new Vue({
el: "#card",
data: {
num: new Date().getDay(),
},
});
</script>
</body>
</html>
4-4. v-show
用法和v-if大致一样，区别在于2点：
- v-show后面不能v-else或者v-else-if
- v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ]
标签元素：
<h1 v-show="ok">Hello!</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="card">
<!--v-show隐藏元素时，使用的是display:none来隐藏的-->
<p v-show="is_show">文本内容</p>
<!--v-if是直接从HTML文档中移除元素-->
<p v-if="is_show">文本内容</p>
</div>
<script>
var vm = new Vue({
el: "#card",
data: {
is_show: false,
},
})
;
</script>
</body>
</html>
5. 列表渲染指令
在vue中，可以通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象。
数据是数组：
<ul>
<!--book是列表的每一个元素-->
<li v-for="book in book_list">{{book.title}}</li>
</ul>
<ul>
<!--book是列表的每一个元素，index是每个元素的下标-->
<li v-for="(book, index) in book_list">第{{ index+1}}本图书：{{book.title}}</li>
</ul>
<script>
var vm1 = new Vue({
el: "#app",
data: {
book_list: [
{"id": 1, "title": "图书名称1", "price": 200},
{"id": 2, "title": "图书名称2", "price": 200},
{"id": 3, "title": "图书名称3", "price": 200},
{"id": 4, "title": "图书名称4", "price": 200},
]
}
})
</script>
数据是对象：
<ul>
<!--i是每一个value值-->
<li v-for="value in book">{{value}}</li>
</ul>
<ul>
<!--i是每一个value值,j是每一个键名-->
<li v-for="attr, value in book">{{attr}}:{{value}}</li>
</ul>
<script>
var vm1 = new Vue({
el: "#app",
data: {
book: {
// "attr":"value"
"id": 11,
"title": "图书名称1",
"price": 200
},
},
})
</script>
搭建商品表格页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div class="container">
<div id="app">
<br><br>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>序号</th>
<th>商品编号</th>
<th>商品标题</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="goods,index in goods_list">
<th>{{index+1}}</th>
<th>{{goods.id}}</th>
<th>{{goods.title}}</th>
<th>{{goods.price}}</th>
<th>{{goods.num}}</th>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
goods_list: [
{id: 10, title: "商品1", price: 100, num: 65},
{id: 15, title: "商品2", price: 120, num: 65},
{id: 16, title: "商品3", price: 150, num: 65},
{id: 18, title: "商品4", price: 200, num: 65},
{id: 20, title: "商品5", price: 3060, num: 65},
{id: 21, title: "商品6", price: 1000, num: 65},
],
},
})
;
</script>
</body>
</html>
显示效果:
练习：
goods:[
{"name":"python入门","price":150},
{"name":"python进阶","price":100},
{"name":"python高级","price":75},
{"name":"python研究","price":60},
{"name":"python放弃","price":110},
]
# 把上面的数据采用table表格输出到页面，价格大于60的数据需要添加背景色橙色[orange]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-hover table-border table-striped">
<thead>
<tr>
<th>序号</th>
<th>课程</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="good, index in goods">
<th>{{index+1}}</th>
<th>{{good.name}}</th>
<th :style="good.price>60 ? bgc : ''">{{good.price}}</th>
</tr>
</tbody>
</table>
</div>
<script>
let vm = new Vue({
el: '.container',
data: {
goods: [
{"name": "python入门", "price": 150},
{"name": "python进阶", "price": 100},
{"name": "python高级", "price": 75},
{"name": "python研究", "price": 60},
{"name": "python放弃", "price": 110},
],
bgc: {
backgroundColor: 'orange'
},
},
});
</script>
</body>
</html>
显示效果:
三. 总结
# vue.js的快速入门使用
# vue版本
目前有1.x、2.x和3.x 版本，我们争对2.x版本
# jQuery和vue的定位
jQuery获取元素, 完成特效
vue方便操作, 控制数据, 完成特效.
# 基本使用
# 引入文件:
开发版本vue-x.x.x.js
上线版本vue.min.js
# 实例化Vue对象: el, data是json对象
let vm = Vue({
el: '#app', # 要操作的元素的选择符
data: {
message: 'hello world',
},
});
# 在el属性控制的标签范围展示或者控制数据
<div id="app">
{{message}}
</div>
{{message}}
# 注意: el属性控制的标签范围外的数据的格式, 无法进行数据的显示
# vue的基本使用三个注意事项
1. 可存在多个: 一个html页面中可以存在多个vue实例对象，但是实例对象的变量名强烈建议唯一，而且每一个vue对象负责一个特效功能
2. 区分大小写: js中所有的变量和语法都是区分大小写的，new Vue()
3. 书写的建议: 建议实例化vue对象的代码写在body的最后面。免得出现html元素无法获取的错误出现
书写的第一种方式: head标签内部
window.onload = function() {
let vm = Vue({
...
});
}
书写的第二种方式: body标签底部
# vue.js的M-V-VM思想
1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{ }}.
注意: 一定要放在el选择匹配范围内的双标签下.
如果匹配范围是: el: 'input',
那么你如果这样书写将没有效果:
<input type="text">
{{message}}
用法：
vue对象的data属性：
data:{
name:"小明",
}
标签元素：
<h1>{{ name }}</h1>
2. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model
用法：
vue对象的data属性：
data:{
name:"小明",
}
表单元素：
<input v-model="name">
VM思想的同步精髓: 使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。
# 常用指令
# 显示数据
支持js表达式, 但是无法输出HTML代码: {{}}
js表达式之三元表达式: 条件 ? 正确输出结果 : 错误输出结果
表单输入框显示数据使用: v-model
双标签显示HTML代码使用: v-html
# 属性操作
1.x版本: x-bind:属性="data属性"
2.x版本: :属性="data属性"
# 事件操作
1.x版本: x-on:click=""
2.x版本: @click=""
# 样式操作
# 控制标签class类名
.box1 {样式1}
.box2 {样式2}
.box3 {样式2}
值是字符串: :class="cls1"
data: {
cls1: 'box1'
}
值是对象: :class="{box1: false, box2: true}"
值是对象名: :class="cls2"
data: {
cls2: {
box1: false,
box2: true,
}
}
值是元组: :class="[cls1, cls2]"
data: {
cls1: 'box1',
cls2: {
box2: false,
box3: true,
}
}
提示: 其中可以搭配使用js语法, 如:
:class="cls1 ? cls2 : cls3"
data: {
cls1: false,
cls2: 'box1',
cls3: {
'box1': true,
'box2': false,
}
}
# 控制标签style样式
值是对象: :style="{color: cl, backgroundColor: bgc}"
data: {
cl: 'red',
bgc: 'blue',
}
值是对象名: :style="style1"
data: {
color: 'red',
backgroundColor: 'blue',
}
值是数组: :style="[{color: cl, backgroundColor: bgc}, style2]"
data: {
cl: 'red',
bgc: 'blue',
style2: {
fontSize: '20px',
border: '1px solid yellow',
}
}
# 实例-vue版本选项卡
原理: 主要就是利用VM思想, 对V和M的同步控制
# 条件渲染指令
提示: true显示, false隐藏
v-if="data属性"
v-else-if="data属性"
v-else-if="data属性"
v-else
v-show 与 v-if区别
v-show单独使用. v-if可以与v-else-if, v-else连用
在执行条件false情况下, v-show是display:none隐藏标签, v-if系列都是直接删除标签
# 列表渲染指令
v-for="good, index in good_list"
good是good_list中的每项元素
index是每个元素的索引
四. Vue对象提供的属性功能
1. 过滤器
过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。
定义过滤器的方式有两种。
2. 使用Vue.filter()进行全局定义
// 使用: 一般用作js外部文件导入使用
// 注意: 如果需要展示数据而实例化Vue对象数据之前. 也就是说js文件的导入, 要先与过滤展示数据的Vue对象实例化之前.
Vue.filter('format', function (money) {
return money.toFixed(2) + '元'; // js中提供了一个toFixed方法可以保留2位小鼠. (四舍五入)
});
代码示例:
- HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="filters.js"></script>
</head>
<body>
<div id="app">
<p>{{price}}</p>
<!-- price会当作参数传给format函数, 最终以函数的返回值作为最终的返回结果 -->
<p>{{price|format}}</p>
</div>
<script>
let vm = new Vue({
el: '#app', // vm的模板对象
data: { // vm的数据
price: 8.156333,
},
methods: {} // vm的方法
});
</script>
<!--注意: 不能放到这个位置-->
<!--<script src="filters.js"></script>-->
</body>
</html>
- filters.js文件中代码
// 全局过滤器
Vue.filter('format', function(money) {
return money.toFixed(2) + '元'; // js中提供了一个toFixed方法可以保留2位小鼠. (四舍五入)
});
3. vue对象中通过filters属性来定义
// 注意: 局部过滤器, 只能争对其Vue实例化的对象数据进行的过滤
filters: {
format(money) {
return `${money.toFixed(2)}元`;
}
}
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{price}}</p>
<p>{{price|format}}</p>
<p>{{price|format1}}</p>
</div>
<script>
let vm = new Vue({
el: "#app", // vm的模板对象
data: { // vm的数据
price: 8.156333,
},
methods: {}, // vm的方法
// 局部过滤器只能在当前vm对象中使用
filters: {
format(money) {
return `${money.toFixed(2)}元`;
}
}
});
// 注意: 局部过滤器, 只能争对其Vue实例化的对象数据进行的过滤
let vm1 = new Vue({
el: '#app',
data: {},
filters: {
format1(money) {
return `${money.toFixed(2)}元`;
}
}
});
</script>
</body>
</html>
五. 计算和侦听属性
1. 计算属性
我们之前学习过字符串反转，如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num1">+
<input type="text" v-model="num2">=
<span>{{total}}</span>
</div>
<script>
let vm = new Vue({
el: '#app', // vm的模板对象
data: { // vm的数据
num1: 0,
num2: 0,
},
methods: {}, // vm的方法
computed: { // 计算属性，相当于创建一个新的变量保存数据计算的结果
total() {
// parseFloat 把数据转换成浮点数
// parseInt 把数据转换成整数
return parseFloat(this.num1) + parseFloat(this.num2);
}
}
});
</script>
</body>
</html>
2. 监听属性
侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。
侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click="num++">赞({{num}})</button>
</div>
<script>
let vm = new Vue({
el: '#app', // vm的模板对象
data: { // vm的数据
num: 0,
},
watch: {
// 侦听属性，监听指定变量的值是否发生变化，当发生变化时调用对应的方法
num(v1, v2) {
if (this.num >= 5){
this.num = 5;
}
console.log(this.num,"修改后num="+v1,"修改前num="+v2);
}
}
});
</script>
</body>
</html>
六. vue对象的生命周期
1. vue对象的生命周期的8个钩子介绍
每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p @click="auto_increment">{{num}}</p>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
num: 0,
},
methods: {
auto_increment() {
this.num++;
return '我猜你猜我猜你猜我猜不猜?'
}
},
beforeCreate() {
console.log('----vm对象初始化完成之前自动执行的代码----');
console.log(this.$el); // undefined 没有查找到vm需要控制的元素
console.log(this.$data); // undefined data模型中的数据也没有注入到vm对象里面作为属性
},
created() { // 作用: 这里主要实现到服务端获取页面数据[ajax]
console.log('----vm对象初始化完成以后自动执行的代码----');
console.log(this.$el); // undefined 没有查找到vm需要控制的元素
console.log(this.$data); // {__ob__: Observer} 已经把data模型中的数据注入到vm对象里面作为属性
this.num = localStorage.num; // 第二步: 下面将num中的值, 在执行vm.$destroy()销毁之前通过localStorage让浏览器进行保存以后, 在data初始化时, 就又将之前删除的数据拿出, 之前虽然数据销毁了, 刷新页面以后任然保留之前的数据
},
beforeMount() {
console.log('----vm属性渲染到HTML模板之前自动执行的代码----');
console.log(this.$el);
/*
<div id="app">
<p @click="auto_increment">{{num}}</p>
</div>
*/
console.log(this.$data); // {__ob__: Observer}
},
mounted() { // 作用: 修改页面的内容[页面特效]
console.log('----vm属性渲染到HTML模板之后自动执行的代码----');
console.log(this.$el);
/*
<div id="app">
<p>0</p>
</div>
*/
console.log(this.$data); // {__ob__: Observer}
},
beforeUpdate() {
console.log('----vm属性数据更新了，渲染之前执行的代码----');
console.log(this.num); // 1
console.log(this.$el.innerText); // 0
},
updated() {
console.log('----vm属性数据更新了，渲染之后执行的代码----');
console.log(this.num); // 1
console.log(this.$el.innerText); // 1
},
// 销毁vm对象 vm.$destroy()
beforeDestroy() {
console.log("----vm对象被销毁之前，会自动执行这里的代码----");
console.log(this);
localStorage.num = this.num; // 第一步: 在销毁数据之前可以将数据保存到localStorage中
},
destroyed() {
console.log('----vm对象被销毁以后，会自动执行这里的代码----');
console.log(this.$el); // undefined
}
});
</script>
</body>
</html>
总结：
1. created: 实现到服务端获取页面数据[ajax]
2. mounted: 修改页面的内容[页面特效]
2. 阻止事件冒泡和刷新页面
事件冒泡：指代js中子元素的事件触发以后，会导致父级元素的同类事件一并被触发到。
事件冒泡有好处，也有坏处。
好处：如果能正确利用这种现象，可以实现事件委托，提升特效的性能
坏处：如果没有正确使用，则会导致不必要的bug出现。
使用.stop和.prevent (提示: 辅助指令可以链式操作.stop.prevent)
2-1. 知识回顾1: js的事件冒泡和阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style>
.box1 {
width: 400px;
height: 300px;
background-color: orange;
padding-top: 100px;
}
.box2 {
width: 200px;
height: 200px;
background-color: #000;
margin: auto;
}
</style>
</head>
<body onclick="alert('点击了body');">
<div class="box1">
<div class="box2"></div>
</div>
<script>
let box1Ele = document.getElementsByClassName('box1')[0];
let box2Ele = document.getElementsByClassName('box2')[0];
box1Ele.onclick = function () {
alert('点击了box1');
};
box2Ele.onclick = function (event) {
alert('点击了box2');
console.log(event); // MouseEvent {isTrusted: true, screenX: 337, screenY: 164, clientX: 224, clientY: 39, …}
event.stopPropagation();
}
</script>
</body>
</html>
2-2. 知识回顾2: js利用事件冒泡现象实现事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style>
li:hover {
cursor: pointer;
}
</style>
</head>
<body>
<ul id="app">
<li>1111111111111111</li>
<li>2222222222222222</li>
<li>3333333333333333</li>
<li>4444444444444444</li>
<li>5555555555555555</li>
</ul>
<script>
// 1. 批量元素绑定事件(不合理)
/*let liEleList = document.getElementById('app').children;
for (let i in liEleList) {
liEleList[i].onclick = function () {
console.log(this.innerHTML);
}
};*/
// 2. 通过事件委托来提升性能
let ulEle = document.getElementById('app');
ulEle.onclick = function (event) {
// 事件最初的触发元素
let self = event.target;
console.log(self);
}
</script>
</body>
</html>
2-3. vue中阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style>
.box1{
width: 400px;
height: 300px;
background-color: orange;
padding-top: 100px;
}
.box2{
width: 200px;
height: 200px;
background-color: #000;
margin: auto;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app" class="box1" @click="show('点击了box1')">
<div class="box2" @click.stop="show('点击了box2')"></div>
</div>
<script>
// vue本质上就是js，所以vue中的事件操作也会存在事件冒泡现象
// 可以使用辅助指令 @click.stop来阻止事件冒泡
var vm = new Vue({
el:"#app",
methods:{
show(message){
alert(message);
}
}
})
</script>
</body>
</html>
2-4. vue中阻止页面刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 辅助指令可以多个链式调用 -->
<a href="http://www.baidu.com" @click.stop.prevent="show">百度</a>
</div>
<script>
// vue本质上就是js，所以vue中的事件操作也会存在事件冒泡现象
// 可以使用辅助指令 @click.stop来阻止事件冒泡
var vm = new Vue({
el:"#app",
methods:{
show(){
}
}
})
</script>
</body>
</html>
3. 综合案例-todolist
3-1. html代码
我的计划列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt">
<input type="button" name="" value="增加" id="btn1" class="inputbtn">
<ul id="list" class="list">
<!-- javascript:; # 阻止a标签跳转 -->
<li>
<span>学习html</span>
<a href="javascript:;" class="up"> ↑ </a>
<a href="javascript:;" class="down"> ↓ </a>
<a href="javascript:;" class="del">删除</a>
</li>
<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
</ul>
</div>
</body>
</html>
3-2. 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con {
width: 600px;
margin: 50px auto 0;
}
.inputtxt {
width: 550px;
height: 30px;
border: 1px solid #ccc;
padding: 0px;
text-indent: 10px;
}
.inputbtn {
width: 40px;
height: 32px;
padding: 0px;
border: 1px solid #ccc;
}
.list {
margin: 0;
padding: 0;
list-style: none;
margin-top: 20px;
}
.list li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
.list li span {
float: left;
}
.list li a {
float: right;
text-decoration: none;
margin: 0 10px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div class="list_con" id="app">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt" v-model="content">
<input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="add">
<ul id="list" class="list">
<!-- javascript:; # 阻止a标签跳转 -->
<li v-for="item,index in todolist">
<span>{{item}}</span>
<a href="javascript:;" class="up" @click="up(index)"> ↑ </a>
<a href="javascript:;" class="down" @click="down(index)"> ↓ </a>
<a href="javascript:;" class="del" @click="del(index)">删除</a>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
todolist: ['学习HTML', '学习CSS', '学习JS'],
content: ''
},
methods: {
// 添加计划
add() {
this.todolist.push(this.content);
this.content = ''; // 清空单行文本框中的信息
},
// 删除计划
del(index) {
this.todolist.splice(index, 1);
},
// 向上移动计划
up(index) {
let currentItem = this.todolist.splice(index, 1)[0];
this.todolist.splice(index - 1, 0, currentItem);
},
// 向下移动计划
down(index) {
let currentItem = this.todolist.splice(index, 1)[0];
this.todolist.splice(index + 1, 0, currentItem);
}
}
});
</script>
</body>
</html>
七. 总结
# Vue对象提供的属性功能
# 提示: 过滤器, 一定要指定返回值.
# 全局过滤器: 定义在被过滤对象Vue实例化之前. 一般作为js文件导入.
Vue.filter('过滤器名', fuction(参数1, 参数2, ...) {
过滤数据的逻辑代码
return 过滤以后的结果;
})
# 局部过滤器: 定义在Vue对象内部. 只能争对当前所在的Vue对象实例化以后vm对象的数据进行过滤
let vm = new Vue({
el: '',
data: {},
methods: {},
filters: {
过滤器名(参数1, 参数2, ...) {
过滤数据的逻辑代码
return 过滤以后的结果;
}
}
});
# 计算和侦听属性
# 计算属性
computed: {
total() {
return ...;
}
}
# 监听/侦听属性
data: {
num: 0,
}
watch: {
num(v1, v2) {
// v1: 侦听前的值
// v2: 侦听后的值
return ...;
}
}
# vue对象的生命周期
# vue对象的生命周期的8个钩子介绍
实例:
let vm = nwe Vue({
el: '#app',
data: {}
});
beforeCreate el, data都没有
created el还没有找到控制的元素, data已经有了
beforeMount el找到了要控制的元素, 但是还没有将vm属性渲染到HTML模板
mounted el开始对控制的元素进行渲染, 将vm属性渲染到HTML模板当中
beforeUpdate 在vm属性被修改之前触发
updated 在vm属性被修改之后触发
beforeDestroy 在vm对象被销毁之前触发(销毁: vm.$destroy())
destroyed 在vm对象被销毁之后触发
# 阻止事件冒泡和刷新页面
# 阻止冒泡事件
描述: 对标签进行绑定事件以后, 如果标签的父标签也绑定了事件,
在操作被包含标签触发事件完毕, 同时也会触发所有绑定事件标签中绑定的事件
原生js中:
标签.事件 = function(event) {
event.stopPropagation();
}
解决Jquery中:
return false
vue中:
@事件.stop=""
# 阻止刷新页面
@事件.prevent=""
# 提示: 辅助指令可以链式操作. 进而实现同时阻止冒泡事件和刷新事件
@事件.stop.prevent=""
# 综合案例-todolist
js元组对象追加元素方法: 元组.push(ele)
js高阶函数: splice(索引, 删除数, 新的元素1, 新的元素2....)
八. 通过axios实现数据请求
1. 为什么要用axios?
因为vue.js默认没有提供ajax功能, 为了实现ajax功能, 得通过axios实现.
所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。
下载地址：
https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js
使用文档：https://www.kancloud.cn/yunye/axios/234845
2. axios基本使用介绍
知识储备: 在http协议中，不同的请求动作都有不同的含义.
get 代表向目标服务器请求获取数据
post 代表向目标服务器请求上传数据
put 代表向目标服务器请求更新数据【修改全部数据】
patch 代表向目标服务器请求更新数据【修改部分数据】
delete 代表向目标服务器请求删除数据
axios提供发送http请求的常用方法有两个：axios.get() 和 axios.post()
其它的用法都中差不差:
axios.delete() 的用法和参数与 axios.get() 一样，
axios.put() 或者 axios.patch() 的用法和参数与 axios.post() 一样。
// 发送get请求
// 参数1: 必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com?id=200
// 参数2：可选，请求参数和请求头内容，json对象，要提供给数据接口的参数
axios.get('服务器的资源地址', { // http://www.baidu.com
params: {
参数名: '参数值', // id: 200,
},
headers: {
选项名: '选项值', // 请求头
}
}).then(response => { // 请求成功以后的回调函数
console.log("请求成功");
console.log(response.data); // 获取服务端提供的数据
}).catch(error => { // 请求失败 或者 then中的代码出现异常 以后的回调函数
console.log("请求失败");
console.log(error.response); // 获取错误信息
});
// 发送post请求，参数和使用和axios.get()类似。
// 参数1: 必填，字符串，请求的数据接口的url地址
// 参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
// 参数3：可选，json对象，请求头信息
axios.post('服务器的资源地址', {
username: 'xiaoming',
password: '123456'
}, {
headers: {
选项名: "选项值",
}
}).then(response => { // 请求成功以后的回调函数
console.log(response);
}).catch(error => { // 请求失败 或者 then中的代码出现异常 以后的回调函数
console.log(error);
});
// b'firstName=Fred&lastName=Flintstone
使用axios发送get请求使用实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
</head>
<body>
<div id="box">
</div>
<script>
// 使用天气预报的API: http://wthrcdn.etouch.cn/weather_mini?city=城市名称
let vm = new Vue({
el: '#box',
data: {},
// 在初始化的时候自动发送ajax获取数据
created() {
axios.get('http://wthrcdn.etouch.cn/weather_mini?city=上海').then(response => {
console.log('HTTP请求成功时触发');
console.log(response); // http响应对象
console.log(response.data); // 返回的数据
}).catch(error => {
console.log('HTTP请求失败 或者 then中代码抛出异常时触发');
console.log(error);
console.log(error.response.data); // 希望获取来自服务器的错误信息
});
},
});
</script>
</body>
</html>
九. json
1. 什么是json
json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式。
json的作用：在不同的系统平台 或 不同编程语言之间传递数据。
2. json数据的语法
json数据对象的特点: 没有函数方法, 不支持undefined, 值可以是普通变量还可以是数组或者json对象
// 原生的js的json对象
var obj = {
age:10,
sex: '女',
work(){ // work: function(){}的简写
return "好好学习",
},
}
// json数据的对象格式,json数据格式,是没有方法的,只有属性,属性值：字符串，数值(整数，浮点数，布尔值), json，
{
"name":"tom",
"age":18
}
// json数据的数组格式：
["tom",18,"programmer"]
复杂的json格式数据可以包含对象和数组的写法。
{
"name":"小明",
"age":200,
"is_delete": false,
"fav":["code","eat","swim","read"], // 数组结构也可以作为json传输数据。
"son":{
"name":"小小明",
"age":100,
"lve":["code","eat"]
}
}
json数据可以保存在.json文件中，一般里面就只有一个json对象。
总结：
1. json文件的后缀是.json
2. json文件一般保存一个单一的json数据
3. json数据的属性不能是方法或者undefined，属性值只能：数值[整数,小数,布尔值]、字符串、json和数组
4. json数据只使用双引号、每一个属性成员之间使用逗号隔开，并且最后一个成员没有逗号。
{
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100
}
}
3. postman工具
功能: 可以用于测试开发的数据接口。postman就是一个软件，专门提供给开发者组织和测试http请求的。
下载地址: https://www.postman.com/downloads/
4. js中提供的json数据转换方法
javascript提供了一个JSON对象来操作json数据的数据转换.
| 方法 | 参数 | 返回值 | 描述 |
|---|---|---|---|
| stringify | json对象 | 字符串 | json对象转成字符串 |
| parse | 字符串 | json对象 | 字符串格式的json数据转成json对象 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 把json字符串转换为json对象
let jsonData = `{
"name": "egon",
"password": "egon3714",
"hobbies": ["吃", "喝", "拉", "撒"]
}`;
let jsonObj = JSON.parse(jsonData);
console.log(jsonObj); // {name: "egon", password: "egon3714", hobbies: Array(4)}
// 把json对象转成json数据
jsonObj = {
name: 'egon',
password: '123',
func() { // func: function() {}的简写
return ['哈哈哈', '你没想到吧~']
}
};
jsonData = JSON.stringify(jsonObj);
console.log(jsonData); // {"name":"egon","password":"123"}
// 注意: 不能直接通过转换字符串将我们的json对象转换成我们需要的json字符串格式数据
str = jsonObj.toString();
console.log(str); // [object Object]
</script>
</body>
</html>
十. ajax
1. 什么是ajax
ajax，一般中文称之为："阿贾克斯"，是英文 “Async Javascript And Xml”的简写，译作：异步js和xml数据传输数据。
ajax的作用： ajax可以让js代替浏览器向后端程序发送http请求，与后端通信，在用户不知道的情况下操作数据和信息，从而实现页面局部刷新数据/无刷新更新数据。
所以web开发中ajax是很常用的技术，主要用于操作后端提供的数据接口，从而实现网站的前后端分离。
ajax技术的原理是实例化js的XMLHttpRequest对象，使用此对象提供的内置方法就可以与后端进行数据通信。
实际而言，axios或者jQuery提供的ajax，本质上就是XMLHttpRequest对象操作的封装。
XMLHttpRequest代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*XMLHttpRequest的使用有4个步骤*/
// 1. 实例化XMLHttpRequest
let xhr = new XMLHttpRequest();
// 2. 创建http请求
// 参数1: 字符串，http请求动作，一般是get,post
// 参数2: 字符串，请求的服务端的url地址
xhr.open('get', 'http://wthrcdn.etouch.cn/weather_mini?city=北京');
// 3. 发送请求
// 参数1：字符串，当post请求有请求体数据，则需要把数据填写到这里
// 例如：xhr.send("name=egon&age=17")
xhr.send();
// 4. 获取服务端响应数据
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
// xhr.readyState表示xhr的状态码:
/*
1表示ajx对象刚创建
2表示ajax请求组装完成
3表示ajax请求已发送到服务端
4表示客户端已经获取到服务端返回的数据结果
*/
if (xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
console.log(data); // {data: {…}, status: 1000, desc: "OK"}
}
}
}
</script>
</body>
</html>
2. 数据接口
数据接口，也叫api接口，表示后端提供操作数据/功能的url地址给客户端使用。
客户端通过发起请求向服务端提供的url地址申请操作数据【操作一般有：增删查改】
同时在工作中，大部分数据接口都不是手写，而是通过函数库/框架来生成。
3. ajax的使用
ajax的使用必须与服务端程序配合使用，但是目前我们先学习ajax的使用，所以暂时先不涉及到服务端python代码的编写。因此，我们可以使用别人写好的数据接口进行调用。
jQuery将ajax封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。
3-1. 编写代码获取接口提供的数据: jQ版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#btn').on('click', function () {
$.ajax({
// url: 'http://wthrcdn.etouch.cn/weather_mini?city=城市名称'
url: 'http://wthrcdn.etouch.cn/weather_mini',
type: 'get',
data: {'city': '北京'},
dataType: 'json',
// success: function (args) {
// console.log(args);
// }
}).done(function (response) { // 请求成功以后的操作
console.log(response); // {data: {…}, status: 1000, desc: "OK"}
}).fail(function (error) { // 请求失败以后的操作
console.log(error);
})
})
})
</script>
</head>
<body>
<button id="btn">点我获取数据</button>
</body>
</html>
3-2. 编写代码获取接口提供的数据: vue版本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script>
window.onload = function () {
let vm = new Vue({
el: '#app',
data: {
weather_data: '',
city: '',
},
methods: {
get_weather() {
// http://wthrcdn.etouch.cn/weather_mini?city=城市名称
axios.get("http://wthrcdn.etouch.cn/weather_mini", {
params: {
city: this.city,
}
}).then(response => {
this.weather_data = response.data;
}).catch(error => {
this.weather_data = error;
})
}
}
});
}
</script>
</head>
<body>
<div id="app">
<div>
输入查看的城市: <input type="text" v-model="city">
</div>
<div>
<p>展现的数据在这👇:</p>
<textarea name="" id="" cols="60" rows="20">{{weather_data}}</textarea>
</div>
<button @click="get_weather">点我有你好看</button>
</div>
</body>
</html>
4. 同源策略
同源策略，是浏览器为了保护用户信息安全的一种安全机制。所谓的同源就是指代通信的两个地址（例如服务端接口地址与浏览器客户端页面地址）之间比较，是否协议、域名(IP)和端口相同。不同源的客户端脚本[javascript]在没有得到服务端的明确授权的情况下，浏览器会拒绝显示服务端信息提供给前端ajax。
ajax本质上还是javascript，是运行在浏览器中的脚本语言，所以会被受到浏览器的同源策略所限制。
注意: axios本质上就是javascript的ajax封装，所以会被同源策略限制。
前端地址：http://www.oldboy.cn/index.html |
是否同源 | 原因 |
|---|---|---|
http://www.oldboy.cn/user/login.html |
是 | 协议、域名、端口相同 |
http://www.oldboy.cn/about.html |
是 | 协议、域名、端口相同 |
https://www.oldboy.cn:443/user/login.html |
否 | 协议不同 ( https和http ) |
http:/www.oldboy.cn:5000/user/login.html |
否 | 端口 不同( 5000和80) |
http://bbs.oldboy.cn/user/login.html |
否 | 域名不同 ( bbs和www ) |
同源策略针对ajax的拦截，代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="music">
<button @click="get_music">查询歌曲</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
music: "", // 歌曲标题
},
methods: {
get_music() {
axios.get(`http://tingapi.ting.baidu.com/v1/restserver/ting`, {
params: {
method: "baidu.ting.search.catalogSug",
query: this.music,
}
}).then(response => {
console.log("查询数据成功！");
}).catch(error => {
console.log("查询数据失败！");
})
}
}
})
</script>
</body>
</html>
上面代码运行错误如下：
Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
上面错误，关键词：Access-Control-Allow-Origin
只要出现这个关键词，就是访问受限。出现同源策略的拦截问题。
5. ajax跨域(跨源)方案之CORS
5-1. CORS介绍:
CORS是一个W3C标准，全称是"跨域资源共享"，它允许浏览器向跨源的后端服务器发出ajax请求，从而克服了AJAX只能同源使用的限制。
实现CORS主要依靠后端服务器中响应数据中设置响应头信息返回的。
# 后端django的视图[伪代码]如下:
def post(request):
response = new Response()
response.set_header("Access-Control-Allow-Origin","http://localhost:63342")
return response;
5-2. CORS分析拦截流程图
5-3. 解决ajax只能同源访问数据接口的三种方式
第一种方式: CORS，跨域资源共享，在服务端的响应行中设置
# 设置: 在响应行信息里面设置以下内容
Access-Control-Allow-Origin: ajax所在的域名地址
# 控制访问的二种形式:
# 只允许www.oldboy.cn域名的客户端的ajax跨域访问
Access-Control-Allow-Origin: www.oldboy.cn
# 允许任意源下的客户端的ajax都可以访问当前服务端信息: * 表示任意源
Access-Control-Allow-Origin: *
第二种方式: 利用jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="sendJsonp()">获取数据</button>
<script>
function sendJsonp() {
// 发送jsonp步骤
// 1. 创建script标签，并制定src为api地址，并追加到head标签中
let scriptEle = document.createElement('script');
// scriptEle.setAttribute('src', 'http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=setdata');
// 2. callback 就是服务端配合我们返回调用的方法名，把服务端数据作为参数给callback的值对应方法进行调用
scriptEle.src = 'http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=getJsonp';
document.head.append(scriptEle);
console.log(scriptEle);
}
function getJsonp(data) {
// 这里就是响应数据的处理方法。
console.log(data) // //把数据显示到html页面
}
</script>
</body>
</html>
第三种方式: 服务端代理
5-6. 总结
一. 同源策略：浏览器的一种保护用户数据的一种安全机制。
浏览器会限制ajax不能跨源访问其他源的数据地址。
同源：判断两个通信的地址之间，是否协议，域名[IP]，端口一致。
ajax： http://127.0.0.1/index.html
api数据接口： http://localhost/index
这两个是同源么？不是同源的。是否同源的判断依据不会根据电脑来判断，而是通过协议、域名、端口的字符串是否来判断。
二. ajax默认情况下会受到同源策略的影响，一旦受到影响会报错误如下：
No 'Access-Control-Allow-Origin' header is present on the requested resource
三. 解决ajax只能同源访问数据接口的方式：
1. CORS，跨域资源共享，在服务端的响应行中设置：
Access-Control-Allow-Origin: 允许访问的域名地址
2. jsonp
所谓的jsonp本质上来说不是ajax技术，jsonp的核心实现是依靠script本身加载外部js文件来实现的。当然，实现jsonp技术，也需要服务端的配合
3. 是否服务端代理
思路：通过python来请求对应的服务器接口，客户端和python这边处于同源，那么就实现了服务端代理
十一. 总结
# 通过axios实现数据请求
原因: vue.js默认没有提供ajax功能
# axios基本使用介绍
# http协议请求常用介绍:
get 向目标服务器请求获取数据
post 向目标服务器请求上传数据
put 向目标服务器请求更新数据(更新全部)
patch 向目标服务器请求更新数据(更新部分)
delete 向目标服务器请求删除数据
# axios发送http请求相同用法和参数
axios.get() 和 axios.delete() 一样
axios.post() 和 axios.put() 和 axios.patch() 一样
# axios.get()使用
axios.get('url', {
params: { // url?号后面的参数, 可以不指定, 在url中指定
参数名: '参数值'
},
headers: { // 请求头
选项名: '选项值'
}
}).then(response => { // 请求成功以后自动触发的回调函数
console.log(response); // 获取服务端返的响应对象
console.log(response.data); // 获取服务端返的响应对象中的数据
}).error(error => { // 请求失败 或者 then中代码错误 自动触发的回调函数
console.log(error); // 获取服务端返回的错误信息
console.log(error.response.data); // 获取服务端的错误信息
})
# axios.post()使用
axios.post('url', {
// post请求的key:value键值对数据
参数名: '参数值'
},{
headers: {
// 请求头
选项名: "选项值",
}
}
).then(response => {
console.log(response);
console.log(response.data);
}).catch(error => {
console.log(error);
console.log(error.response.data);
})
# json
# json 全称 JavaScript Object Notation 中文 JavaScript对象表示方法. 类始于JavaScript对象的一种数据格式
# 作用:
不同平台 或者 不同编程语言 之间传递数据
# json数据对象的特点:
1. 没有函数方法
2. 不支持undefined
3. 值的范围: 整数, 小数, 布尔, 字符串, json, 数组
4. 只使用双引号. 每个属性成员之间使用逗号隔开, 并且最后一个成员没有逗号
5. 文件后缀: .json
# js中提供的json数据转换方法
json格式字符串转json对象: JSON.parse()
json对象转json格式字符串: JSON.stringify()
注意: 不能使用.toString()方法将json对象转换成json格式字符串
# ajax
# ajax 全称 Asynchronous JavaScript And Xml 中文 异步JavaScript和Xml
# 特点:
局部刷新, 异步提交
# 提示:
jQuery或者axios提供的ajax, 本质上都是js原生的XMLHttpRequest对象操作的封装
# ajax的使用: jQuery版本
$.ajax({
url: '',
type: 'get/post/patch/put/delete',
data: {},
dataType: 'json',
}).done(function (response) { // 请求成功以后自动触发回调函数
console.log(response);
}).fail(function (error) { // 请求失败以后自动触发回调函数
console.log(error);
});
# ajax的使用: axios版本
axios.post('url', {
username: 'egon',
}, {
headers: {
选项属性: '选项值',
}
}).then(response => { // 请求成功以后自动触发会回调函数
console.log(response);
console.log(response.data);
}).catch(error => { // 请求失败以后自动触发回调函数
console.log(error);
console.log(error.response.error);
})
# 同源策略
# 同源策略判断依据:
协议://域名:端口/
# 同源策略截断数据的发生位置: 浏览器
服务端返回响应数据, 浏览器判断, 再进行截断.
# 判断访问受限的关键词:
Access-Control-Allow-Origin
# 争对同源策略的解决方式:
1. 服务端开启CORS
2. jsonp
3. 代理服务器
十二. 组件化开发
1. 组件[component]
组件（Component）是自定义封装代码的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。
而在网页中实现一个功能，需要使用html定义功能的内容结构，使用css声明功能的外观样式，还要使用js来定义功能的特效，因此就产生了把一个功能相关的[HTML、css和javascript]代码封装在一起组成一个整体的代码块封装模式，我们称之为“组件”。
所以，组件就是一个html网页中的功能，一般就是一个标签，标签中有自己的html内容结构，css样式和js特效。
这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。
vue的组件有两种：默认组件[全局组件] 和 单文件组件
2. 默认组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 2. 调用组件 -->
<up-and-down></up-and-down>
<up-and-down></up-and-down>
<up-and-down></up-and-down>
</div>
<script>
// 1. 通过Vue类创建组件
// 组件与组件之间的数据，方法都是独立的，而且互相不会被影响。
Vue.component('UpAndDown', {
template: `
<div>
<button :disabled="disabled" @click="subtract">-</button>
<input type="text" v-model="num">
<button @click="add">+</button>
</div>
`,
data() { // 组件里面的变量数据
return {
num: 0,
disabled: false,
}
},
methods: { // 组件里面的方法
subtract() {
this.num--;
},
add() {
this.num++;
},
},
watch: {
num() {
if (this.num <= 0) {
this.num = 0;
this.disabled = true;
} else {
this.disabled = false;
}
}
}
});
let vm = new Vue({
el: '#app',
data: {},
});
</script>
</body>
</html>
3. 有关于组件名的命名规范
官方推荐的组件名是 每个单词首字母大写（PascalCase） 或者 全小写用 - 连接（kebab-case） 。在DOM中使用的时候， 改为全小写， 单词之间用 - 连接。
Vue.component('MyComponent', {})； 或者 Vue.component('my-component', {});import MyComponent from 'MyComponent.vue';
export default {
name: 'MyComponent'
}
在DOM中使用的时候， <my-component></my-component>
参考博客: https://www.cnblogs.com/wjyz/p/10874831.html
十三. Vue自动化工具（Vue-cli）
前面学习了普通组件以后，接下来我们继续学习单文件组件则需要提前先安装准备一些组件开发工具。否则无法使用和学习单文件组件。
一般情况下，单文件组件，我们运行在 自动化工具vue-CLI中，可以帮我们把单文件组件编译成普通的js代码。所以我们需要在电脑先安装搭建vue-CLI工具。
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。苹果系统或者Linux系统你可以使用 nvm 或 Windows系统你可以使用nvm-windows, 通过它们你可以在同一台电脑中管理多个 Node 版本。
curl -o- https://github.com/nvm-sh/nvm/v0.35.3/install.sh | bash
安装记录:
打开:https://github.com/coreybutler/nvm-windows/releases
安装完成以后,先查看环境变量是否设置好了.
常用的nvm命令
nvm list # 列出目前在nvm里面安装的所有node版本
nvm install node版本号 # 安装指定版本的node.js
nvm uninstall node版本号 # 卸载指定版本的node.js
nvm use node版本号 # 切换当前使用的node.js版本
如果使用nvm工具，则直接可以不用自己手动下载，如果使用nvm下载安装 node的npm比较慢的时候，可以修改nvm的配置文件(在安装根目录下)
# settings.txt
root: C:\tool\nvm [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
1. 安装node.js
Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别：
- 运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上
- 功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能读写数据库。
我们一般安装LTS(长线支持版本 Long-Time Support)：
下载地址：https://nodejs.org/en/download/【上面已经安装了nvm，那么这里不用手动安装了】
node.js的版本有两大分支：
-
官方发布的node.js版本：0.xx.xx 这种版本号就是官方发布的版本
-
社区发布的node.js版本：xx.xx.x 就是社区开发的版本
Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令：
node -v
2. npm
在安装node.js完成后，在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。
npm install -g 包名 # 安装模块 -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list # 查看当前目录下已安装的node包
npm view 包名 engines # 查看包所依赖的Node的版本
npm outdated # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名 # 更新node包
npm uninstall 包名 # 卸载node包
npm 命令 -h # 查看指定命令的帮助文档
3. 安装Vue-cli
# g全称global
npm install -g vue-cli
# 查看版本
vue -V
如果安装速度过慢，一直超时，可以考虑切换npm镜像源：http://npm.taobao.org/
也可也参考: https://www.jianshu.com/p/115594f64b41
4. 使用Vue-CLI初始化创建前端项目
4-1. 生成项目目录
使用vue-cli自动化工具可以快速搭建单页应用项目目录。
该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
先切换到对应文件夹下, 生成一个基于 webpack 模板的新项目:
'''
webpack 是前端比较流行的一个自动化开发工具.
自带了测试服务器，所以我们接下来开发前端，可以通过启动http服务器来查看代码效果
'''
vue init webpack 项目目录名
例如：
vue init webpack vuedemo
执行了上述创建项目命令以后会有9个选项进行选择:
X:\Vue
$ vue init webpack vuedemo
? Project name vuedemo # ① project name 项目名称(回车默认)
? Project description (A Vue.js project) # ② project name 项目名称(回车默认)
? Author # ③ 作者姓名. 安装了git就(回车默认)
? Vue build # ④ vue build 编译代码的方式(第一个表示运行时+编译, 会自动生成编译文件, 如果项目没有修改的话, 会用自动编译后的代码, 执行效率很高. 第二个表示只在运行时生成编译文件, 在每次运行时生成编译文件.)
> Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere # 编译.
? Install vue-router? (Y/n) # ⑤ 是否安装vue的路由插件(如果项目是多个页面, 那么需要. 如果项目是单个页面, 那么不需要路由. 一般搭建项目都是选择y)
? Use ESLint to lint your code? (Y/n) # ⑥ use ESLint 代码检测工具. 如果指定y, vue中会强烈建议大家使用ES6的新语法. 如: let const等. 一般选择n
? Set up unit tests (Y/n) # ⑦ 设置单元测试. 一般选择n
? Setup e2e tests with Nightwatch? (Y/n) # ⑧ 和上面一样e2e nigthwatch都是前端的代码测试工具. 一般选择n
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) # ⑨ 安装第三方模块的方式选择. 一般选择NPM
> Yes, use NPM
Yes, use Yarn
No, I will handle that myself
启动开发服务器 ctrl+c 停止服务:
cd myproject
npm run dev # 运行这个命令就可以启动node提供的测试http服务器
运行了上面代码以后,终端下会出现以下效果提示：
4-2. 项目目录结构
vuedemo/
├── build # 编译配置目录. 主要将我们写的.vue文件编译成js普通带代码
├── build.js # 生产环境构建代码
├── check-versions.js # 检查node & npm等版本
├── dev-client.js # 热加载相关
├── dev-server.js # 构建本地服务器
├── utils.js # 构建配置公用工具
├── vue-loader.conf.js # vue加载器
├── webpack.base.conf.js# webpack基础环境配置
├── webpack.dev.conf.js # webpack开发环境配置
└── webpack.prod.conf.js# webpack生产环境配置
├── config # 项目开发环境配置相关代码
├── dev.env.js # 开发环境的配置文件 Development
├── index.js # 默认的配置文件
└── prod.env.js # 生产环境的配置文件 production
├── node_modules # node的依赖包(模块)目录. 本地开发需要, 项目放入服务器就不重要了. 可有可无, 但是删除本地开发就无法启动项目. 如果删除, 通过npm install找回.
├── src # 主开发源码目录，要开发的单文件组件全部在这个目录下的components目录下
├── assets # 资源目录 与static类似, 基本不用, 而用static
├── components # 所有的组件编写目录(vue公共组件)
├── router # 提供给我们编写并保存路由文件目录. (提示: 搭建项目时,会有一个选项询问是否安装vue-router. 当时指定y这个目录则会被创建, 如果指定n则这个目录不存在.)
└── index.js # 路由配置文件（入口js文件）
├── App.vue # 页面入口文件（根组件）
└── main.js # 程序入口文件（入口js文件）
├── static # 静态资源目录. 所有的css，js，图片等资源文件放在这个文件夹
├── dist # 编译文件的存储目录. 上线进入服务器, 必须经过打包编译, 编译出来的文件就会出现在里面. (提示: 没有经过编译, 默认没有这个目录存在)
├── .babelrc # ES6语法编译配置
├── .editorconfig # 定义代码格式
├── .gitignore # git上传需要忽略的文件格式
├── .postcssrc
├── index.html # 入口页面
├── package.json # 项目基本信息
├── package-lock.json # 安装之后锁定包的版本，手动更改package.json文件安装将不会更新包，想要更新只能使用 npm install xxx@1.0.0 --save 这种方式来进行版本更新package-lock.json 文件才可以. 它还可以加快了npm install 的速度，因为 package-lock.json 文件中已经记录了整个 node_modules 文件夹的树状结构，甚至连模块的下载地址都记录了，再重新安装的时候只需要直接下载文件即可
└── README.md # 项目说明
4-3. vue项目执行流程图
整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。
5. 单文件组件的使用
组件有两种：普通组件、单文件组件
普通组件的缺点：
- html代码是作为js的字符串进行编写，所以组装和开发的时候不易理解，而且没有高亮效果。
- 普通组件用在小项目中非常合适，但是复杂的大项目中，如果把更多的组件放在html文件中，那么维护成本就会变得非常昂贵。
- 普通组件只是整合了js和html，但是css代码被剥离出去了。使用的时候的时候不好处理。
将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如："Home.vue"。
创建组件:
在组件中编辑三个标签，编写视图、vm对象和css样式代码。
5-1. 完成案例-点击加减数字
创建Homes.vue
<!--template 编写html代码的地方-->
<template>
<div>
我是Home.Vue页面中的文本内容
<div>
<button :disabled="disabled" @click="subtract">-</button>
<input type="text" v-model="num">
<button @click="add">+</button>
</div>
</div>
</template>
<!--script编写vue.js代码-->
<script>
// 抛出对象. 只有通过export关键字抛出的对象, 才能被其他的js文件导入.
export default {
name: "Home",
data() {
return {
num: 0,
disabled: true,
}
},
methods: {
subtract() {
this.num--;
},
add() {
this.num++;
}
},
watch: {
num() {
if (this.num <= 0) {
this.num = 0;
this.disabled = true;
} else {
this.disabled = false;
}
}
}
}
</script>
<!--style编写当前组件的样式代码-->
<style scoped >
/*
直接在style标签中些css样式, 默认式全局样式, 所有的组件都会被css影响到.
为了保证不同组件之前的css样式互不影响, 我们需要在style标签中声明scoped.
*/
div {
color: red;
}
</style>
提示: 在开发vue项目之前，需要手动把 App.vue的HelloWorld组件代码以及默认的css样式，清除
在App.vue根组件中调用上面的Home.vue组件
<template>
<div id="app">
我是App.vue页面中的文本内容
<!-- 3. 调用主键名. 这里的组件名由components中注册的组件名决定 -->
<Home></Home>
</div>
</template>
<script>
// 1. 导入组件. 提示: import Home中的Home只是导入主键以后定义的别名, 可以任意取名, xxx也行. 不过推荐使用驼峰式命令.
// import Home from './components/Home'
import Home from './components/Home'
import settings from './settings'
export default {
name: 'App',
// 2. 注册组件. 将导入的组件别名写入, 表示将该文件下的组件注册
components: {
Home
},
created() {
console.log(settings.url);
}
}
</script>
<style>
</style>
上面的代码效果：
5-2. 组件的嵌套
有时候开发vue项目时,页面也可以算是一个大组件,同时页面也可以分成多个子组件.
因为,产生了父组件调用子组件的情况. 例如,我们可以声明一个组件,作为父组件
在components/创建一个保存子组件的目录common
在common目录下,可以创建当前页面的子组件. 例如: Banner.vue
<template>
<!--注意: 最外层只能由一个双标签包裹-->
<div id="banner">
<h1>{{message}}</h1>
</div>
</template>
<script>
export default {
name: "Banner",
data() {
return {
message: '我是Banner组件'
}
}
}
</script>
<style scoped>
#banner {
color: gold;
}
</style>
然后，在父组件Home.vue中调用上面声明的子组件。
最后,父组件被App.vue根组件调用.就可以看到页面效果.
效果:
5-6. 传递数据
5-6-1. 父组件的数据传递给子组件
例如: 我们希望把父组件的数据传递给子组件. 可以在子组件中通过props属性来进行数据传递.
传递数据三个步骤：
<1> 在父组件中，调用子组件的组名处，使用属性值的方式往下传递数据
<template>
<div id="home">
<!--注意: 父组件必须是先, 导入了子组件Banner-->
<Banner :homeNum="home_num" homeContent="Home组件的内容"></Banner>
<!--
上面表示在父组件调用Banner子组件的时候传递了2个数据：
1. 如果传递变量: [变量可以各种类型的数据]，属性名左边必须加上冒号:
2. 如果传递普通数据: 则不需要加上冒号:
注意: 必须用在对应组件标签中. 而且属性名都是自定义的，在子组件中就可以通过父组件中定义的属性名获取对应属性值.
-->
</div>
</template>
<2> 在子组件中接受上面父组件传递的数据，需要在vm组件对象中，使用props属性类接收。
<script>
export default {
name: "Banner",
data() {
return {
message: '我是Banner组件' // props属性中表示接受了两个数据。
}
},
props: ['homeNum', 'homeContent']
}
</script>
<3> 在子组件中的template中使用父组件传递过来的数据.
<template>
<!--注意: 最外层只能由一个双标签包裹-->
<div id="banner">
<h1>{{message}}</h1>
<p>{{homeContent}}:{{homeNum}}</p>
</div>
</template>
步骤流程:
使用父组件传递数据给子组件时, 注意一下几点:
-
传递数据是变量, 则需要在属性左边添加冒号. 传递数据是变量, 这种数据称之为"动态数据传递". 传递数据不是变量, 这种数据称之为"静态数据传递"
-
父组件中修改了数据, 在子组件中会被同步修改,但是,子组件中的数据修改了, 是不是影响到父组件中的数据.这种情况, 在开发时, 也被称为"单向数据流"
5-6-2. 子组件传递数据给父组件
<1> 子组件中，数据修改的时候，通过 this.$emit()方法将数据往外提交
<template>
<!--注意: 最外层只能由一个双标签包裹-->
<div id="banner">
<h1>{{message}}</h1>
<!--以下的数是Home父组件传递给子组件Banner的数据-->
<p>{{homeContent}}: {{homeNum}}</p>
<!--以下的数据是Banner子组件提交给Home父组件的数据-->
<button @click="banner_num++">{{banner_num}}</button>
</div>
</template>
<script>
export default {
name: "Banner",
data() {
return {
message: '我是Banner组件', // props属性中表示接受了两个数据。,
banner_num: 100
}
},
props: ['homeNum', 'homeContent'],
// 子组件传递数据给父组件, 我们这里通定义侦听事件的方式进行传递
watch: {
banner_num() {
// this.$emit("父组件的自定义事件名",要传递的参数1,要传递的参数2,...)
this.$emit('bannerFunc', this.banner_num, 'Banner组件的内容');
}
}
}
</script>
<style scoped>
#banner {
color: pink;
}
</style>
<2> 父组件中，在子组件标签中绑定子组件this.$emit()中定义的事件, 再通过自定义事件方法来接收， 其会在子组件触发了this.$emit()时, 父组件中绑定的子组件中自定义的事件就会触发, 进而父组件对应绑定的函数就会执行 (注意: 父组件绑定子组件定义的事件, 这一步骤一定是在父组件中导入子组件标签中定义的)
<template>
<div id="home">
<h1>{{message}}</h1>
<p>{{banner_content}}: {{banner_num}}</p>
<!--3. 导入Banner子组件组件-->
<Banner :homeNum="home_num" homeContent="Home组件的内容" @bannerFunc="homeFunc"></Banner>
<!--
上面[:homeNum="home_num" homeContent="Home组件的内容"]表示在父组件调用Banner子组件的时候传递了2个数据：
1. 如果传递变量: [变量可以各种类型的数据]，属性名左边必须加上冒号:
2. 如果传递普通数据: 则不需要加上冒号:
注意: 必须用在对应组件标签中. 而且属性名都是自定义的，在子组件中就可以通过父组件中定义的属性名获取对应属性值.
上面[@bannerFunc="homeFunc]表示绑定子组件this.$emit()方法定义的事件名.
在子组件被触发时, 会自动触发bannerFunc事件, 进而执行Home父组件中自定义的方法homeFunc.
-->
</div>
</template>
<3> 父组件中，声明一个自定义方法，在事件被调用时，执行的。
<script>
// 1. 导入Banner子组件, 以Banner别名作为组件名
import Banner from './common/Banner'
export default {
name: 'Home',
data() {
return {
message: '我是Home组件',
home_num: 0,
banner_num: '',
banner_content: ''
}
},
// 2. 注册Banner子组件
components: {
Banner
},
methods: {
// 表示来自子组件的$emit里面的参数2, 参数3...
homeFunc(banner_num, banner_content) {
this.banner_num = banner_num;
this.banner_content = banner_content;
}
}
}
</script>
效果:
步骤流程:
练习：
- 使用组件化开发，完成之前的选项卡练习功能
- 使用组件化开发，完成之前的todolist功能
- 使用组件化开发，完成table表格的增删查改作业，数据使用本地存储进行保存
6. 在组件中使用axios获取数据
默认情况下，我们的项目中并没有对axios包的支持，所以我们需要下载安装。
# 在项目根目录中使用 npm安装包
npm install axios
接着在main.js文件中，导入axios并把axios对象 挂载到vue属性中多为一个子对象，这样我们才能在组件中使用。(提示: 在虽然在任意一个.vue文件中也能直接调用, 但是只能让当前.vue使用, 因此还是放在main.js中, 这样任意一个.vue文件在加载的过程中都能调用的到)
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App' // 这里表示从当前的目录下导入 单文件组件App.vue
import axios from 'axios' // 刚刚下载完毕以后, axios.js就在node_modules中, 我们导入即可
Vue.config.productionTip = false;
Vue.prototype.$axios = axios; // 把对象挂载Vue中, 这样在任意.vue文件中就可以直接通过this.$axios直接使用axios实现ajax功能了.
/* eslint-disable no-new */
new Vue({
el: '#app',
components: {App},
template: '<App/>'
})
8.1 在组建中使用axios获取数据
<template>
<div id="app">
<input type="text" placeholder="输入城市获取天气数据吧~" v-model="city">
<button @click="get_weather">获取天气</button>
<p>展示获取的天气数据: </p>
<textarea name="" id="" cols="50" rows="10">{{weather_data}}</textarea>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
weather_data: '',
city: ''
}
},
methods: {
get_weather() {
// 使用axios发送ajax请求获取天气信息
this.$axios.get('http://wthrcdn.etouch.cn/weather_mini', {
params: {
city: this.city,
},
headers: {}
}).then(response => {
this.weather_data = response.data;
}).catch(error => {
alert(error);
alert(error.response.data);
})
}
}
}
</script>
<style scoped>
</style>
效果:
提示: 使用的时候，因为本质上来说，我们还是原来的axios，所以也会收到同源策略的影响。
十四. 总结
# 组件化开发
# 组件 component
# 什么是组件?
将HTML, CSS, JS封装成一个整体的封装模称之为组件
# 解决的问题: 定制某功能, 可以在任意页面重复使用, 且互不冲突.
# 组件的种类
默认组件(普通组件), 单文件组件
# 默认组件
使用范围: 在script标签中使用
优点: 小巧方便, 适合小项目.
缺点: 编写不方便, 耦合程度高, CSS代码没有进行整合
# 使用
Vue.component('组件名', {
template: `
HTML组件代码
`,
data() {
return {
// 组件中所需要的数据
num: 0
}
},
methods: {},
watch: {},
computed: {}
});
# Vue自动化工具Vue-cli
# Vue-cli作用
把单文件组件.vue格式的文件编程成普通的js代码
# Vue-cli搭建项目需要用到node.js
版本: 8.9或更高(推荐8.11.0+)
提示: NVM工具集中管理node.js
# node.js
什么是node.js?
前端的后端语言.
前端语言与后端语言对比:
运行环境: 前端语言运行在客户端浏览器上. 后端语言运行在服务器上
功能: 前端语言不可操作文件, 不能读写数据. 后端语言可以读写数据库, 可以操作文件.
安装版本推荐: LTS 上时间支持 long time support
查看版本命令: node -v
注意: 安装完毕查看环境变量是否配置好了
# npm
描述: 类似于pip命令. npm在node.js下载以后就可以使用了. 类似于python解释器下载以后pip就可以用了
# 安装Vue-cli
npm install -g vue-cli
g 表示 global
# 使用Vue-cli初始化创建前端项目
创建项目:
提示: 先切换到指定文件夹下, 输入以下命令, 在当前文件夹下创建
vue init webpack 项目目录名
启动项目:
提示: 要在项目目录中
npm run dev
关闭项目:
ctrl + c
项目目录:
node_modules被删除了以后通过 npm install找回
执行流程:
index.html
main.js
App.Vue
router
子组件们
# 单文件组件使用
1. 导入组件
import 别名 import '组件路径'
2. 注册组件
export default {
components: {
别名
}
}
3. 调用组件
<别名></别名>
注意: 每个组件中设置样式, 需要在style标签中添加scoped属性, 取消全局影响, 只影响当前组件.
# 组件的嵌套
App.vue
<script>
import Home from 'Home路径'
export default {
name: 'Nav',
data(): {},
components: {
Home
}
}
</script>
Home.vue
<script>
import Nav from 'Nav路径'
export default {
name: 'Nav',
data(): {},
components: {
Nav
}
}
</script>
Nav.vue
<script>
export default {
name: 'Nav',
data(): {},
}
</script>
# 传递数据
# 举例: 父组件Home. 子组件Nav
# 父组件的数据传递给子组件
父组件中:
<Nav :homeData="变量" homeData1="普通文本"></Nav>
子组件中:
export default {
props: ['homeData', 'homeData1']
}
# 子组件传递数据给父组件
子组件中:
this.$emit('navFunc', 要传递的参数1, 要传递的参数2, ...)
父组件中:
<Nav @navFunc="homeFunc"></Nav>
export default {
methods: {
homeFunc(v1, v2, ...) {
v1就是子组件中要传递的参数1
v2就是子组件中要传递的参数2
}
}
}
# 组件中使用axios获取数据
1. nmp install axios
2. main.js中:
import axios from 'axios'
Vue.prototype.$axios = axios
3. .vue组件中
export default {
methods: {
get_weather() {
this.$axios.get('url', {
params: {},
headers: {}
}).then(response => {}).catch(error => {})
}
}
}
十五. 客户端项目搭建
1. 创建项目目录
cd 项目目录[荏苒资讯]
vue init webpack renran
例如，我要把项目保存在桌面下的子目录renran ~/Desktop/renran，可以如下操作：
cd Desktop/renran
vue init webpack renran_pc
打开项目已经，在pycharm的终端下运行vue项目，查看效果。
上面的操作步骤，等同于执行了下面这句命令。
npm run dev
接下来，我们根据终端上效果显示的对应地址来访问项目(如果有多个vue项目在运行，8080端口被占据了，服务器会自动改端口，所以根据自己实际在操作中看到的地址来访问。)
2.初始化项目
清除默认的HelloWorld.vue组件和APP.vue中的默认模板代码和默认css样式
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
接下来，我们可以查看效果了，一张白纸~
3. 安装路由vue-router
官方文档：https://router.vuejs.org/zh/
4.下载安装路由组件
npm i vue-router -S
# npm install vue-router --save
5. 配置路由
5-1. 初始化路由对象
在src目录下创建routes路由目录，在router目录下创建index.js路由文件
index.js路由文件中，编写初始化路由对象的代码.
提示: index.js文件名, 可以任意.
// 1. 引入vue和vue-router组件核心对象，并在vue中通过use注册vue-router组件
import Vue from "vue"; // 注意: 这是小写的vue, 不是Vue
import Router from "vue-router";
Vue.use(Router); // 注册路由组件 注意: 不要写成user
// import Home from '../components/Home'
// 在vue中@表示src目录的路径
import Home from "@/components/Home";
import Login from "@/components/Login";
import User from "../components/User";
// 2. 实例化暴露vue-router对象，并在vue-router里面编写路由，提供给main.js调用
export default new Router({
/*
hash访问路径: http://localhost:8080/#/home
history访问路径: http://localhost:8080/home
*/
mode: "history", // 路由显示模式，默认hash, 地址栏上面默认带#，history不会 带#号
routes:[ // 注意: 不要写成routers
// 路由列表
// {
// name:"路由名称[对应组件的name值，将来用于跳转页面]",
// path: "访问url路径",
// component: 组件名
// },
{
path: '/home', // 字符串, 访问url地址
component: Home, // 变量对象, 访问url地址对应的组件
name: 'Home' // 字符串, 访问url的别名 (可不写)
},
{
path: '/login',
component: Login,
name: 'Login'
},
]
})
5-2. 注册路由信息
打开main.js文件，把router路由规则对象注册到vue中，代码：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from '@/router/index' // 1. 导入实例化的路由对象 (@等同于src目录)
// import router from './router/index';
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router, // 2. 挂载路由对象
components: { App },
template: '<App/>'
});
5-3. 在视图中显示路由对应的内容
src/App.vue组件中，添加显示路由对应的内容。代码：
<template>
<div id="app">
<!-- 调用路由组件 -->
<!--
路由组件的作用：识别访问当前站点的url地址，
获取地址的路径部分，到路由列表中进行识别判断
注意: 标签名必须是这个rouer-view
拓展: router-view由Vue.user(Router)方法注册以后产生
-->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
提示：如果在vue创建项目的时候，设置安装vue-router，则项目会自动帮我们生成上面的router目录和index.js里面的代码，以及自动到main.js里面注册路由对象。
6. 路由对象提供的操作
在我们安装注册了vue-router组件以后，vue-router在vue项目中会帮我们在全局范围内所有组件里面创建2个对象给我们使用：
第一个: this.$router， 用于在js代码中进行页面跳转。
第二个: this.$route， 用于获取地址栏上面的url参数。
6-1. 页面跳转
提示: 页面要进行跳转, 你的路由必须是存在的, 如果没有, 那么就算跳转以后, 页面也是空白的.
src/router/index.js代码：
// 1. 引入vue和vue-router组件核心对象，并在vue中通过use注册vue-router组件
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router); // 注册路由组件 注意: 不要写成user
// import Home from '../components/Home'
// 在vue中@表示src目录的路径
import Home from "@/components/Home";
import Login from "@/components/Login";
export default new Router({
/*
hash访问路径: http://localhost:8080/#/home
history访问路径: http://localhost:8080/home
*/
mode: 'history', // 路由显示模式，默认hash, 地址栏上面默认带#，history不会 带#号
routes: [ // 注意: 不要写成routes
{
path: '/home', // 字符串, 访问url地址
component: Home, // 变量对象, 访问url地址对应的组件
name: 'Home' // 字符串, 访问url的别名 (可不写)
},
{
path: '/login',
component: Login,
name: 'Login'
},
]
})
src/components/Home.vue代码：
我们就可以在Home.vue组件中，使用router-link跳转到User.vue组件中。
<template>
<div id="home">
<h1>我是Home组件</h1>
<h3>页面跳转</h3>
<div>
<!--1. ajax跳转: 绑定事件跳转, router-link跳转 -->
<!--值可以是变量-->
<button @click="jump">使用this.$router来跳转到登录页</button>
<br>
<!--值可以是字符串-->
<router-link to="/login">使用router-link来跳转到登录页</router-link><br>
<!--值可以是变量-->
<router-link :to="url">使用router-link来跳转到登录页</router-link><br>
<!--值可以是对象-->
<router-link :to="{path: '/login'}">使用router-link来跳转到登录页</router-link><br>
<!--逆向解析-->
<router-link :to="{name:'Login'}">使用router-link来跳转到登录页</router-link><br>
<!--
router-link标签，本质上就是a标签，只是由vue-router进行加工处理
可以显示局部页面刷新，不会重新加载内容，进行ajax跳转
-->
<!--2. 刷新页面跳转-->
<a href="/login">使用a标签跳转到登录页</a><br>
</div>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
url: '/login'
}
},
methods: {
jump() {
// 1. 页面跳转到指定页面
/*
注意: this.$router.push() 不能跳转到其他网站, push只作用于站内跳转.。如果真的要跳转外站，
则使用location.href="站外地址，记得加上http://协议"
*/
// this.$router.push('/login'); // 跳转到站内的制定地址页面中，本质上就是 location.href
location.href = '/login';
// 2. 页面前进后退
/*
this.$router.go(n); // 跳转历史记录的n页，n<0，则返回上n页，n>0，则前进n页
*/
// 返回上一页
// this.$router.go(-1); // 返回上一页，本质上就是 location.go()
// this.$router.back(); // 返回上一页，本质上就是 location.back()
// 前进一页
// this.$router.forward(); // 跳转到下一页，本质上就是 location.forward()
// this.$router.go(1);
},
}
}
</script>
<style scoped>
</style>
src/components/Login.vue
<template>
<div id="login">
<h1>我是Login组件</h1>
<router-link to="/home">跳转到Home页面</router-link>
<div>
<button @click="back">返回上一页</button>
<button @click="back1">返回上一页</button>
<button @click="back2">返回上二页</button>
</div>
<div>
<button @click="forward">返回下一页</button>
<button @click="forward1">返回下一页</button>
<button @click="forward2">返回下二页</button>
</div>
</div>
</template>
<script>
export default {
name: "Login",
methods: {
back() {
this.$router.go(-1);
},
back1() {
this.$router.back();
},
back2() {
this.$router.go(-2);
},
forward() {
this.$router.forward();
},
forward1() {
this.$router.go(1);
},
forward2() {
this.$router.go(2);
}
},
</script>
<style scoped>
</style>
6-2. 参数传递
vue-router提供了this.$route，可以让我们接收来自其他页面的附带参数。参数有2种：
查询字符串(query string)，就是地址栏上面?号后面的参数，
例如：http://localhost:8008/user? name=xiaoming&pwd=123，这里name=xiaoming&pwd=123就是查询字符串参数。
路由参数(router params)，就是地址栏上面路由路径的一部分，
例如：http://localhost:8080/user/300/xiaoming
此时，300属于路由路径的一部分，这个300就是路由参数.，当然，xiaoming,或者user也可以理解是路由参数，就是看我们的页面中是否需要接收而已。
6-2-1. 获取查询字符串
提示: 必须先有一个页面跳转发送参数。例如，在Home组件中跳转到User组件中，需要传递name和pwd查询字符串。
src/components/Home.vue代码：
<template>
<div id="home">
<h1>我是Home组件</h1>
<h3>参数传递</h3>
<div>
<!--通过直接url进行跳转, 不将参数与路径进行划分-->
<button @click="pass">跳转到login页面同时传递字符串参数</button>
<br>
<!--通过path字符串路径进行跳转, 通过query进行传单-->
<router-link :to="{path: '/login', query: {'name': 'egon', 'password': '123'}}">跳转到login页面同时传递字符串参数</router-link>
<br>
<!--通过name反向解析跳转, 通过query进行传参-->
<router-link :to="{name: 'Login', query: {'name': 'egon', 'password': '123'}}">跳转到login页面同时传递字符串参数</router-link>
<br>
</div>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
url: '/login'
}
},
pass() {
this.$router.push('/login?name=egon&password=123')
}
}
}
</script>
<style scoped>
</style>
可以下一个页面中，这里代表的就是src/components/User.vue组件，接收来自Home组件的参数。
<template>
<div>
用户中心页面组件
</div>
</template>
<script>
export default {
name: "User",
created() {
// 接收地址栏上面的参数this.$route
/*
this.$route是vue-router提供的一个用于接收地址参数的对象。
经过main.js里面注册router对象以后，
将来在所有的子组件中，可以通过this.$route来获取参数或者通过this.$router跳转页面
*/
// 查询字符串参数this.$route.query
/*
query是this.$route里面的一个数组
this.$route会自动收集地址栏上所有的参数保存到query里面
*/
console.log('------------start--------------');
console.log(this.$route.query); // {name: "egon", password: "123"} (对象)
console.log(this.$route.query.name); // egon
console.log(this.$route.query.password); // 123
console.log(this.$route.fullPath); // /login/?name=egon&password=123 获取除了域名地址后面的所有内容
console.log(this.$route.path); // /login 获取去掉参数以后的路径
console.log(this.$route.matched);
/*
[{…}]
0: {path: "/login", regex: /^\/login(?:\/(?=$))?$/i, components: {…}, instances: {…}, name: "Login", …}
length: 1
*/
console.log('------------end---------------');
}
}
</script>
<style scoped>
</style>
6-2-2. 获取路由参数
例如：我们用户的界面都是一样的，但是每一个用户来到自己的页面中，显示的内容肯定都是不一样的，此时，我们需要使用不同的路径来区分不同的用户。这时候，可以在路由路径中使用路由参数表示不同用户的id
例如：我们就需要设置一个route/index.js中路由信息里面，哪一段路由属于路由参数。
src/routes/index.js设置路由参数。
// 1. 引入vue和vue-router组件核心对象，并在vue中通过use注册vue-router组件
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router); // 注册路由组件 注意: 不要写成user
// import Home from '../components/Home'
// 在vue中@表示src目录的路径
import Home from "@/components/Home";
import User from "../components/User";
export default new Router({
/*
hash访问路径: http://localhost:8080/#/home
history访问路径: http://localhost:8080/home
*/
mode: 'history', // 路由显示模式，默认hash, 地址栏上面默认带#，history不会 带#号
routes: [ // 注意: 不要写成routes
{
path: '/home', // 字符串, 访问url地址
component: Home, // 变量对象, 访问url地址对应的组件
name: 'Home' // 字符串, 访问url的别名 (可不写)
},
{
path: '/user/:name/:password', // 声明当前地址的2个路由参数名！！！
component: User, // 自动导包 Alt+Enter
name: 'User'
}
]
})
然后我们就是在Home中如果需要转到User里面。
src/components/Home.vue代码：
<template>
<div id="home">
<h1>我是Home组件</h1>
<h3>参数传递获取查询路由参数</h3>
<div>
<router-link to="/user/egon/123/">跳转到user页面同时传递路由参数</router-link>
</div>
</div>
</template>
<script>
export default {
name: "Home",
}
</script>
<style scoped>
</style>
src/components/User.vue，组件中可以通过this.$route.params接收路由参数。
<template>
<div id="user">
<h1>我是User组件</h1>
</div>
</template>
<script>
export default {
name: "User",
created() {
// url配置: path: '/user/:name/:password',
// 浏览器输入: http://localhost:8080/user/egon/123
// 或者通过Home页面通过路由参数跳转: :to="/user/egon/123/"
console.log(this.$route.params); // {name: "egon", password: "123"}
console.log(this.$route.params.name); // egon
console.log(this.$route.params.password); // 123
}
}
</script>
<style scoped>
.el-icon-user {
color: gold;
}
</style>
6-3. 总结
# 页面跳转
# ajax跳转
# 绑定事件跳转
this.$router.push('站内url')
# router-link标签跳转
值可以是字符串 <router-link to='/login'></router-link>
值可以是变量 <router-link :to='url'></router-link>
值可以是对象 <router-link :to='{path: '/login'}'></router-link>
值可以是逆向解析 <router-link :to='{name: 'Login'}'></router-link>
# 刷新页面跳转
# 绑定事件跳转
location.href='url'
# a标签跳转
<a href='/login'></a>
# 由上一页或者下一页决定是否是ajax跳转还是页面刷新跳转
this.$router.go(n)
this.$router.back()
this.$router.forward()
# 参数传递
# 获取查询字符串
提示: 以下都是通过跳转来获取, 当然也可以通过在浏览器输入对应的url来获取
跳转发送部分:
方式一: 通过直接url进行跳转, 不将参数与路径进行划分
<button @click="pass">跳转到login页面同时传递字符串参数</button>
methods: {
pass() {
this.$router.push('/login?name=egon&password=123')
}
}
方式二: 通过path字符串路径进行跳转, 通过query进行传参
<router-link :to="{path: '/login', query: {'name': 'egon', 'password': '123'}}">跳转到login页面同时传递字符串参数</router-link>
方式三: 通过name反向解析跳转, 通过query进行传参
<router-link :to="{name: 'Login', query: {'name': 'egon', 'password': '123'}}">跳转到login页面同时传递字符串参数</router-link>
获取跳转部分:
this.$route.query 获取url中?号后面以&符分隔,将=号左右两边参数封装成key:value形式的对象
例如: https://127.0.0.1:8080/login/?name=egon&password=123
获取: {name: "egon", password: "123"}
this.$route.query.name 可以通过'对象.属性'获取对应值
this.$route.query.password
this.$route.fullPath 获取url中从端口开始之后的路径(字符串形式)
例如: https://127.0.0.1:8080/login/?name=egon&password=123
获取: /login/?name=egon&password=123
this.$route.path 获取url中从端口开始, 且去掉?号以后的参数(字符串形式)
例如: https://127.0.0.1:8080/login/?name=egon&password=123
获取: /login
this.$route.matched
例如: https://127.0.0.1:8080/login/?name=egon&password=123
获取:
[{…}]
0: {path: "/login", regex: /^\/login(?:\/(?=$))?$/i, components: {…}, instances: {…}, name: "Login", …}
length: 1
# 获取路由参数
提示: 以下都是通过跳转来获取, 当然也可以通过在浏览器输入对应的url来获取
路由path部分:
path: '/user/:name/:password'
跳转发送部分:
<router-link to="/user/egon/123/">跳转到user页面同时传递路由参数</router-link>
注意: 这里的egon对应:name, 123对应password. 值得类型没有限制.
获取跳转部分:
this.$route.params 获取路由以:声明得参数部分, 封装成对象
例如: https://127.0.0.1:8080/egon/123/
获取: {name: "egon", password: "123"}
this.$route.params.name 可以通过'对象.属性'获取对应值
this.$route.params.password
十六. ElementUI
对于前端页面布局，我们可以使用一些开源的UI框架来配合开发，常用的UI框: bootstrap，H-ui框架，lay-UI框架，Amaze UI，zui框架，ElementUI.
Vue开发前端项目中，比较常用的就是ElementUI了。
ElementUI是饿了么团队开发的一个UI组件框架，这个框架提前帮我们提供了很多已经写好的通用模块，我们可以在Vue项目中引入来使用，这个框架的使用类似于我们前面学习的bootstrap框架，也就是说，我们完全可以把官方文档中的组件代码拿来就用，有定制性的内容，可以直接通过样式进行覆盖修改就可以了。
中文官网：http://element-cn.eleme.io/#/zh-CN
文档快速入门：http://element-cn.eleme.io/#/zh-CN/component/quickstart
1. 快速安装ElementUI
项目根目录执行以下命令:
npm i element-ui -S
上面的命令等同于 npm install element-ui --save
执行命令效果：
2. 配置ElementUI到项目中
在main.js中导入ElementUI，并调用。代码：
// elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 调用插件
Vue.use(ElementUI);
成功引入了ElementUI以后，接下来我们就可以开始进入前端页面开发，首先是首页。
