自定义指令
Vue directive( dem
自定义指令
<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
