vue相关问题

vuejs

轻量级、上手快的mvvm框架

ref

用上了vue基本不需要去像以前用zepto那样，要自己去获取dom，操作dom了，vue提供$refs来获取dom，优势在于vue在初始化实例的时候已经缓存了这些dom，用法：

<template>
    <p ref="whell">this is a ref</p>
    <div ref="whell">{{ checks }}</div>
</template>
<script>
  export default {
    data() {
      return {
        checks:this.$refs.whell.text()
      }
    },
    computed() {
       
    }
  }
</script>

slot

组件动态部分嵌套标签

//父组件内用
<template> 
  <ActionBar> 
     <span class="icon-wrapper" slot="r-slot" v-show="$store.state.isLogin"><img class="icon" src="~images/notification.png" @click="$router.push('/msgbox')"></span>
     <img class="icon" src="~images/more.png" slot="r-slot" @click="showMore($event)" v-show="$store.state.isLogin">
     <img class="icon" src="~images/about.png" slot="r-slot" @click="$router.push('/member/intro')" v-show="!$store.state.isLogin">
  </ActionBar>
</template>
//子组件<ActionBar>
 <template>    
   <div class="r-slot">
     <slot name="r-slot"></slot>
   </div>
 </template>

this.$nextTick(()=>{ })

针对页面动态获取的dom，这个可以在dom渲染完后去处理一些事情

<div id="app">
  <ul>
     <li v-for="item in items" ref="li">{{ item.name }}</li>
  </ul>
</div>
new Vue({
   el:'#app',
   data() {
     return {
      items:[]
     }
   },
   mounted() {
     this.loadData()
   },
   methods() {
      loadData() {
        setTimeout( ()=>{
            this.items=[{'id':1,'name':'one'},{'id':2,'name':'two'}]
            this.$nextTick( ()=> {
               //$refs 获取当前dom对象
              console.log(this.$refs.li[0])
            })
           }
        },500)
   }
})

全局函数、变量

有时候需要很多地方调用函数或者变量，也不需要每个都去import某一个公共类，实现方法为插件

const MOTIONS = {}
const TYPES = {}
const AWARDS = []
function doMotion(opts) {
    let motion = MOTIONS[opts.motion]
    if(!motion) return
    motion.do.apply(this, opts.params)
}
function install(Vue) {
    Vue.prototype.$defineMotion = defineMotion
    Vue.prototype.$doMotion = doMotion
    Vue.prototype.__MOTIONS__ = MOTIONS
    Vue.prototype.__AWARDS__ = AWARDS
}
export function defineMotion(motion, opts) {
    if(!motion) return
    MOTIONS[motion] = opts
}
export default {
    install
}
//main.js 或者index.js里面import进来
import install from ....
Vue.use(install)

vue-resource相关应用

这个库是vue跟后端做数据请求用的，get、post、jsonp等，全攻略项目中接口api是统一管理的，在某些针对每个接口都做的一些事儿（每次请求前），vue-resource提供了interceptors来帮我们处理，比如管理我们的请求池、针对api做统一处理等

import Vue from 'vue'
import VueResource from 'vue-resource'
import store from '../common/store'
Vue.use(VueResource)
Vue.http.interceptors.push((request, next) => {
  store.commit('addPendingRequest', request)
  next((response) => {
    store.commit('removePendingRequest', request);
  })
})
//这里用vuex统一管理项目中的请求，在每个请求前加入请求池，完事儿了移除，在vuex里面针对每个请求要做是否存在（或者是否存在上一次请求还没请求完，要相应abort()掉）
function oauthRequest(url,context,mutation) {
    context.$store.commit('tryAbortRequest', url)
    return ......promise
}
export const state = {
  pendingRequests: []
}
export const mutation = {
  tryAbortRequest(state, url) {
    let requests = state.pendingRequests
    let len = requests.length
    while(len--) {
      if(requests[len].url.indexOf(url) != -1) {
        requests[len].abort()
        requests.splice(len, 1)
      }
    }
  }
}
exprot const action = {
  fetchMyAward({commit},context) {
    return oauthRequest('/public/api',context,'setMyAward') 
  }
}

以上是vue-resource在项目中的简单应用

mixin

vue的混合有别与sass、less的mixin功能（类似公共函数），vue组件里提取共用功能

  //组件
  import xxx from './sss'
  export default {
   name: 'component',
   data() {
   
   },
   mixins: [xxx],
   created() {
     console.log(123)
   },
   methods() {
     conflict: ()=> {
      console.log(123)
     }
   }
  
  }
  //xxx.js
  export default {
    data() {
    
    },
    created() {
      console.log(234)
    },
    methods() {
     conflict: ()=> {
      console.log(123)
     }
    }...
  }
/*
 冲突的methods、components、directives以组件为主、冲突的hooks先走minxin再组件
*/
//全局mixin  定义一个xxx.js
import xxx from '../xxx.js'
在入口文件里 Vue.mixin(xxx)
后面每个vue实例都会存在xxx.js里面定义的东西

vue 打印语法错误

有时候低版本浏览器不支持某些语法时候vue在webpack打包过程中移除了window.onerror，打印不出错误，解决方法

1
2
3

console.error = function() {
   alert(error)
}