《vue.js2.0从入门到放弃》学习之路

原文地址：

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之间的联系

数据的请求