axios发json请求

首先在static准备json文件

在网页端可以通过路由访问

City.vue

Ajax动态渲染需要设置mounted挂载组件前的钩子函数，访问json，在data数据中储存起来。

下面就是在子组件中绑定父组件的数据。

<template><div><city-header></city-header><city-search></city-search><city-list :cities="cities" :hot="hotCities"></city-list><city-alphabet :cities="cities"></city-alphabet></div>
</template><script>
import axios from 'axios'
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'export default {name: 'City',components: {CityHeader,CitySearch,CityList,CityAlphabet},data () {return {cities: {},hotCities: []}},methods: {getCityInfo () {axios.get('/api/city.json').then(this.handleGetCityInfoSucc)},handleGetCityInfoSucc (res) {res = res.dataif (res.ret && res.data) {const data = res.datathis.cities = data.citiesthis.hotCities = data.hotCities}}},mounted () {this.getCityInfo()}
}
</script><style lang="stylus" scoped></style>

List.vue

<template><div class="list" ref="wrapper"><div><div class="area"><div class="title border-topbottom">当前城市</div><div class="button-list"><div class="button-wrapper"><div class="button">北京</div></div></div></div><div class="area"><div class="title border-topbottom">热门城市</div><div class="button-list"><divclass="button-wrapper"v-for="item of hot":key="item.id"><div class="button">{{item.name}}</div></div></div></div><div class="area" v-for="(item, key) of cities" :key="key"><div class="title border-topbottom">{{key}}</div><div class="item-list"><divclass="item border-bottom"v-for="innerItem of item":key="innerItem.id">{{innerItem.name}}</div></div></div></div></div>
</template>
<script>
import Bscroll from 'better-scroll'
export default {name: 'CityList',props: {hot: Array,cities: Object},mounted () {this.scroll = new Bscroll(this.$refs.wrapper)}
}
</script><style lang="stylus" scoped>@import '~styles/varibles.styl'.border-topbottom&:beforeborder-color: #ccc&:afterborder-color: #ccc.border-bottom&:beforeborder-color: #ccc.listoverflow: hiddenposition: absolutetop: 1.58remleft: 0right: 0bottom: 0.titleline-height: .54rembackground: #eeepadding-left: .2remcolor: #666font-size: .26rem.button-listoverflow: hiddenpadding: .1rem .6rem .1rem .1rem.button-wrapperfloat: leftwidth: 33.33%.buttonmargin: .1rempadding: .1rem 0text-align: centerborder: .02rem solid #cccborder-radius: .06rem.item-list.itemline-height: .76rempadding-left: .2rem
</style>

Alphabet.vue

<template><ul class="list"><li class="item" v-for="(item, key) of cities" :key="key">{{key}}</li></ul>
</template><script>
export default {name: 'CityAlphabet',props: {cities: Object}
}
</script><style lang="stylus" scoped>@import '~styles/varibles.styl'.listdisplay: flexflex-direction: columnjustify-content: centerposition: absolutetop: 1.58remright: 0bottom: 0width: .4rem.itemline-height: .4remtext-align: centercolor: $bgColor
</style>

兄弟组件数据传递

City.vue

<template><div><city-header></city-header><city-search></city-search><city-list:cities="cities":hot="hotCities":letter="letter"></city-list><city-alphabet:cities="cities"@change="handleLetterChange"></city-alphabet></div>
</template><script>
import axios from 'axios'
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'
export default {name: 'City',components: {CityHeader,CitySearch,CityList,CityAlphabet},data () {return {cities: {},hotCities: [],letter: ''}},methods: {getCityInfo () {axios.get('/api/city.json').then(this.handleGetCityInfoSucc)},handleGetCityInfoSucc (res) {res = res.dataif (res.ret && res.data) {const data = res.datathis.cities = data.citiesthis.hotCities = data.hotCities}},handleLetterChange (letter) {this.letter = letter}},mounted () {this.getCityInfo()}
}
</script><style lang="stylus" scoped></style>

Alphabet.vue

<template><ul class="list"><liclass="item"v-for="item of letters":key="item":ref="item"@touchstart="handleTouchStart"@touchmove="handleTouchMove"@touchend="handleTouchEnd"@click="handleLetterClick">{{item}}</li></ul>
</template><script>
export default {name: 'CityAlphabet',props: {cities: Object},computed: {letters () {const letters = []for (let i in this.cities) {letters.push(i)}return letters}},data () {return {touchStatus: false,startY: 0,timer: null}},updated () {this.startY = this.$refs['A'][0].offsetTop},methods: {handleLetterClick (e) {this.$emit('change', e.target.innerText)},handleTouchStart () {this.touchStatus = true},handleTouchMove (e) {if (this.touchStatus) {if (this.timer) {clearTimeout(this.timer)}this.timer = setTimeout(() => {const touchY = e.touches[0].clientY - 79const index = Math.floor((touchY - this.startY) / 20)if (index >= 0 && index < this.letters.length) {this.$emit('change', this.letters[index])}}, 16)}},handleTouchEnd () {this.touchStatus = false}}
}
</script><style lang="stylus" scoped>@import '~styles/varibles.styl'.listdisplay: flexflex-direction: columnjustify-content: centerposition: absolutetop: 1.58remright: 0bottom: 0width: .4rem.itemline-height: .4remtext-align: centercolor: $bgColor
</style>

