文章目录[隐藏]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-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@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"郭安你好"
}
})
</script>
</body>
</html>el是挂载点。
一般建议id，因为id唯一，class和div多个。
只支持挂载双标签。
body不支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<body>
<div id="app">
{{ message }}
<h2>
{{school.name}}
{{school.mobile}}
</h2>
<ul>
<li>{{arr[0]}}</li>
<li>{{arr[1]}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"郭安你好",
school:{
name:"郭安",
mobile:"13669320521"
},
arr:["北京","上海","南京","天津"]
}
})
</script>
</body>
</html>
v-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<body>
<div id="app">
<h2 v-text="message+'!'"></h2>
<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:"郭安你好"
}
})
</script>
</body>
</html>v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<body>
<div id="app">
<p v-html='content'></p>
<p v-text='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://an.xiaoan.xyz'>郭安的小站</a>"
}
})
</script>
</body>
</html>
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<body>
<div id="app">
<input type="button" value="按我！" v-on:click="doit">
<input type="button" value="别按我！" @click="doit">
<input type="button" value="按两下试一试" @dbclick="doit">
<h2 @click="changeget">{{youxi}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
youxi:"GTA5"
},
methods: {
doit:function(){
alert("嘿！干嘛呢！");
},
changeget:function(){
// console.log(this.youxi);
this.youxi+="好好玩！"
}
}
})
</script>
</body>
</html>
一个简单的计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<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: {
sub:function(){
if(this.num>0)
{
this.num--;
}
else{
alert("别点啦！！！");
}
},
add:function(){
if(this.num<10)
{
this.num++;
}
else{
alert("别点啦！！最大啦！");
}
}
},
})
</script>
</body>
</html>
v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<body>
<div id="app">
<!-- <input type="button" value="切换状态！" @click="changepic"> -->
<input type="button" value="年龄++" @click="addage">
<img v-show="age>18" src="http://120.26.162.71/img/wallhaven/4902.jpg" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:true,
age:17
},
methods:{
changepic:function(){
this.isShow = !this.isShow;
},
addage:function(){
this.age ++;
}
}
})
</script>
</body>
</html>
v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示" @click="changeshow">
<p v-if="isShow">时间是珍贵的</p>
<p v-show="isShow">时间是珍贵的</p>
<p v-if="temp>35">遗憾是常有的</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:true,
temp:20
},
methods:{
changeshow:function(){
this.isShow=!this.isShow;
}
}
})
</script>
</body>
</html>
v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="" :title="title+'!!!'"
:class="isActive?'active':''" @click="changeactive">
<br>
<img :src="imgSrc" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"http://120.26.162.71/img/wallhaven/4993.jpg",
title:"郭安",
isActive:false
},
methods:{
changeactive:function(){
this.isActive=!this.isActive;
}
}
})
</script>
</body>
</html>
图片切换案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
<style>
.div1 {
width:1900px;
height:980px;
border:1px solid black;
display: table-cell;
vertical-align: middle;
}
.div1 img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
/* .div {
background-size: contain;
} */
/* div {
height: 400px;
width: 500px;
border: 1px solid black;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.div1 {
background-image: url(./peiqi1.png);
}
.div2 {
background-image: url(./peiqi2.png);
}
.div3 {
background-image: url(./peiqi4.jpeg);
} */
</style>
</head>
<body>
<div id="app" class="div1">
<!-- <input type="button" value="按我" @click = "gotoNextPic"> -->
<!-- <h2>{{num}}</h2> -->
<img :src="imageSRC+this.num+'.jpg'" alt="" @click = "gotoNextPic">
<br>
<!-- <img :src="imgSrc" alt=""> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imageSRC:"http://120.26.162.71/img/wallhaven/",
num:1
},
methods:{
gotoNextPic:function(){
this.num++;
}
}
})
</script>
</body>
</html>//升级随机图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
<style>
.div1 {
width:1900px;
height:960px;
border:5px solid skyblue;
display: table-cell;
vertical-align: middle;
}
.div1 img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
/* .div {
background-size: contain;
} */
/* div {
height: 400px;
width: 500px;
border: 1px solid black;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.div1 {
background-image: url(./peiqi1.png);
}
.div2 {
background-image: url(./peiqi2.png);
}
.div3 {
background-image: url(./peiqi4.jpeg);
} */
</style>
</head>
<body>
<div id="app" class="div1">
<!-- <input type="button" value="按我" @click = "gotoNextPic"> -->
<!-- <h2>{{num}}</h2> -->
<img :src="imageSRC+this.num+'.jpg'" alt="" @click = "gotoNextPic">
<br>
<!-- <img :src="imgSrc" alt=""> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imageSRC:"http://120.26.162.71/img/wallhaven/",
num:1
},
methods:{
gotoNextPic:function(){
this.num=Math.ceil(Math.random()*6306);
}
}
})
</script>
</body>
</html>//此段代码可作为大创项目使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
<style>
.div1 {
width:1920px;
height:1000px;
border:10px solid skyblue;
display: table-cell;
vertical-align: middle;
}
.div1 img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
}
/* .div {
background-size: contain;
} */
/* div {
height: 400px;
width: 500px;
border: 1px solid black;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.div1 {
background-image: url(./peiqi1.png);
}
.div2 {
background-image: url(./peiqi2.png);
}
.div3 {
background-image: url(./peiqi4.jpeg);
} */
</style>
</head>
<body>
<div id="app" class="div1">
<!-- <input type="button" value="按我" @click = "gotoNextPic"> -->
<!-- <h2>{{num}}</h2> -->
<img :src="imageSRC+this.num+'.jpg'" alt="" @click = "gotoNextPic">
<br>
<!-- <img :src="imgSrc" alt=""> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imageSRC:"http://120.26.162.71/img/wallhaven/",
num:Math.ceil(Math.random()*6306)
// return{
// timer:null, //定时器名称
// }
},
methods:{
gotoNextPic:function(){
this.num=Math.ceil(Math.random()*6306);
},
}
})
</script>
</body>
</html>v-for 指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<body>
<div id="app">
<input type="button" value="添加" @click = "add">
<input type="button" value="移除" @click = "remove">
<ul>
<li v-for="(item,index) in arr">
{{index+1}}.想去的方向:{{ item }}
</li>
</ul>
<h2 v-for="item2 in food" v-bind:title="item2.name">{{item2.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:["北京","南京","深圳"],
food:[
{name:"苹果"},
{name:"鸭梨"}
]
},
methods:{
add:function(){
this.food.push({name:"橘子"});
},
remove:function(){
this.food.shift();
}
}
})
</script>
</body>
</html>
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="doit(666,'郭安')">
<!-- <input type="text" @keyup="sayhi"> -->
<input type="text" @keyup.enter="sayhi">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
doit:function(p1,p2){
console.log("哈哈哈");
console.log(p1);
console.log(p2);
},
sayhi:function(){
alert("想你了");
}
}
})
</script>
</body>
</html>
v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"郭安"
},
methods:{
getM:function(){
alert(this.message);
},
setM:function(){
this.message = "LYY";
}
}
})
</script>
</body>
</html>
一个记事本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<body>
<section id="todoapp">
<header>
<h1>小安记事本</h1>
<input v-model="inputvalue" @keyup.enter="add" autofocus="autofocus" aria-autocomplete="off" placeholder="请输入任务"/>
</header>
<section>
<ul>
<li v-for="(item,index) in list">
<div>
<span>{{index +1}}.</span>
<label>{{item}}</label>
<!-- <button @click="remove(index)"></button> -->
<input type="button" value="删除" @click="remove(index)">
</div>
</li>
</ul>
</section>
<footer>
<span v-if="list.length!=0"><strong>{{list.length}}</strong>
list num</span>
<input v-show="list.length!=0" type="button" value="清空" @click="clear">
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#todoapp",
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>vue网络应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<script src="./axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
document.querySelector(".get").onclick = function(){
axios.get("https://api.uixsj.cn/hitokoto/get?type=hitokoto&code=json")
.then(function(response){
console.log(response);
},function(error){
console.log(err);
})
}
document.querySelector(".post").onclick = function(){
axios.post("https://autumnfish.cn/api/user/reg",
{
username:"jack"
}).then(function(response){
console.log(response);
})
}
</script>
</body>
</html>
axios+vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<div id="app">
<input type="button" value="一言" @click="getone">
<p>{{one}}</p>
</div>
<body>
<script src="./axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app",
data:{
one:"一言"
},
methods:{
getone:function(){
var that = this;
axios.get("https://api.uixsj.cn/hitokoto/get")
.then(function(response){
console.log(response.data)
that.one = response.data;
},function(err){
})
}
}
})
</script>
</body>
</html>一个网络应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<div id="app">
<input type="text" v-model="city" @keyup.enter="serchWeather">
<ul>
<li v-for="item in weather">{{item.date}}<b>,{{item.high}}</b><b>{{item.low}}</b></li>
</ul>
<a href="javascript:;" @click="changeCity('南京')">南京</a>
</div>
<body>
<script src="./axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>// 天气查询接口：https://restapi.amap.com/v3/weather/weatherInfo?parameters
// 请求方式：key
// https://lbs.amap.com/api/webservice/guide/api/weatherinfo
//http://wthrcdn.etouch.cn/weather_mini?city=%E6%AD%A6%E6%B1%89
var app = new Vue({
el:"#app",
data:{
city:"输入你要查询的城市",
weather:[]
},
methods:{
serchWeather:function(){
// console.log('天气查询');
// console.log(this.city);
//保存this
var that = this;
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+
this.city)
.then(function(response){
// console.log(response);
// console.log(response.data.data.forecast);
that.weather = response.data.data.forecast;
})
.catch(function(err){})
},
changeCity:function(city){
this.city =city;
this.serchWeather();
}
}
})综合应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue学习</title>
</head>
<div id="app">
<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic">
<ul>
<li v-for="item in music"><b>
{{item.name}}
</b><b>
{{item.id}}
</b><a href="javascript:;" @click="playmusic(item.id)">播放
<dl v-for="item in Comment">
<!-- <img :src="item.user.avatarUrl"> -->
{{item.content}}
</dl>
</a></li>
</ul>
</div>
<body>
<script src="./axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
query:" ",
music:[],
musicurl:"",
musicCover:"",
Comment:[]
},
methods:{
searchMusic:function(){
var that = this;
axios.get("https://autumnfish.cn/search?keywords="+this.query)
.then(function(response){
// console.log(response);
that.music = response.data.result.songs;
},function(err){
})
},
playmusic:function(musicID){
var that = this;
// console.log(musicID);
axios.get("https://autumnfish.cn/song/url?id="+musicID)
.then(function(response){
// console.log(response);
// console.log(response.data.data.url)
that.musicurl = response.data.data.url;
},function(err) {
})
axios.get("https://autumnfish.cn/song/detail?ids=544232124")
.then(function(response){
console.log(response);
},function(err){})
axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicID)
.then(function(response){
console.log(response.data.hotComments);
that.Comment = response.data.hotComments;
},function(err){})
},
}
})
</script>
</body>
</html>
叨叨几句... NOTHING