一、vue简介
- 是一种js框架
- 简化DOM操作
- 响应式数据驱动
二、vue入门
1.第一个vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个实例</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"asdhello!"
}
})
</script>
</body>
</html>
id选择器的方法,message和vue实例进行绑定。
2.el挂载点
el的作用:是用来设置vue实例挂载管理的元素。
一般使用id选择器的方法进行绑定,类选择器和标签选择器的方命中会造成语义不清。
标签绑定实例,只能是关闭型标签才行,非关闭型便签就不可以,一般是挂载到div标签上。
vue实例的作用范围是什么呢?
vue会管理el选项名中元素及其内部的后代元素。
是否可以使用其他是选择器?
可以使用其他的选择器,但是建议使用id选择器。
是否可以设置其他的dom元素呢?
可以使用其他的双标签,不能使用html和body,建议div。
3.data数据对象
- vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时,遵守js的语法即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个实例</title>
</head>
<body>
<div id="app">
{{ message }}
<h2>{{school.name}}{{school.mobile}}</h2>
<ul>
<li>{{campus[0]}}</li>
<li>{{campus[1]}}</li>
<li>{{campus[2]}}</li>
<li>{{campus[3]}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"你好,小黑!!",
school:{
name:"黑马程序员",
mobile:400-618-9990
},
campus:["北京校区","上海校区","广州校区","深圳校区"]
}
})
</script>
</body>
</html>
三.本地应用
- 通过vue实现常见的网页效果。
- 学习vue指令,以案例巩固知识点。
- vue指令指的是以v-开头的一组特殊语法。
1.v-text指令
设置标签的文本值(textContent)
- 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
- 内部支持写表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个实例</title>
</head>
<body>
<div id="app">
<h2 v-text="message">深圳<h2>
<h2>深圳{{message}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"asdhello!"
}
})
</script>
</body>
</html>
2.v-html指令
- 设置标签的innerHTML。
- 内容中有html结构会被解析为标签。
- v-text指令无论内容是什么,只会解析为文本。
- 解析文本使用v-text,需要解析html结构使用v-html。
和v-text指令不同的是,v-html可以识别html语言,而v-text把html语言当成了普通文本来处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个实例</title>
</head>
<body>
<div id="app">
<p v-text='content'></p>
<p v-html='content'></p>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
content:"<a href='http:/www.itheima.com'>黑马程序员!</a>"
}
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SGiANoNP-1608016665000)(C:\Users\jiangdada\AppData\Roaming\Typora\typora-user-images\1594029017433.png)]
3.v-on指令
- 为元素绑定事件。
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据。
<div id="app">
<!--点击事件-->
<input type="button" value="事件绑定" v-on:click="dolt">
<!--鼠标滑过-->
<input type="button" value="事件绑定" v-on:monseenter="dolt">
<!--双击击事件-->
<input type="button" value="事件绑定" v-on:dblclick="dolt">
<!--vue中支持将v-on转换成@来表示-->
<input type="button" value="事件绑定" @click="dolt">
</div>
<script>
var app=new Vue({
el:"#app",
data:{
},
methods:{
doft:function(){
//逻辑
}
}
})
</script>
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个实例</title>
</head>
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIT">
<input type="button" value="v-on简写" @click="doIT">
<input type="button" value="v-on双击" @dblclick="doIT">
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
methods:{
doIT:function(){
alert("做IT");
}
}
})
</script>
</body>
</html>
4.计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器</title>
</head>
<body>
<div id="app">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
<script src="./js/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>
</html>
5.v-show指令
- 根据表达式的真假,切换元素的显示和隐藏。
- 原理是修改元素的display,实现显示隐藏。
- 指令后面的内容,最终都会解析为布尔值。
- 值为true元素显示,值为false元素隐藏。
- 数据改变之后,对应元素的显示状态会同步更新。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-show指令</title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<div v-show="isShow">saodjasoid</div>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:false,
},
methods:{
changeIsShow:function(){
this.isShow=!this.isShow;
}
}
})
</script>
</body>
</html>
6.v-if指令
- 根据表示值的真假,切换元素的显示和隐藏(操纵dom元素)
- 本质是操纵dom元素来切换显示状态。
- 表达式的值为true,元素存在于dom树中,为false,从dom树中移除。
- 频繁的切换v-show,反之使用v-if,前者的切换消耗小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if指令</title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示状态" @click=" toggleIsShow">
<p v-if="isShow">黑马程序员</p>
<p v-show="isShow">黑马程序员 v-show!</p>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:false,
},
methods:{
toggleIsShow:function(){
this.isShow=!this.isShow;
}
}
})
</script>
</body>
</html>
注:与v-show不一样的是,v-if是操作的dom,而v-show是操作的样式。
7.v-bind指令
- 设置元素的属性比如src,titile,class
- 需要动态的增删class建议使用对象的方式。
写法:
v-bind:src="imgsrc"
可以简写为:
:src=""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-show指令</title>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<br>
<img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
<br>
<img :src="imgSrc" alt="" :class="{active:isActive}" @click="toggleActive">
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
imgSrc:"http://www.itheima.com/images/logo.png",
isActive:true,
},
methods:{
toggleActive:function(){
this.isActive=!this.isActive;
console.log("点击事件被触发")
}
},
})
</script>
</body>
</html>
</html>
可以使用三元表达式的写法,同时还可以使用对象的写法,如
<!--对三元表达式写法的时候要记得给css样式加上单引号-->
<img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
<br>
<!--对象的写法,css样式的显示取决于冒号后面对象的真假-->
<img :src="imgSrc" alt="" :class="{active:isActive}" @click="toggleActive">
8.v-for指令
- 根据数据生成列表结构。
- 数组经常和v-for结合使用。
- 语法是(item,index) in 数组 item和index只要符合命名规则是可以更改的
- item和index可以结合其他指令一起使用。
- 数组长度的更新会同步到页面上,是响应式的。
item 对应数组每一个元素值,index对应数组的下标值。变量可以换其他表示,遵循命名规则即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for指令</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr">{{index+1}}黑马程序员校区:{{item}}</li>
</ul>
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(item,index) in vegetables" :title="item.name">
{{index}}{{item.name}}
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
arr:["北京","上海","广州"],
vegetables:[
{name:"西兰花炒蛋"},
{name:"蛋炒西兰花"}
],
},
methods:{
add:function(){
//push方法将元素追加到数组是尾部
this.vegetables.push({name:"花菜炒蛋"})
},
remove:function(){
//shift方法删除数组第一个元素
this.vegetables.shift();
}
}
})
</script>
</body>
</html>
9.v-on补充
传递自定义参数,事件修饰符。
- 事件的后面跟上.修饰符,可以对事件进行限制。
- .enter可以限制触发的按键为回车
- 事件修饰符有多种。
- 键盘按下事件:keydown() 是在键盘按下就会触发
键盘弹起事件:keyup() 是在键盘松手就会触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on补充</title>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="doIt(6666,'老铁')">
<input type="text" @keyup.enter="sayhi">
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
},
methods:{
doIt:function(p1,p2){
console.log("do it!!!!")
console.log(p1,p2)
},
sayhi:function(){
alert("吃了没!")
}
}
})
</script>
</body>
</html>
10.v-model指令
- 获取和设置表单元素的值(双向数据绑定)。
- 绑定的数据会和表单元素值相关联。
- 绑定的数据等价于表单元素的值,双向绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个实例</title>
</head>
<body>
<div id="app">
<input type="button" value="修改" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{message}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"黑马程序员"
},
methods:{
getM:function(){
alert(this.message);
},
setM:function(){
this.message="酷丁鱼";
}
}
})
</script>
</body>
</html>
11应用-记事本
功能:新增、删除、统计、清空、隐藏
1.新增
- 生成列表结构 v-for 数组
- 获取用户输入 v-model
- 回车新增数据 @keyup.enter push
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记事本</title>
</head>
<body>
<div id="todoapp">
<input type="text" v-model="inputValue" @keyup.enter="add">
<ul>
<li v-for="(item,index) in list"> {{index+1}}{{item}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#todoapp",
data:{
list:["写代码","吃饭饭","睡觉觉"],
inputValue:"好好学习,天天向上!",
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
}
})
</script>
</body>
</html>
2.删除功能
- 删除指定内容 v-on splice
- 数据改变,和数据绑定的元素同步改变
- 事件的自定义参数
- splice方法的作用,第一个参数为删除的索引值,第二个参数为删除的个数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记事本</title>
</head>
<body>
<div id="todoapp">
<input type="text" v-model="inputValue"
placeholder="请输入任务...." @keyup.enter="add">
<ul>
<li v-for="(item,index) in list"> {{index+1}}{{item}}
<button @click="remove(index)">x</button>
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#todoapp",
data:{
list:["写代码","吃饭饭","睡觉觉"],
inputValue:"好好学习,天天向上!",
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
console.log("remove",index)
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
3.统计功能
- 统计信息个数,v-text,length
<div>统计功能:{{list.length}}</div>
- 基于数据的开发方式
- v-text指令的作用
4.清空功能
- 点击清除所有信息 v-on
clear:function(){
this.list=[];
}
实质上是对数组的清空!
5.隐藏功能
- 没有数据时,隐藏元素。v-show ,v-if,数组非空
<div V-if="list.length!=0">
<div>统计功能:{{list.length}}</div>
<input type="button" value="清空" @click="clear">
<div>
四、网络应用
网络请求库 axios结合vue。
1.axios+vue
https://autumnfish.cn/api/joke 随机笑话接口
- axios回调 函数中的this已经改变,无法访问到data中数据。
- 把this保存起来,回调函数中直接使用保存的this即可
- 和本地应用最大的区别就是改变了数据来源。
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{joke}}</p>
</div>
<script src="./node_modules/axios/dist/axios.js"></script>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods:{
getJoke:function(){
var that=this;
axios.get("https://autumnfish.cn/api/joke").then
(function(response){
console.log(response)
console.log(response.data)
that.joke=response.data;
},function(err){
console.log(err)
})
}
}
})
</script>
2.天知道-应用
- 按下会回车 v-on enter
- 查询数据 axios接口 v-model
- 渲染数据
<body>
<div id="app">
<input type="text" v-model="city" @keyup.enter="searchWeather">
<ul>
<li v-for="item in weatherList">{{item.date}}{{item.type}}</li>
</ul>
</div>
<script src="./node_modules/axios/dist/axios.js"></script>
<script src="./js/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
city:'',
weatherList:[],
},
methods:{
searchWeather:function(){
var that=this;
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
.then(function(response){
console.log(response.data);
that.weatherList=response.data.data.forecast;
console.log(that.weatherList);
}).catch(function(err){})
}
}
})
</script>
</body>