文章目录
快速入门Vue.js框架
0、前言
前后端分离是现在很火的一个词,而实现前后端分离架构的技术栈之一呢就是“Spring Boot + Vue.js”。
因此就花了一个下午的时间学习Vue.js框架,并且记录下一些笔记。
但是在学习Vue.js框架前,需要具备的知识:HTML、CSS、JavaScript、AJAX。
1、Vue.js框架
1.1、Vue简介
Vue.js框架的作用:
JavaScript
框架- 简化
Dom
操作 响应式
数据驱动。
1.2、第一个Vue程序
更多详情请见:Vue.js框架官方文档
开发步骤
-
导入
开发版本
的Vue.js<!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-
创建Vue实例化对象,设置
el
属性和data
属性 -
使用简洁的
模板语法
把数据渲染到页面上
1.3、el:挂载点
el是用来设置Vue实例挂载(管理)的元素。
<div id="app">
{{ message }} <!-- 等价于 Vue.js -->
</div>
<script>
var app = new Vue({
el:"app",
data:{
message:"Vue.js"
}
})
</script>
Tips:
-
Vue实例的作用范围是什么?
Vue会管理el选项
命中的元素
及其内部的后代元素
。 -
是否可以使用其他的选择器?
可以使用其他的选择器,但是建议使用
ID选择器
。 -
是否可以设置其他的Dom元素?
可以使用其他的双标签,不能使用
html
和body
标签。
1.4、data:数据对象
Vue中用到的数据定义在data
中。
<script>
var app = new Vue({
el: "#app",
data: {
message: " 你好 小黑! ",
array: ["大明", "小明"],
obj: {}
}
})
</script>
Tips:
data
中可以写复杂类型的数据。- 渲染复杂数据时,遵守
js的语法
即可。
1.4、小案例
vue基础小案例
<!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>Vue基础</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: " 你好 小黑! "
}
})
</script>
</body>
</html>
2、Vue指令
通过vue实现常见的网页效果,Vue指令
指的是以v-
开头的一组特殊的语法。
### 2.1、v-text
设置标签的文本值(textContext)。
<div id="app">
<!-- 拼接一个"?"-->
<h3 v-text="message+'?'">嗯哼</h3>
<h2 v-text="info+'?'">嗯哼</h2>
<h1>{{ message +'?'}}嗯哼</h1>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "我是大明!!!",
info: "我的兄弟是小明!!"
}
})
</script>
Tips:
v-text
指令的作用是设置标签的内容(textContext)。- 默认写法会替换全部内容,使用
差值表达式“{{}}”
可以替换指定内容。 - 内部支持写
表达式
。
2.2、v-html
设置标签的innerHTML。
<div id="app">
<h3 v-html="content"></h3>
<h3 v-text="content"></h3>
<h3 v-html="linkToBaidu"></h3>
<h3 v-text="linkToBaidu"></h3>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
content: "百度一下",
linkToBaidu: "<a href='https://www.baidu.com/'>点我跳转到百度哟~</a>"
}
})
</script>
Tips:
v-html
指令的作用是设置元素的innerHTML
。- 内容中的
html结构
会被解析为标签
。 v-text
指令无论是什么内容都只会解析成文本
。- 解析文本使用
v-text
,需要解析html结构
就使用v-html
。
2.3、v-on
为元素绑定事件。
<!--语法-->
<div id="app">
<input type="类型" value="值" v-on:click="函数名称">
</div>
<script>
var app = new Vue({
el:"#app",
methods:{
函数名称:function(){
// 逻辑
}
}
})
</script>
小案例
<div id="app">
<!--点击这个按钮,就会出发doIt事件,这个事件有两个自定义的参数-->
<input type="button" value="点我试试" @click="doIt(666,'老铁')">
<br>
<label>
<!--通过".修饰符"对事件进行限制,".enter"可以限制触发的按键为回车,即键盘按下回车后触发事件-->
<input type="text" @keyup.enter="sayHello">
</label>
</div>
<script>
var app = new Vue({
el: "#app",
methods: {
// 两个参数
doIt: function (p1, p2) {
console.log("淦!");
console.log(p1);
console.log(p2);
},
sayHello: function () {
alert("你好啊,吃了没?");
}
}
})
</script>
Tips:
v-on
指令的作用是为元素绑定事件
。- 事件名不需要写
on
,例如onclick
只需写成v-on:click
。 - 指令可以简写为
@
。 - 绑定的方法定义在
methods
属性中。 - 方法内部通过
this关键字
可以访问定义在data
中的数据。 - 事件绑定的方法写成
函数调用
的形式,可以传入自定义参数
。 - 事件后面跟上
".修饰符"
可以对事件进行限制,例如,".enter"
可以限制触发的按键为回车
。 - 事件的
修饰符
有很多种,详见《Vue.js官方文档》。
2.4、案例–计数器
<!--
案例分析:
1. 在data中定义num属性,类型是数字,渲染到2个按钮中间;
2. 减号绑定点击事件,对应的方法名叫sub,大于0之前递减,到0之后再次点击时弹出提示框;
3. 加号绑定点击事件,对应的方法名叫add,小于0之前累加,到10之后再次点击时弹出提示框。
-->
<!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>
<style>
#app {
width: 480px;
height: 100px;
margin: 200px auto;
}
.input-num {
margin-top: 20px;
height: 100%;
display: flex;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 4px black;
}
.input-num button {
width: 150px;
height: 100%;
font-size: 40px;
color: gray;
cursor: pointer;
border: none;
outline: none;
}
.input-num span {
height: 100%;
font-size: 40px;
flex: 1;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="app">
<!-- 计数器 -->
<div class="input-num">
<button @click="sub"> -</button>
<span>{{ num }}</span>
<button @click="add"> +</button>
</div>
</div>
</body>
</html>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 编码 -->
<script>
// 创建Vue实例
var app = new Vue({
el: "#app",
data: {
num: 1 // 修改的数字
},
methods: {
// 减
sub: function () {
// 递减
if (this.num > 0) {
this.num--;
} else {
alert("别点啦,太小啦!");
}
},
// 加
add: function () {
// 累加
if (this.num < 10) {
this.num++;
} else {
alert("别点啦,太大啦!");
}
}
}
});
</script>
2.5、v-show
根据表达式值的真或假(true
或者false
),切换元素的显示和隐藏。
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<img v-show="isShow" src="./img/monkey.gif" alt="">
<br>
<!-- 表达式为false-->
<a v-show="age>=18" href="https://www.baidu.com/">点我去百度</a>
<!-- 表达式为true-->
<a v-show="age<18" href="https://www.bilibili.com/">点我去B站</a>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false,
age: 17
},
methods: {
changeIsShow: function () {
//isShow变量值取反
this.isShow = !this.isShow;
}
}
})
</script>
Tips:
v-show
指令的作用是根据真假(true
或者false
)切换元素的显示状态。- 原理是修改元素的
display
,实现显示和隐藏。 - 指令后面的内容,最终会解析为布尔值(
true
或者false
),若为true
元素显示;若为false
元素隐藏。 - 数据改变之后,对应元素的显示状态会
同步更新
。
2.6、v-if
根据表达式值的真或假(true
或者false
),切换元素的显示和隐藏(操纵DOM
元素)。
<div id="app">
<input type="button" value="切换显示" @click="toggleIsShow">
<p v-if="isShow">大明</p>
<p v-show="isShow">大明 - v-show修饰</p>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false
},
methods: {
toggleIsShow: function () {
this.isShow = !this.isShow;
}
},
})
</script>
Tips:
v-if
指令的作用是根据表达式值的真或假(true
或者false
),切换元素的显示和隐藏(操纵DOM
元素)。- 本质是通过操纵
DOM
元素来切换显示状态。 - 表达式的值为
true
则元素存在于DOM树
中,反之,从DOM树
中移除。 v-show
的资源消耗更小,所以频繁的切换使用v-show
,反之使用v-if
。
2.6、v-bind
设置元素的属性,例如src
、title
、class
……。
<!-- v-bind:属性名=表达式 -->
<style>
.active {
border: 1px solid red;
}
</style>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br>
<!-- 点击图片触发事件,给设置img元素的class属性 -->
<!-- v-bind:class="表达式(true or false)" -->
<img v-bind:src="imgSrc" alt="" v-bind:title="imgTitle+'!'" v-bind:class="isActive?'active':''"
@click="toggleActive">
<br>
<img :src="imgSrc" alt="" :title="imgTitle+'!'" :class="{active:isActive}" @click="toggleActive">
</div>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc: "img/jvm_logo.jpg",
imgTitle: "您好啊,我叫Java虚拟机",
isActive: false
},
methods: {
toggleActive: function () {
this.isActive = !this.isActive;
}
},
})
</script>
Tips:
- v-bind指令的作用是为元素绑定属性。
- 完整的写法是
“v-bind:属性名”
,简写可以省略“v-bind”
,只保留“:属性名”
。 - 需要动态的增删
class
建议使用对象的方式,即"{active:isActive}"
。
2.7、v-for
根据数据生成列表结构。
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(city,index) in cityArr">
<!-- index从0开始 -->
{{ index+1 }}中国的一线城市:{{ city }}
</li>
</ul>
<hr>
<h2 v-for="person in persons" v-bind:title="person.name">
{{ person.name }}
</h2>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
cityArr: ["北京", "上海", "广州", "深圳"],
persons: [
{name: "杨过"},
{name: "郭靖"},
{name: "乔峰"},
{name: "张无忌"}
]
},
methods: {
add: function () {
//添加数据,调用push方法
this.persons.push({name: "令狐冲"});
},
remove: function () {
//删除数据,调用shift方法
this.persons.shift();
}
},
})
</script>
Tips:
v-for
指令的作用是根据数据生成列表结构。- 数组经常和
v-for
结合使用。 - 语法是
"(item, index) in 数据"
,item
和index
可以结合其他指令一起使用。 - 数组长度的更新会同步到页面上,是
响应式
的。
2.8、v-model
获取和设置表单元素的值(双向数据绑定)。
<div id="app">
<input type="text" v-model="message"/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"嗯哼!?"
}
})
</script>
双向绑定的意思就是说,如过data
中的message
改变,那么v-model="message"
中的message
的值也会改变,反之亦然。
小案例:
<div id="app">
<input type="button" value="修改message的值" @click="setMessage">
<input type="text" v-model="message" @keyup.enter="getMessage">
<h2>message的值:{{ message }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "嗯哼!?"
},
methods: {
getMessage: function () {
alert(this.message);
},
setMessage: function () {
this.message = "我在学习Vue.js呀~";
}
},
})
</script>
Tips:
v-model
指令的作用是便捷的设置和获取表单元素的值。绑定的数据
会和表单元素值
相关联。- 绑定的元素
<——>
表单元素的值。
3、axios
功能强大的网络请求库。
3.1、axios和ajax的区别
axios
是通过promise
实现对ajax
技术的一种封装,就像jQuery
实现ajax
封装一样。
简单来说: ajax
技术实现了网页的局部数据刷新,axios
实现了对ajax
的封装。
也就是说:axios
是ajax
,但ajax
不止axios
。
3.2、ajax的使用
概念: ASynchronous JavaScript And XML(异步的JavaScript 和 XML)。
异步和同步:客户端和服务器端相互通信的基础上
- 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。
基本使用:
-
原生的JavaScript实现方式
//1.创建核心对象 var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //2. 建立连接 /* 参数: 1. 请求方式:GET、POST * get方式,请求参数在URL后边拼接。send方法为空参 * post方式,请求参数在send方法中定义 2. 请求的URL: 3. 同步或异步请求:true(异步)或 false(同步) */ xmlhttp.open("GET","ajaxServlet?username=tom",true); //3.发送请求 xmlhttp.send(); //4.接受并处理来自服务器的响应结果 //获取方式:xmlhttp.responseText //什么时候获取?当服务器响应成功后再获取 //当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。 xmlhttp.onreadystatechange=function() { //判断readyState就绪状态是否为4,判断status响应状态码是否为200 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //获取服务器的响应结果 var responseText = xmlhttp.responseText; alert(responseText); } }
-
JQuery实现方式
-
. a j a x ( ) : ‘ .ajax():` .ajax():‘.ajax({键值对})`
* 语法:$.ajax({键值对}); //使用$.ajax()发送异步请求 $.ajax({ url:"ajaxServlet1111" , // 请求路径 type:"POST" , //请求方式 //data: "username=jack&age=23",//请求参数 data:{"username":"jack","age":23}, success:function (data) { alert(data); },//响应成功后的回调函数 error:function () { alert("出错啦...") },//表示如果请求响应出现错误,会执行的回调函数 dataType:"text"//设置接受到的响应数据的格式 });
-
. g e t ( ) : ‘ .get():` .get():‘.get(url, [data], [callback], [type])`
语法:$.get(url, [data], [callback], [type]) * 参数: * url:请求路径 * data:请求参数 * callback:回调函数 * type:响应结果的类型
-
. p o s t ( ) : ‘ .post():` .post():‘.post(url, [data], [callback], [type])`
* 语法:$.post(url, [data], [callback], [type]) * 参数: * url:请求路径 * data:请求参数 * callback:回调函数 * type:响应结果的类型
-
3.3、axios的使用
<!-- 导包 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
-->
axios.get(地址?key=value&key2=values)
.then(
function(response){
……
},
function(err){
……
})
axios.post(地址,{key:value,key2:value2})
.then(
function(response){
……
},
function(err){
……
})
Tips:
axios
必须导入才可以使用。- 使用
get
和post
方法即可发送对应的请求。 then
方法中的回调函数会在请求成功
或者请求失败
时触发。- 通过回调函数的形参可以获取
“响应内容”
或者“错误信息”
。
3.4、案例–获取笑话
首先提供两个接口:
-
接口1:随机获取笑话
请求地址:https://autumnfish.cn/api/joke/list 请求方法:get 请求参数:num(笑话条数,数字) 响应内容:随机笑话
-
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg 请求方法:post 请求参数:username(用户名,字符串) 响应内容:注册成功或失败
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:随机笑话
*/
document.querySelector(".get").onclick = function () {
//假设获取2个笑话
axios.get("https://autumnfish.cn/api/joke/list?num=2")
// 错误的请求路径
// axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
.then(function (response) {
console.log(response);
},function(err){
// 如果请求路径错误,则请求失败,触发回调函数err
console.log(err);
})
}
/*
接口2:用户注册
*/
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
.then(function(response){
console.log(response);
console.log(this.skill);
},function (err) {
console.log(err);
})
}
</script>
学习教程:黑马程序员Vue.js前端基础教程。
我本身并不是专业的前端开发,我学习的目的是想简单地使用而已,所以并没有看得很深。所以各位想往前端方向的小伙伴还是要再仔仔细细地去学。
但是话又说回来,最好当然是往全栈工程师发展啊哈哈哈。
注:如有错误,敬请指正!