Vue
程序员小潘
Java开发工程师,现居杭州,CSDN博客专家,热衷于分享计算机编程相关知识,欢迎关注~
展开
-
Vue动态加载并注册组件
一般在编写Vue程序时,引入组件通常这么写://引入组件import cmpName from './components/Cmp';//注册组件components:{ cmpName},缺点:硬编码,代码中写死,不灵活。很多时候,需要动态的引入组件并注册。例如:使用Element-UI的Tabs时,tab的组件需要根据左侧菜单的点击来动态生成。动态引入并注册组件...原创 2019-11-10 19:08:15 · 9678 阅读 · 2 评论 -
vuex存取值和映射函数
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。前言vuex的执行流程组件通过dispatch调用action,action通过commit来触发mutation,mutation来负责修改state,state修改后去重新渲染受影响的dom。安装和引入1、安装npm in...原创 2019-11-10 18:49:19 · 9787 阅读 · 0 评论 -
Vue之Slot插槽
Vue组件化开发,除了单纯的引用一个组件外,还可以给组件定制化一些特有的东西。组件负责完成基本功能,提供一些Slot插槽,供调用方完成一些特有的功能。Slot中文译为:插槽,可以理解为:插座,可以外接各种电器。Cmp1.vue<template> <div> cmp1 <hr> <Cmp2> <...原创 2019-11-09 13:44:01 · 7142 阅读 · 0 评论 -
Vue跨域问题
随着项目前后端分离的趋势,跨域始终是一个绕不开的问题,一个本可以正常访问的接口,但在项目中请求就是发不出去,是什么原因导致的呢?存在即合理,既然跨域那么烦人,那它存在的理由是什么呢?这里我们先了解一下浏览器的“同源策略”。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。浏览器的同源策略,别的先不管,我们只要知道它...原创 2019-10-12 09:13:41 · 4642 阅读 · 0 评论 -
Vue中axios的二次封装
Vue项目中,前端与服务器进行数据交互主要用axios比较多,原生的axios发送请求处理数据不太友好,项目中可以二次开发自定义。什么是 axios?Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios的特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截...原创 2019-10-13 11:15:43 · 6195 阅读 · 0 评论 -
Vue路由的懒加载
周六听一位老师讲到Vue的路由懒加载,觉得比较实用。刚好服务器的带宽不够用,遂决定把项目优化一下。优化之后,编译后的app.js从原来的1MB缩小到100KB,首页加载速度得以提升。现将优化步骤总结如下:什么是懒加载?即组件并非一次性全部加载,而是需要时再加载,也叫:“按需加载”。为什么需要懒加载?为了更好的用户体验。首页渲染更快,性能开销更低。一个大型项目,如果组件一次性全部加...原创 2019-10-13 11:19:32 · 4936 阅读 · 0 评论 -
模拟Vue实现双向数据绑定
最近公司要让我写部分前端,学习了一下Vue,并整理成博客。Vue的数据绑定一直是用的很爽的一个功能,它让程序员无需关心dom操作,只需处理数据的变化。数据的改变会自动渲染dom,数据驱动视图。实现数据绑定用到的核心就是 Proxy。下面是两个手写单向/双向数据绑定的例子,仅供参考。单向绑定<!DOCTYPE html><html lang="en">&l...原创 2019-11-07 22:15:19 · 4111 阅读 · 1 评论 -
Vue父子组件传参和通信
Vue父子组件之间通信相对比较简单,如果非父子间通信则比较麻烦,可以考虑使用vuex。土办法缺点:父子组件高度依赖。父 > 子使用ref实现。Parent.vue<template> <div> parent <br> <button @click="add()">child +1&l...原创 2019-11-09 13:17:49 · 3951 阅读 · 0 评论