【vue中$refs, $emit, $on, $once, $off的使用详解】教程文章相关的互联网学习教程文章

Vue+Django项目部署详解

本地项目配置1 复制 luffy/settings/dev.py为prop.py修改luffy/settings/prop.py中以下几项 (1) allow_hostsALLOWED_HOSTS = [api.youdomain.com, ](2) 跨域白名单CORS_ORIGIN_WHITELIST = (# 前端域名"www.youdomain.com", # 后端api接口域名"api.youdomain.com" ) (3) 支付宝电脑网站支付配置信息ALIPAY_APPID = "xxxxxxx" APP_NOTIFY_URL = None ALIPAY_DEBUG = True # APIPAY_GATEWAY="https://openapi.alipay.com/gateway.do"...

vue-test-utils初使用详解

vue-test-utils官网:https://vue-test-utils.vuejs.org/zh/jest官网:https://jestjs.io 依赖包请安装它们 yarn add @vue/test-utils vue-jest yarn jestjest-serializer-vue yarn add babel-jest babel-core@^7.0.0-bridge.0??:vue-jest依赖与babel-core。我们的环境现在都是babel7,通过npm安装的babel-core默认的还是6版本,所以要指定babel-core安装的系列为7,否则会出现解析问题。 配置jest配置:告诉jest它需要哪些额外的...

vue.js表单验证插件(vee-validate)的使用教程详解【图】

综述名称:vee-validate 用途:简单的 Vue.js 表单验证插件 官网:地址 github:地址特别提示配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样 插件既可以应用于SPA也可以应用于多页面,通用性强安装单页安装npm install vee-validate --save浏览器安装 <!-- unpkg --><script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script> 引入项目单页引入import Vue from vue; import VeeValidate from vee-vali...

vue elementui el-form rules动态验证的实例代码详解【图】

一、介绍 简介:在使用elementUI el-form 中,对于业务不同的时候可能会产生不同表单结构,但是都是存在同一个表单控件el-form中。 图片介绍: 1、在用户选择单选或多选时会有A,B,C,D,E五个选项2、在用户选择简答题时只会题干,答案以及解析选项(主要是通过v-if来进行判断)问题引入:当用户选择不同的题库时会产生不同的form表单选项,这个时候在进行表单提交验证的时候就需要根据不同试题类型进行判断,这个时候就需要两个rules...

Vue中的组件及路由使用实例代码详解

1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。通常一个应用会以一棵嵌套的组件树的形式来组织; 1.1组件的声明及使用 全局组件<body><div id="app"><!-- 用全局组件的名称作为HTML的标签 --><myzujian></myzujian></div></body> <script>//设置全局组件Vue.component("myzujian",{template:"<h2>我是全局组件</h2>"});var app=new Vue({el:"#a...

一文快速详解前端框架 Vue 最强大的功能【图】

组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式,如props、 $emit/ $on、vuex、 $parent / $children、 $...

vue项目添加多页面配置的步骤详解

公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置。看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面。而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的。 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加。这里做下记录、总结,方便以后复用。如果还能有幸帮助到有同样需求的童鞋的话,那就更好了。...

详解vue 在移动端体验上的优化解决方案【图】

去年年底自己搭了一个vue在移动端的开发框架,感觉体验不是很好。上个星期又要做移动端的项目了。所以我花了两天时间对之前的那个开发框架做了以下优化 自定义vuex-plugins-loading路由切换动画 + keep alive 动态管理缓存组件better-scroll与vue的最佳实践(better-scroll的vue化)自定义指令(vue-finger:包括点击,长按,双击,拖拽移动,多点触控,滑动,旋转,缩放手势)移动端适配方案如何分情况处理页面置顶路由懒加载自定义 ...

vue 地图可视化 maptalks 篇实例代码详解【图】

Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发: - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等 - 很认真的优化了绘制性能 - 很重视测试, 有接近 1.5K 个单元测试用例, 所以稳定性还不错, 已经应用在很多大大小小的系统上了 上面是一段 maptalks 官方介绍,下面来创建工程。首先利用 vue-cli3 搭建一个 SPA ...

vue element-ui之怎么封装一个自己的组件的详解【图】

为什么要进行组件封装? 封装的目的就是为了能够更加便捷、快速的进行业务功能的开发。组件(component)是vue的最强大功能之一,组件可以实现一些类似功能的复用及与其它业务逻辑的解耦。在开发中,我们难免会写很多类似的、重复的代码,有时候两个业务模块有相似的功能,采用复制粘贴已经很省事,但如果涉及的字段或有一些小差别,你也会觉得很烦,毕竟你要从头到尾瞅着去改动。这时候如果把那些相同的功能,抽象出来抽离成组件,...

vue-cli3 配置开发与测试环境详解【图】

需求首先介绍一下本项目的背景,是基于 vue-cli3.1.1 的单页应用,目前测试环境和生产环境都在线上,并且都在同一个域名下,其中生产环境部署在根目录下,测试环境部署在名为 test 的子目录下,根据生产环境和测试环境的不同,某些界面和交互有细微的差别。 根据以上项目的基本情况,分析出需求如下: 实现区分线上生产环境和线上测试环境的环境变量,供项目代码中全局使用。实现输入一行命令,执行两条指令,分别打包线上生产环境...

vue中引入mxGraph的步骤详解

第一步:下载npm包npm install mxgraph --save 第二步:新建一个index.js文件 文件内容如下 import mx from mxgraph; const mxgraph = mx({mxImageBasePath: ./src/images,mxBasePath: ./src }); // decode bug https://github.com/jgraph/mxgraph/issues/49 window.mxGraph = mxgraph.mxGraph; window.mxGraphModel = mxgraph.mxGraphModel; window.mxEditor = mxgraph.mxEditor; window.mxGeometry = mxgraph.mxGeometry; window...

vue中使用mxgraph的方法实例代码详解

1、npm 引入 npm install mxgraph --save 2、这个模块可以使用require()方法进行加载。它将返回一个接受对象作为选项的工厂函数。必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量。 var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })工厂函数返回一个“命名空间对象”,通过它可以访问mxGraph包的所有对象。例如,mxEvent对象在mxgraph.mx...

详解VUE调用本地json的使用方法【图】

开始的时候我以为,用vue去调取json要多么的麻烦,完咯就先去的百度,找了几个,看上面又要配置这配置那的,看的我都头大,像一些思维逻辑清晰的肯定不会出现这种情况。 下面我说下我这的情况,大家依情况代入 当然vue你刚开始创建的话,你是要去配置下东西,下面我说的是你的项目能够跑起来的情况,完咯再去想办法去引用json,当然我这里用的也是axios的获取方法,如果不是这种方法的可以带过了 首先你要知道那你的json应该放在哪...

详解Vue-Router源码分析路由实现原理【图】

深入Vue-Router源码分析路由实现原理 使用Vue开发SPA应用,离不开vue-router,那么vue和vue-router是如何协作运行的呢,下面从使用的角度,大白话帮大家一步步梳理下vue-router的整个实现流程。 到发文时使用的版本是: - vue (v2.5.0) - vue-router (v3.0.1)一、vue-router 源码结构 github 地址:https://github.com/vuejs/vue-routercomponents下是两个组件<router-view> 和 <router-link> history是路由方式的封装,提供三种...