vue框架的简单使用

项目总览

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Panda from '@/components/panda'
import Spotslist from '@/components/spotslist'
import Hotellist from '@/components/hotellist'
import Spots from '@/components/spots'
import Hotel from '@/components/hotel'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '首页',
      component: Panda
    },
    {
      path: '/HelloWorld',
      name: '测试页面',
      component: HelloWorld
    },
    {
      path: '/spotslist',
      name: '景点详情',
      component: Spotslist
    },
    {
      path: '/hotellist/:id',
      name: '酒店详情',
      component: Hotellist
    },
    {
      path: '/spots',
      name: '景点详情',
      component: Spots
    },
    {
      path: '/hotel',
      name: '酒店详情',
      component: Hotel
    }
  ]
})

validate.js

// 判断是否为空
export const isDataValid = (data) => {
  if (data != null && data !== '' && data !== 'undefined' && data !== null && data != undefined) {
    return true
  }
  return false
  }
export const config = {
  dataserver: 'http://127.0.0.1:8081/',
  imgserver: 'http://192.168.1.100/'
}

panda.vue

一：使用数据

script>
import {isDataValid,config} from '../util/validate'
import {service} from '../util/service'
import axios from 'axios'

export default {
  name: 'panda',   //是哪个页面
  data () {   //页面需要使用的数据
    return {
    inputValue: '',
      username: '张三',
      password: '123',
       arealist:  [{areaid: '', areaname: '', areastate: '', areasort: ''} ],
      spotlist:  [{spotsid: '',spotname: '',spotsaddr: '',spotsaddr2: '',spotsopentime: '',
        spotsoneworlds: '',spotsimg: '',spotsstate: '',spotsfirst: '',spotshot: '',
        spotsareaid: '',spotsareaname: '',spotsdesc: ''}],   //这个写出来只是方便阅读
      typelist: [{htid: '',htname: '',htstate: '',htsort: ''}],
      hotellist: [{}],  //直接这样子写就可以了
      imgserver: config.imgserver
    }
  },

二：调用方法（可连接数据接口）

 methods: {   //方法
 getIndex (index) {
      // console.log(index)
      this.curIndex = index
    },
    product (areaid) {
      let that = this
      axios.get(config.dataserver + 'spots/getdatabyid?id=' + areaid).then(res => {
        that.spotlist = res.data
      })
    },
    products(){
      let that=this
      axios.get(config.dataserver + 'spots/getdata').then(res =>{
        that.spotlist=res.data
      })
    },

三：（数据接口）

mounted: function () {   //数据接口
    let that = this
    axios.get(config.dataserver + 'sys/area/getdata').then(res =>{
      that.arealist = res.data
      console.log(res.data)  //显示得到的数据
    })

    axios.get(config.dataserver + 'spots/getdata').then(res =>{
      that.spotlist = res.data
      console.log(res.data)
    })

四：使用数据

  <li v-for="item in arealist"  @click="product(item.areaid)">
                    {{item.areaname}}
                  </li>