目录结构及说明
我们编写代码是在src目录下，下面也仅分析src目录下的代码结构及意思
|——src | |—— assets : 资源文件 | | |____ styles : 样式相关及iconfont | |—— common : 通用组件 | | |____ fade : 渐隐渐现动画 | | |____ gallary : 图片展示轮播 | |—— pages : 主要的页面组件 | | |____ city : 城市选择页面及其组件 | | |____ detail : 详情页面及其组件 | | |____ home : 主页及其组件 | |—— router : 路由 | |—— store : Vuex 状态组件 | |—— App.vue : App入口组件 | |—— main.js : 导入全部文件，调用初始化函数
入口分析
首先 main.js 是绑定在id ‘#app’上的，而这个文件就是根目录下的index.html文件里面的标签了，
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>travel</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>可以看到里面有一个id=”app”的div标签
main.js 代码里面，初始化Vue组件的代码
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})可以从main.js 里面看到Vue接收一个对象，并定义了各种属性
el: '#app'绑定元素routerrouter: router 的缩写，用了ES6的语法，交代路由模块store交代Vue模块，方便components通信components: { App }这个是注册组件- template: ‘<App/>’ 这个我几乎没遇到过，还不懂，等我懂了回来改
main.js的其他代码，导入及初始化
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 导入vue
import App from './App' // 导入App.vue里面export 的App组件
import router from './router' // 导入router组件
import 'styles/reset.css' // 导入rest.css样式表，主要是一些基础设置
import fastclick from 'fastclick' // 导入快速点击库，解决某些手机点击延迟问题
import store from './store' // 导入store 组件，也就是我们组件之间通信的小东西
import 'styles/iconfont.css' // 图标样式
import VueAwesomeSwiper from 'vue-awesome-swiper' // 轮播组件
import 'swiper/dist/css/swiper.css' // 轮播组件的样式
import 'styles/border.css' // 解决手机端1像素边框样式边框问题
Vue.config.productionTip = false
fastclick.attach(document.body) // 把fastclick 绑定到文档上
Vue.use(VueAwesomeSwiper) // 初始化轮播组件再来看看我们的App.vue文件
<template>
<div id="app">
<keep-alive exclude="Detail">
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>一目了然，template放html和自定义组件、script放JS代码实现逻辑、style放样式代码
核心代码<router-view/>的作用就是告诉Vue，在这儿显示router下面的内容，默认肯定是显示根目录的内容了，后面router里，代码如下，以Home页面为例
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import home from '@/pages/home/home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
}]
})注册路由以后，当你访问path / 时，也就是当你访问首页时，就可以访问到他对应的组件了
首页代码
首页代码结构
首先，首页时在src目录下的home 文件夹中
将首页拆分为Header、icons、Recommend、Swiper、Weekend等多个组件，放在home/components目录下，其实也就是模块化，方便维修升级嘛
然后通过home.vue将组件整合，非常符合工程化的设定，一看就是要搞大项目的节奏
自定义组件使用
以Header组件为例
创建Header.vue
首先是在components下新建Header.vue，直接套模板即可
<template>
<div class="header">
</div>
</template>
<script>
export default{
name: 'HomeHeader',
}
</script>
<style lang="stylus" scoped>
</style>
导入Header模块：
import HomeHeader from './components/Header'前面的的name 属性，就是我们导入这个模块需要用到的名称了
注册组件
export default{
name: 'home',
components: {
HomeHeader
}
}使用组件
<home-header></home-header>使用的时候，也很简单呢
导出接口的属性和方法解释
export default{
name: 'home',
components: {},
data () {
return {
lastCity: ''
}
},
computed: {},
methods: {
getHomeInfo () {}
},
mounted () {
this.lastCity = this.city
this.getHomeInfo()
},
activated () {
if (this.lastCity !== this.city) {
this.lastCity = this.city
this.getHomeInfo()
}
}
}name就不多说了
components 是用来给我们自定的组件注册用的，注册之后才能使用
data 很明显是存数据的，一些参数之类的，比如首页的城市
computed ： 计算属性，可以用来写一个逻辑代码在里面
methods： 顾名思义，存放方法用的，也就是各种函数，比如axios发起的http请求就可以放在里面
mounted、activated ： 是状态函数，表示网页加载的不同阶段在Vue里面叫生命周期钩子 Vue官网提供的图示还是可以参考一下的
但其实对我这种小白来说还是比较困惑的，所以我简单理解就是
mounted == 页面被加载完成
activated == keep-alive启动后的页面加载完成
使用axios通过网络获取数据
代码
data () {
return {
swiperList: []
}
},
methods: {
getHomeInfo () {
axios.get('/api/index.json?city=' + this.city)
.then(this.getHomeInfoSucc)
},
getHomeInfoSucc (res) {
res = res.data
if (res.ret && res.data) {
const data = res.data
this.swiperList = data.swiperList
}
}
}首先是在data中设置一个用来接收的参数，比如这里的swiperList，被设置成了一个空数组。
紧接着在methods中定义发起异步get请求的链接和参数 getHomeInfo，和请求成功后的处理函数 getHomeInfoSucc，最后通过this.swiperList = data.swiperList 来将获取到的参数赋值给我们在data中事先定义好的参数。
父子组件传值
1.父组件给子组件传值
在我的情况里，就是home.vue给swiper.vue传值，按照下面的格式写在自定义组件中即可，list是传递到子组件之后使用的名称，swiperList 是这个数据在父组件里面使用的名称
<home-swiper :list="swiperList"></home-swiper>子组件还需要接收这个参数， 名称+类型即可
props: {
list: Array
}然后就可以在代码中使用了
<swiper-slide v-for="item of list" :key="item.id">
<img class="swiper-img" v-bind:src="item.imgUrl" >
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>2.子组件给父组件传值
首先，在子组件中通过emit发送参数
methods: {
handleLetterClick (e) {
this.$emit('change', e.target.innerText)
}
}然后，在父组件中监听该操作，并制定接收参数的方法
<city-alphabet @change="handleLetterChange"></city-alphabet>3.父组件与父组件传值
父组件与父组件传值，其实就是通信。在学习操作系统中，我们知道进程与进程之间通信需要选择一个中间实体，比如一块共享内存，一个缓冲管道，或者某种其他的数据结构，父组件与父组件通信也需要
我们需要用到vuex，使用前需要安装
npm install vuex --save然后在src目录下创建store，并新建index.js
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
city: ''
},
actions: {
changeCity (ctx, city) {
ctx.commit('changeCity', city)
}
},
mutations: {
changeCity (state, city) {
state.city = city
}
}
})
所以其实就是引入Vuex并初始化，然后通过state、actions、mutations来处理，而export其实还将这个组件命名为Store，你可以通过 this.$store来访问他的方法
actions可以被跳过
然后在需要发送数据的父组件中
导入
import { mapState, mapMutations } from 'vuex'然后发送数据
经典的发送方式
this.$store.dispatch('changeCity', city)
this.$store.commit('changeCity', city)省略的方式
...mapMutations(['changeCity'])
this.changeCity(city)接收
computed: {
...mapState(['city'])
}接收后就可以直接在组件中通过 this.city 调用它了，而且你还可以用对象来以重命名的方式接收他
computed: {
// ...mapState(['city'])
...mapState({
currentCity: 'city'
})
},
暂无评论