目录
一、安装Vue.js
-
直接用
-
npm方法
npm install vue
二、el与data
el:相当于css中的选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
{{message}}
<h2>{{school.name}}{{school.tel}}</h2>
<ul>
<li>{{campus[0]}}</li>
<li>{{campus[1]}}</li>
<li>{{campus[2]}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#i1",
data: {
message:"hello vue!",
school:{
name:"XXXX中学",
tel:"167-235-4090"
},
campus:["北京校区","湖南校区","上海校区"]
}
});
</script>
</body>
</html>
结果图展示：
三、指令
1.指令是带有 v- 前缀的特殊属性。
3.1 v-text
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
<!-- 注意这三个在结果那里的变化 -->
<h2 v-text="message">北京</h2>
<h2 v-text="info+'!'">北京</h2>
<h2>{{message+"!"}}北京</h2>
<!--使用v-clock能够解决插值表达式闪烁的问题，默认v-text是没有闪烁问题的-->
<p v-clock>{{message}}</p>
</div>
<script>
var vm=new Vue({
el:"#i1",
data: {
message:"hello vue!",
info:"vue基础语法学习"
}
});
</script>
</body>
</html>
结果图展示：
3.2 v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-html</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
<h2 v-html="content"></h2>
<h2 v-text="content"></h2>
<h2 v-html="info"></h2>
<h2 v-text="info"></h2>
</div>
<script>
var vm=new Vue({
el:"#i1",
data: {
content:"加油，坚持学习",
info:"<a href='#'>你好</a>"
}
});
</script>
</body>
</html>
结果图展示：
3.3 v-on指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-on</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
<input type="button" value="v-on指令" v-on:click="clickIt">
<input type="button" value="v-on简写" @click="clickIt">
<input type="button" value="双击事件" @dblclick="clickIt">
<h2 @click="changeFood">{{food}}</h2>
</div>
<script>
var vm=new Vue({
el:"#i1",
data:{
food:"西红柿炒蛋"
},
methods:{
clickIt:function(){
alert("你好");
},
changeFood:function(){
//console.log(this.food);
this.food+="很好吃!"
}
}
});
</script>
</body>
</html>
结果图展示：
3.4 应用：实现一个计数器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计数器</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
<!-- 计数器功能区域 -->
<div class="input-num">
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
</div>
<script>
var vm=new Vue({
el:"#i1",
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>
结果图展示：
3.5 v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-show</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
<input type="button" value="显示切换状态" @click="changeIsShow">
<img v-show="isShow" src="2.png">
</div>
<script>
var vm=new Vue({
el:"#i1",
data:{
isShow:"true"
},
methods:{
changeIsShow:function(){
this.isShow=!this.isShow
}
}
});
</script>
</body>
</html>
结果图展示：
3.6 v-if
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-if</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
<p v-if="isShow">你好，我是小言</p>
<p v-show="isShow">谢谢你看这篇文章，希望对你有帮助</p>
<input type="button" value="切换显示" @click="toggleIsShow">
<h2 v-if="temperature>=35">热死了</h2>
</div>
<script>
var vm=new Vue({
el:"#i1",
data:{
isShow:"true",
temperature:40
},
methods:{
toggleIsShow:function(){
this.isShow=!this.isShow
}
}
});
</script>
</body>
</html>
结果图展示：
3.7 v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
<style>
.active{
border:1px solid black;
}
</style>
</head>
<body>
<div id="i1">
<img v-bind:src="imgSrc">
<br>
<img :src="imgSrc" :title="imgTitle"
:class="isActive?'active':''" @click="toggleActive">
<br>
<img :src="imgSrc" :title="imgTitle"
:class="{active:isActive}" @click="toggleActive">
</div>
<script>
var vm=new Vue({
el:"#i1",
data:{
imgSrc:"2.png",
imgTitle:"图片",
isActive:false
},
methods:{
toggleActive:function(){
this.isActive=!this.isActive
}
}
});
</script>
</body>
</html>
3.8 应用：图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
<input type="button" value="<" @click="prev" v-show="index!=0">
<img :src="imgArr[index]">
<input type="button" value=">" @click="next" v-show="index<imgArr.length-1">
</div>
<script>
var vm=new Vue({
el:"#i1",
data:{
imgArr:[
"imges/2.png",
"imges/3.png",
"imges/4.png",
"imges/5.png",
"imges/6.png",
"imges/7.png",
],
index:0
},
methods:{
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
}
});
</script>
</body>
</html>
结果图展示：
3.9 v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
<ul>
<li v-for="item in arr">
地方：{{item}}
</li>
</ul>
<hr>
<ul>
<li v-for="(item,index) in arr">
地方{{index+1}}：{{item}}
</li>
</ul>
<h2 v-for="item in fruit" v-bind:title="item.name">
{{item.name}}
</h2>
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
</div>
<script>
var vm=new Vue({
el:"#i1",
data:{
arr:["北京","上海","辽宁","湖南","长沙"],
fruit:[
{name:"橘子"},
{name:"苹果"},
{name:"哈密瓜"}
]
},
methods:{
add:function(){
this.fruit.push({name:"香蕉"})
},
remove:function(){
this.fruit.shift();
}
}
});
</script>
</body>
</html>
结果图展示：
3.10 v-on补充
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-on2</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
<input type="button" value="点击" @click="write(666)">
<input type="text" @keyup.enter="sayHi">
</div>
<script>
var vm=new Vue({
el:"#i1",
data:{
},
methods:{
write:function(p1){
console.log(p1);
},
sayHi:function(){
alert("吃了没")
}
}
});
</script>
</body>
</html>
结果图展示：
3.11 v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-model</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
<input type="button" value="修改message" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{message}}</h2>
</div>
<script>
var vm=new Vue({
el:"#i1",
data:{
message:"小言同学"
},
methods:{
getM:function(){
alert(this.message);
},
setM:function(){
this.message="你好呀!!!"
}
}
});
</script>
</body>
</html>
结果图展示：
3.12 应用：简易记事本（无css修饰）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>textbook</title>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
<input type="text" v-model="inputValue" @keyup.enter="add">
<!-- 列表区域 -->
<ul>
<li v-for="(item,index) in list">
<div>
<span>{{index+1}}</span>
<label>{{item}}</label>
<button @click="remove(index)">删除</button>
</div>
</li>
</ul>
<p v-if="list.length!=0"><strong>{{list.length}}</strong> 条记录</p>
<p v-show="list.length!=0"><button @click="clear">清空</button></p>
</div>
<script>
var vm=new Vue({
el:"#i1",
data:{
list:["写作业","看电视","睡觉","打游戏"],
inputValue:"好好学习，天天向上"
},
methods:{
add:function(){
this.list.push(this.inputValue);
},
remove:function(index){
this.list.splice(index,1);
},
clear:function(){
this.list=[];
}
}
});
</script>
</body>
</html>
结果图展示：
四、axios
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>axios</title>
<!-- 官网提供的axios在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<script>
/*
接口1：随机笑话
请求地址：https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num(笑话条数，数字)
响应内容：随机笑话
*/
document.querySelector(".get").onclick=function(){
axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
/*
接口2：用户注册
请求地址：https://autumnfish.cn/api/user/reg
请求方式：post
请求参数：username(用户名，字符串)
响应内容：注册成功或失败
*/
document.querySelector(".post").onclick=function(){
axios.post("https://autumnfish.cn/api/user/reg",{username:"小言1"}).then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
</script>
</body>
</html>
结果图展示：
五、axios+vue
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>axios+vue</title>
<!-- 官网提供的axios在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div id="i1">
<input type="button" value="获取笑话" @click="getJoke">
<p>{{joke}}</p>
</div>
<script>
/*
接口1：随机获取一条笑话
请求地址：https://autumnfish.cn/api/joke
请求方法：get
请求参数：无
响应内容：随机笑话
*/
var vm=new Vue({
el:"#i1",
data:{
joke:"笑话"
},
methods:{
getJoke:function(){
var that=this;
axios.get("https://autumnfish.cn/api/joke").then(
function(response){
that.joke=response.data;
//console.log(response.data);
},
function(err){}
)
}
}
})
</script>
</body>
</html>
结果图展示：
六、应用：天气查询
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天知道</title>
<!-- 官网提供的axios在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入vue.js -->
<script type="text/javascript" src="vue.min.js"></script>
</head>
<body>
<div>
<h2>天气查询</h2>
<div id="i1">
<input type="text" @keyup.enter="searchWeather" v-model="city">
<input type="button" value="查询" @click="searchWeather">
<p>
<a @click="changeCity('北京')">北京</a>
<a @click="changeCity('上海')">上海</a>
<a @click="changeCity('广州')">广州</a>
<a @click="changeCity('深圳')">深圳</a>
</p>
<ul>
<li v-for="item in weatherList">
<span>{{item.type}}</span>
<span>{{item.low}}</span>
<span>{{item.high}}</span>
<span>{{item.date}}</span>
</li>
</ul>
</div>
</div>
<!-- 引入main.js -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
main.js 代码：
/**
* 请求地址：http://wthrcdn.etouch.cn/weather_mini
请求方法：get
请求参数：city(城市名)
响应内容：天气信息
1.点击回车
2.查询数据
3.渲染数据
*/
var vm=new Vue({
el:"#i1",
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.data.forecast);
that.weatherList=response.data.data.forecast
}
).catch(function(err){})
},
changeCity:function(city){
this.city=city;
this.searchWeather();
}
}
})
结果图展示：
