Vue基础
Vue简介
- JavaScript框架
- 简化Dom操作
- 响应式数据驱动
第一个Vue程序
- 导入开发版本的vue.js
- 创建Vue实例对象,设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"你好Vue!"
}
})
</script>
</body>
</html>
el:挂载点
el是用来设置Vue实例挂载(管理)的元素
- Vue会管理el选项命中的元素及其内部的后代元素(对外部元素无作用)
- 可以使用其他的选择器,但是建议使用ID选择器(因为具有唯一性)、
- 可以使用在其他的双标签(HTML和BODY除外)
data:数据对象
- Vue中用到的数据定义在data中
- data中可以设置复杂类型数据
- 渲染复杂数据类型时,遵守js的语法即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{love.beloved}}爱{{love.lover}}
<br>
<ul>
<li>{{followers[0]}}</li>
<li>{{followers[1]}}</li>
</ul>
</div>
<script src="Vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
love:{
lover:"陈先生",
beloved:"王某某"
},
followers:["余某","杨某某"]
}
})
</script>
</body>
</html>
Vue本地应用
v-text
- v-test指令的作用是:设置标签的内容(textContent)
- 默认写法会替换掉全部内容,使用插值表达式{{}}可以替换指定内容
- 内部支持表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-text="element"> Mother fuck!</h2>
<h2 v-text="info + '!'"> Mother fuck!</h2>
<h2>{{info + ". Oh,"}} Mother fuck!</h2>
</div>
<script src="Vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
element:"黑马程序员",
info:"What the hell"
}
})
</script>
</body>
</html>
v-html
- v-html指令的作用是:设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会被解析为文本
v-on
- v-on指令的作用是:为元素绑定事件
- 事件名不需写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this可以访问定义在data中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="ipp">
<input type="button" value="v-on指令" v-on:click="doIt">
<input type="button" value="v-on简写" v-on:click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
<h2 @click="changeFood">{{food}}</h2>
</div>
<script src="Vue.js"></script>
<script>
var app = new Vue({
el:"div",
data:{
food:"西兰花"
},
methods:{
doIt:function(){
alert("hello!");
},
changeFood:function(){
this.food = "西兰花好好吃!";
}
}
})
</script>
</body>
</html>
补充
- 事件绑定的办法写成函数调用的形式,可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上.修饰符可以对事件进行修饰
- .enter可以限制触发的案件为回车
- 事件修饰符有多种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="点击" v-on:click="doIt('老铁', 666)">
<input type="text" @keyup.enter="sayHi">{{element}}
</div>
<script src="Vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
element:" "
},
methods:{
doIt:function(p1, p2){
this.element += p1;
this.element += p2;
},
sayHi:function(){
alert("你好包包!");
}
}
})
</script>
</body>
</html>
v-show
- v-show指令的作用是:根据真假切换元素的显示状态
- 原理是修改元素的display,实现显示隐藏
- 指令后面的内容,最终都会解析为布尔值
- 值为true元素显示,false元素隐藏
- 数据改变之后,对应的显示状态会同步更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="changeIsShow">改变显示状态</button>
<button @click="addAge">增加年龄</button>
<img v-show="isShow" src="../拨云见日/img/2.png" alt="">
<img v-show="age>=18" src="../拨云见日/img/1.png" alt="">
</div>
<script src="Vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
age:"17",
isShow:"true"
},
methods:{
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
}
})
</script>
</body>
</html>
v-if
- v-if指令的作用是:根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来切换显示状态
- 表达式的值为true,元素存在于dom树中,为false则从dom书中移除
- 频繁的切换用v-show,反之使用v-if,前者的切换消耗小
v-bind
- v-bind指令的作用是:为元素绑定属性
- 完整的写法是v-bind:属性名
- 简写的话可以直接省略v-bind,只保留:属性名
- 需要动态的增删class建议使用对象的形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.xi{
border: 1ch black solid;
}
.red{
border: 1px red solid;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br>
<img :src="imgSrc" :title="imgTitle+'!!'">
<br>
<p class="xi">哇哈哈哈哈</p>
<p :class="{xi:isActive}" @click="changeIsActive">老天自有安排,点我改变安排!</p>
<p :class="isActive?'red':''" @click="changeIsActive">三元表达式!</p>
</div>
<script src="Vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"../拨云见日/img/2.png",
imgTitle:"我哈哈哈",
isActive:true
},
methods:{
changeIsActive:function(){
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
v-for
- v-for指令的作用是:根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是(item,index) in 数据
- item和index可以结合其他指令一起使用
- 数组长度的更新会同步到页面上,是响应式的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in data">{{item.score}}</li>
</ul>
<h2 v-for="(item, index) in arr">{{index+':'+item}}</h2>
<button @click="add">增加</button>
<button @click="remove">删除</button>
<button @click="pop">出栈</button>
</div>
<script src="Vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["陈彦亨","陈梓坤","陈梓豪","陈梓旭"],
data:[
{score:100},
{score:90},
{score:80},
{score:70},
]
},
methods:{
add:function(){
this.arr.push("帅");
},
remove:function(){
this.arr.shift();
},
pop:function(){
this.arr.pop();
}
}
})
</script>
</body>
</html>
v-model
- v-model指令的作用是便捷地设置和获取表单元素的值
- 绑定的数据回合表单元素的值相关联
- 绑定的数据<–>表单元素的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="setM">修改message</button>
<input type="text" @keyup.enter="putM" v-model="element">
<h2>{{element}}</h2>
</div>
<script src="Vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
element:"你好包包👶"
},
methods:{
setM:function(){
this.element = "你好!";
},
putM:function(){
alert(this.element);
}
}
})
</script>
</body>
</html>
Vue网络应用
axios基本使用
- axios必须先导入才可以使用
- 使用get和post方法即可发送对应的请求
- then方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取相应内容或错误信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="get">get请求</button>
<button class="post">post请求</button>
<script src="axios.js"></script>
<script>
document.querySelector(".get").onclick = function(){
axios.get("https://autumfish.cn/api/joke/list?num=6").then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
document.querySelector(".post").onclick = function(){
axios.post("https://autumfish.cn/api/user/reg",{username:陈彦亨}).then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
</script>
</body>
</html>
axios+vue
- axios回调函数中的this已经改变,无法访问到data中的数据
- 把this保存起来,回调函数中直接使用保存的this即可
- 和本地应用的最大区别就是改变了数据来源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="Vue.js"></script>
<script src="axios.js"></script>
<div id="app">
<button @click="getImg">点击BMI</button>
<br>
<p>{{text}}</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
text:""
},
methods:{
getImg:function(){
var that = this;
axios.get("http://api.apishop.net/common/BMI/computeBMI?apiKey=zxECsASce5fdbcaadcd2b5dd1ffabe49561568b8b148912&weight=50&height=170").then(function(response){
that.text = response.data.result["BMI"];
},function(err){
alert("返回失败!");
})
}
}
})
</script>
</body>
</html>