Vue全家桶案例总结

2017-01-24 本文已影响8812人 Cause_XL

自定义指令

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
});

项目中自定义滚动指令(main.js)

Vue.directive('scroll',{
  bind:function(el,binding){
    window.addEventListener('scroll',() => {
        let fnc = binding.value; // 该项目中绑定到函数
        fnc(el);
    })
  }
})

组件中使用

<div class="..." v-scroll="showTop">
  ...
  <div @click="gotop" class="go-top" :class="goTop?'active':''"></div>
  ...
</div>

methods: {
  gotop: function() {
    let speed = 10;
    let timer = setInterval(function(){
      if (document.body.scrollTop > 0){
        document.body.scrollTop = document.body.scrollTop - speed > 0 ? document.body.scrollTop - speed : 0;
        speed += 20;
      } else {
        clearInterval(timer);
      }
    }, 16)
  },
  showTop: function() {
    if(document.body.scrollTop > 200){
      this.goTop = true
    } else {
      this.goTop = false
    }
  },
}

Modules

使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。为了解决以上问题，Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters。

cinema-modules

import * as types from '../types'

const state = {...};
const actions = {...};
const getters = {...};
const mutations = {...};

export default {
  state,
  actions,
  getters,
  mutations
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import cinema from './modules/cinema'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    cinema
  },
})

export default store;

跨域问题

有时候，本地使用webpack开启一个node的dev端口，项目中使用vuejs去访问别人家的api，
比如豆瓣或者其他的api，不使用jsonp肯定就会报跨域的问题。

解决方法：使用http-proxy-middleware插件

在vue-cli生成的build/dev-server.js中添加

app.use('/api',proxyMiddleware({
  target:'http://www.example.org',
  changeOrigin:true
}))

路由

响应路由参数的变化

当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。 不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象。

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

路由常用API

表达式	返回类型	意义
$route.name	String	当前路由的名称
$route.path	String	对应当前路由的路径，总是解析为绝对路径
$route.params	Object	一个 key/value 对象，包含了动态片段和全匹配片段
$route.query	Object	一个 key/value 对象，表示 URL 查询参数。/foo?user=1，$route.query.user == 1

axios

axios基本用法参考

目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据

cnpm install axios -S

安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每个需要发送请求的组件中即时引入

为了解决这个问题，有两种开发思路，一是在引入 axios 之后，修改原型链，二是结合 Vuex，封装一个 aciton。

方案一：改写原型链

首先在 main.js 中引入 axios

import axios from 'axios'

这时候如果在其它的组件中，是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性，就能解决这个问题

Vue.prototype.$http = axios

在 main.js 中添加了这两行代码之后，就能直接在组件的 methods 中使用 $http 命令

methods: {
 getMovies() {
  this.$http.get('url')
    .then(res => {
      console.log(res.data)
    })
    .catch(err => {
      console.log(err)
    })
  }
}

参考地址

小结

每个组件只能包含一个根节点
actions弥补了mutations不能异步操作的缺陷