- axios请求数据：是一种promise形式的请求，具体形式如下：
axios.get(url,
{
params: {}
}).then((res) => {
console.log(res)
})
-
vue的生命周期：beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, 都是钩子函数，当需要它的时候在里面调用，相关信息可以在Vue官网查看
-
方法统一放在methods中，变量统一放在data中。如果有一个变量是其他变量通过某种形式得到的，不建议在html页面中表现，建议作为方法写在computed中。watch是监听的作用，可以监听某个值发生变化时执行何种命令。
computed: {
total(){
return this.count*this.price
}
},
methods: {
get(){
console.log(111)
}
},
data() {
return {
count:1,
price:1
}
},
- html页面中传值都是来自data的数据，如果data的某个变量是一个html模板，标签加上v-html="变量"
<span>这个将不会改变: {{ msg }}</span>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
- html标签上方法如onclick写成v-on:click,简写成@click,若此点击事件执行的语句只有一句可以简写在@click后面,若需要改写attribute，如id，需改成v-bind:class,也可以简化成:class,后面的变量可以是数组，对象或者字符串
//事件
<div @click="activeIndex=-1">全部</div>
//attribute
<div :class="['quanbu','item',activeIndex===-1?'active':'']" >全部</div>
<span class="minus" :class="{countActive:count===1}" >-</span>
<span class="minus" :class="{count===1?'countActive':''}" >-</span>
- 对于表单的input事件，如果是要取一个值
<input type="text" @input="print" >
<script>
methods: {
print(e){
this.keyword=e.target.value
}
}
</script>
//因为该语句只有一句，可以写在标签上，所以可以简化为：
<input type="text" @input='keyword=$event.target.value' >
//vue又用v-model="keyword"对其进行了简化
<input type="text" v-model="keyword" >
- 上总代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大麦网</title>
<link rel="stylesheet" href="/damai.css">
</head>
<body>
<div id="app" v-cloak>
<div class="fl" style="width: 300px;height: 40px;">
<!-- <input type="text" @input="print" > -->
<input type="text" v-model="selectItem.keyword" >
<!-- v-model="keyword" @input='selectItem.keyword=$event.target.value'-->
<button @click='search'>搜索</button>
</div>
<div class="topnav border">
<div id="city" class="each fl">
<div class="title">城市：</div>
<div :class="['quanbu','item',activeIndex===-1?'active':'']" @click="activeIndex=-1">全部</div>
<div class="items flex fl fl-w">
<span :class="['item', i===activeIndex?'active':'']" @click="activeIndex=i" v-show="hideCity?i<20:true" v-for="(item, i) in city"
:key="i">{{item.name}}</span>
</div>
<div @click="getMoreCity">更多</div>
</div>
<!-- <div class="each fl">
<div class="title">分类：</div>
<div class="quanbu item active">全部</div>
<div class="items flex fl fl-w">
<span class="item" v-for="(item, i) in fenlei" :key="i">{{item.name}}</span>
</div>
</div>
<div class="each fl">
<div class="title">子类：</div>
<div class="quanbu item active">全部</div>
<div class="flex fl fl-w">
<span class="item" v-for="(item, i) in zilei" :key="i">{{item.name}}</span>
</div>
</div> -->
</div>
<div class="article border">
<div class="item fl" v-for="(item, i) in actorList" :key="i">
<img :src="item.verticalPic" alt="">
<div class="flex fl fl-d">
<div>
<div>【{{item.cityname}}】 {{item.nameNoHtml}}</div>
<div v-html="item.actors"></div>
<div>{{item.venuecity}} | {{item.venue}}</div>
<div>{{item.showtime}}</div>
</div>
<div>{{item.price_str}} 元</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
Vue.config.productionTip = false
let vm = new Vue({
watch: {
activeIndex(){
this.chooseCity()
}
},
created() {
axios.get('https://search.damai.cn/searchajax.html?tsg=0&st=&et=&order=1&pageSize=30&currPage=1&tn=',
{
params: this.selectItem
})
.then((res) => {
let result = res.data.pageData
this.fenlei = result.factMap.categoryname.concat(result.factMap.tag_names)
this.fenlei.concat(result.factMap.tag_names)
this.zilei = result.factMap.subcategoryname
this.city = result.factMap.cityname
this.actorList = result.resultData
})
},
el: '#app',
data() {
return {
selectItem:{
cty:'',
ctl:'',
sctl:'',
keyword:''
},
keyword:'',
hideCity: true,
activeIndex:-1,
url: '',
fenlei: [],
zilei: [],
city: [],
actorList: []
}
},
methods: {
chooseCity() {
this.selectItem.cty = this.activeIndex>=0 ? this.city[this.activeIndex].name:''
axios.get('https://search.damai.cn/searchajax.html?tsg=0&st=&et=&order=1&pageSize=30&currPage=1&tn=',
{
params: this.selectItem
}).then((res) => {
let result = res.data.pageData
this.actorList = result.resultData
})
},
getMoreCity() {
this.hideCity = !this.hideCity
},
search(){
axios.get('https://search.damai.cn/searchajax.html?tsg=0&st=&et=&order=1&pageSize=30&currPage=1&tn=',
{
params: this.selectItem
}).then((res) => {
let result = res.data.pageData
this.actorList = result.resultData
})
}
}
})
</script>
</html>
- 页面效果
