原文地址：
Vue.js2.0从入门到放弃---入门实例（一）：http://blog.csdn.net/u013182762/article/details/53021374
Vue.js2.0从入门到放弃---入门实例（二）：http://blog.csdn.net/u013182762/article/details/53027883
Vue.js2.0从入门到放弃---入门实例（三）：http://blog.csdn.net/u013182762/article/details/53488870
有幸看到作者的这3篇从入门到放弃，带我真正开始了vue.js的旅程，看完了这3篇文章，坑也踩了不少，不过还好，最后还是完美落幕，把详情页也补充进来了。
因为我是有安装eslint的，所以对代码的格式要求很高，哪怕一个空格都不会放过，作者在入门实例（三）里面有提到，按照他的代码是会报很多错误的，不过我已经把错误都解决的了，简单罗列几个，如果还有别的error可以一起解决~
在main.js文件里面，new实例前面要加上这2句注释。
/* eslint-disable no-new */
/* eslint-disable no-unused-vars */
new Vue({
el: '#app',
data () {
return {
transitionName: 'slide'
}
},
router,
watch: {
'$route' (to, from) {
const toDepth = to.path.substring(0, to.path.length - 2).split('/').length
const fromDepth = from.path.substring(0, from.path.length - 2).split('/').length
this.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'
}
}
})
home.vue文件里面的list标签，有for循环，所以要加上key值
<div class="content">
<ul class="cont_ul">
<list v-for="(item, index) in items" :price="item.price" :title="item.title" :img="item.img" :key="item.id" :index="index"></list>
</ul>
</div>
详情页主要是要拿到li里面的内容，那就必须拿到li的index,所以在home.vue里面循环的时候要把index定义出来，上面代码已经有了。我的处理方法是把跳转的地址加上index作为参数，再通过拿到这个参数，来决定详情页显示什么。一开始我以为用
this.$route.query拿到是就是个数值，没想到这样拿到的居然是个对象，就只能再处理一遍了。details是我自己在json文件里面加的值，用于显示详情的，可以*更改。以下是Detail.vue里面的代码，css没变，我就不再重复：
<template>
<div class="detail"> <detail-header></detail-header> <img :src=imgSrc alt=""> <p>{{details}}</p> </div>
</template>
<script>
import DetailHeader from '../components/DetailHeader' export default {
data () {
return {
imgSrc: '',
details: ''
}
},
components: {
DetailHeader
},
created () {
this.fetchData()
},
methods: {
fetchData () {
this.$http.get('/api/books')
.then(res => {
var i = this.$route.query
var result = res.data
for (var key in i) {
this.imgSrc = result.data[key].img
this.details = result.data[key].details
}
}, error => {
console.log(error)
})
}
}
}
</script>
DetailHeader.vue的代码：
<template>
<header class="header"> <div class="header_inner flexWrap"> <div id="header_btn_nav" class="header_btn header_btn_back" v-on:click="goBack">返回</div> <div class="header_cont flex">{{title}}</div> <div class="header_btn header_btn_cart"></div> </div> </header>
</template> <script>
import List from '../components/List'
export default {
data () {
return {
title: ''
}
},
methods: {
goBack () {
window.history.back()
},
fetchData () {
this.$http.get('/api/books')
.then(res => {
var i = this.$route.query
var result = res.data
for (var key in i) {
this.title = result.data[key].title
}
}, error => {
console.log(error)
})
}
},
components: {
List
},
created () {
this.fetchData()
}
}
</script>
这detail的文件里面有重复的脚本，我想应该还是可以再优化的，目前水平还不够，只是能实现功能，要是有大神指导请多多赐教。
自身不足：
组件之间的通信
函数与html之间的联系
数据的请求