vue快速入门 笔记 +axios
程序员文章站
2022-06-06 19:13:07
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue学习</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
.active{
border: 1px solid red;
}
.tq{
width: 20%;
background:#eee;
margin-right: 5px;
}
</style>
</head>
<body>
<div id="app">
<h2>天知道</h2>
<input type="text" v-model="city" @keyup.enter="getweather">
<input type="button" value="搜索" @click="getweather1">
<div style="display: flex;justify-content: space-around;">
<div class="tq" v-for="(item,k) in weatherdata">
<span>{{item['date']}}</span>
<span>{{item.wea}}</span>
<span>{{item.win}}</span>
<span>{{item.win_speed}}</span>
</div>
</div>
<h2>axios</h2>
<input type="button" class="get" value="getaxios">
<input type="button" class="post" value="postaxios">
<h2>记事本</h2>
<input type="text" v-model="jishiben" @keyup.enter="addj">
<ul>
<li v-for="(jvalue,jkey) in jdata">
{{jkey+1}}记事本{{jvalue}}
<button @click="removejishiben(jkey)">删除</button>
</li>
</ul>
<h3 v-if="jdata.length != 0">数据条数{{jdata.length}}</h3>
<div v-show="jdata.length != 0" @click="clearj">清空</div>
<h2>v-model</h2>
<input type="button" value="修改message" @click="setm">
<input type="text" v-model="message">
{{message}}
<h2>v-for</h2>
<input type="button" value="添加数据" @click="adddata">
<input type="button" value="移除数据" @click="removedata">
<ul>
<li v-for="(it,index) in arr">
{{index}}for循环{{it}}
</li>
</ul>
<h3 v-for="item in vetables" v-bind:title="item.name">
{{item.name}}
</h3>
<h2>v-bind 操作class src title</h2>
<img v-bind:src="imagesrc" alt=""></br>
<img :src="imagesrc" alt="" :title="imagetitle+'!!!'" :class="isactive?'active':''" @click="toggleActive"></br>
<img :src="imagesrc" alt="" :title="imagetitle+'!!!'" :class="{active:isactive}" @click="toggleActive"></br>
<h2>v-if操作dom 频繁切换用show</h2>
<input type="button" value="切换if显示" @click="changif">
<img src="./tbs.jpg" v-show="ifshow" alt="">
<h2>v-show</h2>
<input type="button" value="切换显示状态" @click="changeshow">
<input type="button" value="累加" @click="addage">
<img src="./tbs.jpg" v-show="isshow" alt="">
<img src="./tbs.jpg" v-show="age>=18" alt="">
<h2>计数器</h2>
<div>
<button @click="sub">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
<h2>v-on</h2>
<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 @click="changefood">{{food}}</div>
<input type="text" @keyup.enter="sayui">
<h2>v-html</h2>
<div v-html="content"></div>
<div v-text="content"></div>
<h2>v-text</h2>
<div v-text="message + '!'"></div>
<div v-text="info"></div>
<div>{{info + '!'}}</div>
<h2>4个小时带你快速入门vue之第6课之前</h2>
{{ message }} </br>
{{ duixiang.name }}</br>
{{ duixiang }} </br>
{{ shuzu }} </br>
{{ shuzu[2] }} </br>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello1 祥云小镇!',
info: '详细信息',
content: "<a href='http://baidu.com'>百度一下</a>",
duixiang: {
"name":"任达华",
"age":99,
},
shuzu:["范冰冰","李冰冰","赵冰冰"],
food :"油麦菜",
num :0,
isshow :true,
age :9,
ifshow :true,
imagesrc :'./tbs.jpg',
isactive :false,
imagetitle :'土拨鼠',
arr:["东城区","北城区","西城区","南城区"],
vetables:[
{"name":"番茄炒蛋"},
{"name":"番茄d炒蛋"},
],
jdata:["记事本1","记事本2","记事本3"],
jishiben :"来啊，快活呀",
weatherdata:[],
city:"北京",
},
methods:{
doit:function(){
alert("做v-on")
},
changefood:function(){
this.food += "真好吃"
},
sub:function(){
if(this.num>0){
this.num--
}else{
alert("近距离圣诞节")
}
},
add : function(){
if (this.num>=10){
alert("憋着")
}else{
this.num++
}
},
changeshow : function(){
this.isshow = !this.isshow
},
addage : function(){
this.age++
},
changif : function(){
this.ifshow = !this.ifshow
},
toggleActive:function(){
this.isactive = !this.isactive
},
adddata : function(){
this.vetables.push({"name":"了解了解"})
},
removedata :function(){
this.vetables.shift()
},
sayui :function(){
alert("大V深V")
},
setm : function(){
this.message="哒哒哒哒哒"
},
addj:function(){
this.jdata.push(this.jishiben)
},
removejishiben:function(index){
this.jdata.splice(index,1)
},
clearj:function(){
this.jdata=[]
},
getweather:function(){
var that =this;
axios.get('https://www.tianqiapi.com/free/week?appid=25555884&appsecret=B8lHZDxq', {
params: {
city: that.city
}
})
.catch(function (error) {
console.log(error);
})
.then(function (r) {
// always executed
that.weatherdata = r.data.data
console.log(r.data.data);
});
},
getweather1:function(){
var that =this;
axios.get('https://www.tianqiapi.com/free/week?appid=25555884&appsecret=B8lHZDxq', {
params: {
city: that.city
}
})
.catch(function (error) {
console.log(error);
})
.then(function (r) {
// always executed
that.weatherdata = r.data.data
console.log(r.data.data);
});
},
}
})
</script>
<script>
document.querySelector('.get').onclick=function(){
axios.get('https://www.tianqiapi.com/free/week?appid=25555884&appsecret=B8lHZDxq', {
params: {
ID: 12345
}
})
.catch(function (error) {
console.log(error);
})
.then(function (r) {
// always executed
console.log(r)
});
}
document.querySelector('.post').onclick=function(){
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
</script>
</body>
</html>
上一篇： Vue快速入门笔记
下一篇： 同步集合类 -笔记整理13