vue+webpack学习之路（基础）

一. vue要求我们转变像jquery一样直接操作dom的思想，拥抱数据驱动的思想，例如，需要操作列表中其中一个元素时，可以为该列表所有元素添加index遍历，然后使用index达到想要实现的目的

// 绑定索引和事件

 

// 在方法中使用索引
methods: {
 changeActive (index) {
  console.log(index)
 }
}

二. 即使完全是数据驱动，有些时候还是会造成一些麻烦，我们难免会想要通过操作dom来直接获取我们想要的元素，别担心，vue也能替我们解决的

我是div

mounted () {
   console.log(Vue.$refs.sellectdiv.innerHTML) // 我是div
}

三. vue实例化以后绑定到data上的数据是无法响应式更新的，这是es5语法本身的限制，所有初始化一个空数组然后ajax更新数组的想法在一般情况下是行不通的，但是vue提供了一个方法，使用Vue.$set可以动态的绑定数据到data上并能够响应式刷新

四. 使用vue.$router.go(0)可以对当前组件强制刷新，这里也是使用了history API和vue-router的编程式导航

五. vux组件样式的重写，解决组件下重写vux样式不能加scoped的问题，解决方法是可以将vux组件写为一个新的自定义组件，在该组件下重写全局样式（不加scoped），然后其他组件引用这个自定义组件就可以了

六. vux内部集成了ajaxPlugin，可以使用像vue-resource一样的api，类似this.$http来发起ajax请求，有个小问题，在this.$http的回调函数then中，不能再使用this来调用实例的数据和方法，应该在请求外部定义let that = this，然后再在请求内部使用它

let that = this
this.$http({
method: 'get',
url: 'http://xxx.com',
data: ''
}).then(function (response) {
 let res = response.data
 that.data = res
 console.log(that.data)
})

七. 下拉刷新，由于vue数据驱动视图的特点，那下拉刷新就很好实现了，判断页面滚动的高度与页面文档的高度进行一定条件的对比，在mounted中使用js监听页面滚动即可

window.addEventListener("scroll",yourFunction)

八. vue提供了一个监听函数可以页面路由的变化，watch，在这个函数中可以监听路由的变化而执行相应的事件（这个函数也可以监听页面数据的变化）

watch: {
 // route代表你的路由，路由变化即执行你的函数
 'route': 'yourFunction'
}

九. 在使用vux的组件时（如轮播图，其实不论哪个插件哪个组件都一样），如果组件处在一个条件渲染（v-show）的父组件下会出现各种诡异的问题，因为使用了v-show时父组件会隐藏，而各类插件的轮播图会获取不到父级宽度，这时候可能出现的问题就随着不同轮播的实现方式不同而不同（这个问题可能只有在具体碰到的时候才会明白我在说什么）

十. 在对router-link进行状态切换时，首先可以采用vue自带的方式，当你选中一个路由时，vue会给你的router-link加上一个class:router-link-active，当class满足不了你的需求时，可以给你的所有路由都加上一个状态，然后用数据切换，这里就可以在你点击不同的路由时切换显示的图片

  export default {
    data () {
      return {
        ifimgsrc: [
          {'status': false},
          {'status': true},
          {'status': false},
          {'status': false},
          {'status': false}
        ]
    },
    methods: {
      changeActive (index) {
        for (let i = 0; i < this.ifimgsrc.length; i++) {
          this.ifimgsrc[i].status = false
        }
        this.ifimgsrc[index].status = !this.ifimgsrc[index].status
      }
    }
  }

十一. routerEach配合meta字段可以实现单页面修改页面标题

// 路由钩子
router.afterEach((to, from, next) => {
  if (to.meta) {
    document.title = to.meta
  }
})