vue的全家桶
Vue 全家
2023-09-11 14:15:30 时间
自定义指令
<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
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- 【Vue+element+admin】登陆页面篇(login.vue)
- 【Vue】错误 : 无法加载文件 C:UsersAdministratorAppDataRoamingnpmvue.ps1,因为在此系统上禁止运行脚本的解决方法
- Vue2.0 搭建Vue脚手架(vue-cli)
- 基于vue的数据可视化设计器
- Vue——详解MVVM模型在vue中的使用
- 一文带你理解vue创建一个后台管理系统流程(Vue+Element)
- Vue 兼容性问题 Vue-cli3.x/4.x 兼容低版本浏览器的方案
- Vue组件的操作-自定义组件,动态组件,递归组件
- vue观察模式浅析
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
- vue中$refs、,$emit、$on
- 02-vue基础-Vue常用特性
- VUE-015-解决 vue install 引发的 failed Error: not found: python2 问题
- VUE图片懒加载-vue lazyload插件的简单使用
- vue-cli3运行本地项目后,端口不随设置的随便变化
- [js高手之路] vue系列教程 - 绑定设置属性的多种方式(5)
- 浅析Vue数据更新了但页面不更新的7种情况及vue异步更新带来的数据响应的误解
- Vue学习第20天——Vue中常用的ajax请求库(axios与vue-rouserce)
- vue @click.native
- vue 外卖app(3) 引入阿里图标
- VUE 路由
- VUE 基础配置