文章目录
一、Vue 基础
1、什么是 Vue?
JavaScript
框架- 简化
Dom
操作- 响应式数据驱动
2、第一个 Vue 程序
(1)引入 vue2:
<!-- 开发环境版本,包含了有帮助的命令行警告:新手友好 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
(2)编写第一个 Vue
创建 Vue 实例对象,设置 el 属性和 data 属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 基础</title>
</head>
<body>
<div id ="app">
{{ message }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
</body>
</html>
代码简要说明:
el:挂载点
:表示挂载页面中的元素{{ 属性 }}
:其中属性会被 data 中同名属性替换
el:挂载点注意事项:
el
作用?
- 用来设置
Vue
实例挂载(管理)的元素Vue
实例的作用范围?
- Vue 会管理 el 选项命中的元素以及其内部的后代元素
- 是否可以使用其他选择器?
- 可以使用其他选择器,但是建议使用
Id
选择器- 是否可以设置其他的
dom
元素?
- 可以使用其他双标签,不能使用
HTML
和BODY
data:数据对象注意事项:
Vue
中用到的数据定义在data
中- data 中可以写复杂类型的数据
- 渲染复杂类型数据时,遵守
js
的语法即可(如:对象.
的方式 /数组[索引]
的方式……)
二、Vue 本地应用
1、v-text
v-text 注意事项:
v-text
作用是设置标签的内容(textContent)- 默认的写法会替换全部的内容,使用差值表达式
{{}}
可以替换指定内容
<body>
<div id ="app">
<h2 v-text="message+'!'"> test </h2>
<h2 v-text="info+'!'"> test </h2>
<h2 > {{message + "!"}} test </h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello Vue",
info:"Hello World"
}
})
</script>
</body>
2、v-html
v-html 注意事项:
- v-html 指令的作用是设置元素的 innerHtml
- 内容中有 html 结构会被解析为标签
- v-text 指令无论内容是什么,只会解析为文本
<body>
<div id ="app">
<p v-text="content"></p>
<p v-html="content"></p>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href = 'https://www.baidu.com/'>百度搜索</a>"
}
})
</script>
</body>
3、v-on
v-on 注意事项:
- v-on: 可替换为 @
- v-on 作用是为元素绑定事件
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中的数据
<body>
<div id ="app">
<button @click="sub">➖</button>
<span>{{num}}</span>
<button @click="add">➕</button>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods: {
add:function() {
if (this.num < 10) {
this.num++;
} else {
alert("最大了!");
}
},
sub:function() {
if (this.num > 0) {
this.num--;
} else {
alert("最小啦!");
}
}
}
})
</script>
</body>
4、v-on 补充
v-on 注意事项:
- 事件绑定的方法可以传入自定义参数
- 定义方法时,需要定义形参来接收传入的实参
- 事件后面跟上 . 操作符可以对时间进行限制(如 .enter可以限制触发的按键为回车)
- v-on 文档传送门:https://cn.vuejs.org/v2/api/#v-on
<body>
<div id="app">
<input type="button" value="点击" @click="doSomething('老铁',666)" />
<input type="text" @keyup.enter="sayHello()" />
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
doSomething:function(p1,p2) {
console.log(p1);
console.log(p2);
},
sayHello:function(){
alert("Hello!!!");
}
}
})
</script>
</body>
5、v-show
v-show 注意事项:
- 根据表达式的真假,切换元素的显示和隐藏
- 原理是修改元素的display,实现显示隐藏
- 指令后面的内容,最终都会解析为布尔值
- 值为true元素显示,false元素隐藏
<body>
<div id ="app">
<button @click="IsShow">切换显示状态</button>
<button @click="addAge">增加年龄</button>
<img v-show="isShow" src="http://bd.xitong18.com/style/images/bd_logo1.png">
<img v-show="age>=18" src="http://bd.xitong18.com/style/images/bd_logo1.png">
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
age:17,
isShow:false
},
methods: {
IsShow:function() {
this.isShow = !this.isShow;
},
addAge:function() {
this.age++;
}
}
})
</script>
</body>
6、v-if
v-if 注意事项:
- 根据表达式的真假,切换元素的显示和隐藏(操纵 dom 元素)
- v-show 底层更改的是元素样式,v-if 底层操纵的是 dom 树。
- 频繁操纵的元素用 v-show,反之用 v-if,因为频繁的操纵dom树对性能消耗比较大。
<body>
<div id ="app">
<button @click="IsShow">切换显示状态</button>
<button @click="addAge">增加年龄</button>
<img v-if="isShow" src="http://bd.xitong18.com/style/images/bd_logo1.png">
<img v-if="age>=18" src="http://bd.xitong18.com/style/images/bd_logo1.png">
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
age:17,
isShow:false
},
methods: {
IsShow:function() {
this.isShow = !this.isShow;
},
addAge:function() {
this.age++;
}
}
})
</script>
</body>
7、v-bind
v-bind 注意事项
- v-bind 作用是设置元素的属性
- v-bind:属性名 可简写为 :属性名
- 需要动态的增删class建议使用对象的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind 指令</title>
<style>
.active{
border: 2px solid red;
}
</style>
</head>
<body>
<div id ="app">
<img v-bind:src="imgSrc">
<br>
<img :src="imgSrc" :title="imgTile + '!!!'"
:class="isActive?'active':''" @click="changeActive">
<br>
<img v-bind:src="imgSrc" :title="imgTile + '!!!'"
:class="{active:isActive}" @click="changeActive">
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"http://bd.xitong18.com/style/images/bd_logo1.png",
imgTile:"百度 Logo",
isActive:false
},
methods: {
changeActive:function() {
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
8、v-for
v-for 注意事项:
- 根据数据生成列表结构
- 数组经常和 v-for 结合使用
- 语法是 (item,index) in 数据,其中 item 是每个数据,index 表示索引
- 数组长度的更新会同步到页面上,是响应式的
<body>
<div id="app">
<button @click="add">增加动物</button>
<button @click="remove">减少动物</button>
<ul>
<li v-for="(item,index) in arr">
{{index+1}} 学生姓名:{{item}}.
</li>
</ul>
<h2 v-for="item in animal" :title="item.name">
动物名字: {{item.name}}
</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["张三","李四","王五","赵六"],
animal:[
{name:"老虎"},
{name:"大象"},
{name:"狮子"}
]
},
methods:{
add:function() {
this.animal.push({name:"大熊猫"});
},
remove:function() {
this.animal.shift();
}
}
})
</script>
</body>
9、v-model
v-model 注意事项:
- 获取和设置表单元素的值(双向数据绑定:修改两边任意一边的值,都会同步更新到另一边)
- 绑定的数据回合表单元素值相关联
<body>
<div id="app">
<input type="button" value="修改 message" @click="modefy" />
<input type="text" v-model="message" />
<h2>{{message}}</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"摸摸鱼大队长!"
},
methods:{
modefy:function() {
this.message = "不摸鱼的程序员";
}
}
})
</script>
</body>
三、Vue 生命周期
Vue 生命周期,指 Vue 对象从创建到销毁的整个过程。可以细分为如下八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)。
状态 | 阶段周期 |
---|---|
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 挂载前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
<!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>Vue-指令-v-for</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
},
methods: {
},
mounted () {
alert("vue挂载完成,发送请求到服务端")
}
})
</script>
</html>
四、Vue 网络应用
1、什么是 axios?
下面我将介绍一个非常流行的,且功能强大的网络请求库:axios。它的底层是基于 Ajax 的封装,因为功能单一,就是发送网络请求,所以容量很小,使用起来更加便捷,能非常方便的和其它框架或者库结合,比如 Vue。
2、axios 的基本使用
1、axios 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2、axios 在 Vue 中的基本使用
发送 get 请求:
axios({
method:"get",
url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
alert(resp.data);
})
发送 post 请求:
axios({
method:"post",
url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
data:"username=zhangsan"
}).then(function (resp){
alert(resp.data);
});
axios()是用来发送异步请求的,小括号中使用 js的JSON对象传递请求相关的参数:
- method属性:用来设置请求方式的。取值为 get 或者 post。
- url属性:用来书写请求的资源路径。如果是 get 请求,需要将请求参数拼接到路径的后面,格式为: url?参数名=参数值&参数名2=参数值2。
- data属性:作为请求体被发送的数据。也就是说如果是 post 请求的话,数据需要作为 data 属性的值。
then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数,意思是该匿名函数在发送请求时不会被调用,而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象,通过 resp.data 可以获取到响应的数据。
Axios还针对不同的请求,提供了别名方式的api:
方法 | 描述 |
---|---|
axios.get(url [, config]) | 发送get请求 |
axios.delete(url [, config]) | 发送delete请求 |
axios.post(url [, data[, config]]) | 发送post请求 |
axios.put(url [, data[, config]]) | 发送put请求 |
例:
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
console.log(result.data);
})
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
console.log(result.data);
})
axios 注意事项:
- axios 必须先导入才可以使用
- 使用 get 或 post 方法即可发送对应请求
- then 方法中的回调函数会在请求成功或请求失败时触发
- 通过回调函数的形参可以获取响应内容,或错误信息
- axios 学习文档:https://github.com/axios/axios
<!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>Ajax-Axios-案例</title>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>图像</th>
<th>性别</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
</tr>
<tr align="center" v-for="(emp,index) in emps">
<td>{{index + 1}}</td>
<td>{{emp.name}}</td>
<td>
<img :src="emp.image" width="70px" height="50px">
</td>
<td>
<span v-if="emp.gender == 1">男</span>
<span v-if="emp.gender == 2">女</span>
</td>
<td>{{emp.job}}</td>
<td>{{emp.entrydate}}</td>
<td>{{emp.updatetime}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
emps:[]
},
mounted () {
//发送异步请求,加载数据
axios.get("请求地址").then(result => {
console.log(result.data);
this.emps = result.data.data;
})
}
});
</script>
</html><body>
<div id="app">
<button @click="submit">点击访问</button>
<h2>接口响应:{{response}}</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
response:"还没有任何信息!"
},
methods:{
submit:function() {
axios.post("地址?key=value&key2=values").then(
function(response) {
this.response = response;
console.log(response);
}
)
}
}
})
</script>
</body>
小结
更多内容请移步:Vue 文档传送门