List.vue

<template><div class="list" ref="wrapper"><div><div class="area"><div class="title border-topbottom">当前城市</div><div class="button-list"><div class="button-wrapper"><div class="button">北京</div></div></div></div><div class="area"><div class="title border-topbottom">热门城市</div><div class="button-list"><divclass="button-wrapper"v-for="item of hot":key="item.id"><div class="button">{{item.name}}</div></div></div></div><divclass="area"v-for="(item, key) of cities":key="key":ref="key"><div class="title border-topbottom">{{key}}</div><div class="item-list"><divclass="item border-bottom"v-for="innerItem of item":key="innerItem.id">{{innerItem.name}}</div></div></div></div></div>
</template><script>
import Bscroll from 'better-scroll'
export default {name: 'CityList',props: {hot: Array,cities: Object,letter: String},mounted () {this.scroll = new Bscroll(this.$refs.wrapper)},watch: {letter () {if (this.letter) {const element = this.$refs[this.letter][0]console.log(element)this.scroll.scrollToElement(element)}}}
}
</script><style lang="stylus" scoped>@import '~styles/varibles.styl'.border-topbottom&:beforeborder-color: #ccc&:afterborder-color: #ccc.border-bottom&:beforeborder-color: #ccc.listoverflow: hiddenposition: absolutetop: 1.58remleft: 0right: 0bottom: 0.titleline-height: .54rembackground: #eeepadding-left: .2remcolor: #666font-size: .26rem.button-listoverflow: hiddenpadding: .1rem .6rem .1rem .1rem.button-wrapperfloat: leftwidth: 33.33%.buttonmargin: .1rempadding: .1rem 0text-align: centerborder: .02rem solid #cccborder-radius: .06rem.item-list.itemline-height: .76rempadding-left: .2rem
</style>

参考课程：慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发

七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递相关推荐

vue 一个页面根据状态渲染不同的组件使用currentView动态渲染
1.在当前vue页面导入所需要的组件组件目录: 注:index.vue就是要渲染的页面在data中定义变量: components: {submitVeterans: () => impor ...
【看板】ajax动态获取后台传来json数据，加载到页面表格中
ajax动态获取后台传来json数据,加载到页面表格中摘要 1.WebApi 2.看板HTML 3.ajax获取后台传来的数据:在这里要注意声明提升,所以需要在for循环外var str1 = &q ...
Vue基础篇六：Vue使用JSX进行动态渲染
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
vue 同页面不同组件数据传递
不用 vuex 同页面不同组件数据传递,用vuex的这篇文章可以忽略! 直接举例: 一个页面有两个组件,其中组件A的数据可以传递到组件B,同理组件B的数据可以传递到组件A, 即AB两个组件可以互相传递 ...
metisMenu.js动态侧边导航的实现（ajax动态渲染部分导航）
使用metisMenu.js实现后台管理系统的导航,通过点击导航,切换不同的页面内容.有些时候.我们需要动态添加页面的内容,即通过ajax请求后台来渲染部分导航的内容. 第一部分是静态导航的实现,即通 ...
小泼猴案例页面的动态渲染
1.首先我们自己准备一个假的后端数据接口用来模拟,通过在在线平台fast mock上我们可以完成. 2.在动态渲染之前我们先写好静态的HTML页面和css样式,在写完后开始准备写js 3.在js中我们 ...
vue中手写动态渲染左右滚动菜单栏点击居左以及设置scrollLeft属性设置无效的原因解决
vue中可能会碰到无法使用框架的问题,此时需要手写左右滚动的滑动菜单栏,并且头部或者底部还有对应的标题点击定位.此时应该怎么做呢? (1)下面看结构: <div class="cour ...
jquery,ajax动态从数据库加载数据并自动选中复选框
ajax动态加载下拉框数据(前端js发送ajax请求,后端查询数据库,得到数据,返回前端),GET,POST,DELETE,PUT上一篇地址上一篇讲了下拉框,现在说说复选框先从简单的单选框说起 & ...
Vue表单类的父子组件数据传递示例_vue.js_脚本之家
使用Vue.js进行项目开发,那必然会使用基于组件的开发方式,这种方式的确给开发和维护带来的一定的便利性,但如果涉及到组件之间的数据与状态传递交互,就是一件麻烦事了,特别是面对有一大堆表单的页面. 在 ...

七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递

文章目录

axios发json请求

City.vue

List.vue

Alphabet.vue

兄弟组件数据传递

City.vue

Alphabet.vue

List.vue

七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递相关推荐

最新文章

热门文章