vue的全家桶

Z时代
2024-01-10
分类：综合

vue

自定义指令

<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

小结

每个组件只能包含一个根节点

actions弥补了mutations不能异步操作的缺陷

参考：http://www.jianshu.com/p/25379164a9a6

以上是 vue的全家桶的全部内容，来源链接： utcz.com/z/378103.html

回到顶部