Vue.js

多页vue应用的单页面打包方法(内含打包模式的应用)

一、简介 关于如何以及为什么要构建多页vue应用,我们在上一篇文章中已经介绍过,感兴趣的请参考构建多页vue应用。本文我们要介绍的是,对于一个多页应用,如何单独打包其中一个(或几个)页面。 一般来说,多页应用不需要打包单个页面,这多个页面可以作为整个应用直接放在静态资源服务器上。不过我们也说过,多页应用的每个页面也可能会放在不同的服务器上,这时候如果往每个服务器上都放置完整的资源包,就会显得过于臃... »

详解Vue Cli浏览器兼容性实践

浏览器市场占有率 在处理浏览器兼容性问题之前,我们先来看一下现在的浏览器市场份额是怎样的,👇下面是来自statCounter的数据,基本上覆盖了全世界浏览器市场份额的统计,而且前端er经常使用的caniuse所拉取的浏览器数据就是来自statCounter。 世界范围 天朝范围 Plus移动端 分析 从统计数据可以看出,对于国内的PC端浏览器,QQ浏览器以及Sogou的占比还是挺高... »

vue实现学生信息管理系统

更多vue学习教程请阅读专题《vue实战教程》 »

Vue 打包体积优化方案小结

Vue-cli3 打包体积优化方案 前言: 公司项目完成后 ,打包完成后有1.18MB,其实感觉还行了,但是还可以有优化的地方,对于咱们有精益求精(有没有还是有点*数的)的精神下再去优化,可以先在项目中安装webpack-bundle-analyzer可以看到各个文件的大小 npm install webpack-bundle-analyzer -save-dev 在vue.config.js中进... »

Vue 基于 vuedraggable 实现选中、拖拽、排序效果

今天有个朋友说要做个效果:Vue实现拖拽排序,要有 checked,输出结果是排序后的,要全选,未选中的不能拖动。 其实我之前基于 Sortable 做过一个类似的效果。也给他看过了,没看太明白,他就自己基于 vuedraggable 实现了一下。 正好有点问题给他解决了一下。废话不多说,先上最终效果:Vue 拖拽排序效果 测试地址。下面就是最终效果图。 效果一:实现选中 和 全选效果 就下面这样... »

VUE页面中通过双击实现复制表格中内容的示例代码

上篇文章给大家介绍了Vue实现点击按钮复制文本内容的例子,喜欢的朋友可以点击查看,今天给大家分享VUE页面中通过双击实现复制表格中内容,通过示例代码讲解的非常详细,需要的朋友参考下吧! »

vue-router的hooks用法详解

而vue-router 4.0还是alpha的阶段,所以我认为现在去学习它有些为时尚早。依靠多年的开发经验,我很快就定位到了是vue-router的错误。vue-router里的hooks不过这时我突然灵光一现,vue 3不是受到了react hooks的启发才产生了Composition API的吗?那么估计vue-router肯定也会受到react-router的启发了!到此这篇关于vue-r... »

vue实现在线学生录入系统

最近一直在学Vue,这次做了一个简单的在线学生信息录入系统来巩固一下所学知识。 因为主要是巩固Vue的知识,所以数据也没放数据库,也没用JavaBean或者Servlet,直接写死到表单里了。 具体页面是这样的: 先罗列一下其中用到的Vue的知识点: ①v-for指令的使用 ②v-model指令的使用 ③v-on/@click指令的使用 再提一下可能会用到的知识点: ①JavaScript中对数组... »

vue实现输入框自动跳转功能

本文实例为大家分享了vue实现输入框自动跳转的具体代码,供大家参考,具体内容如下 <template> <div class="inputClass"> <div v-for="(item,index) in list" :key="index"> <input v-model="item.value" type="password" class="inp... »

VueCli4项目配置反向代理proxy的方法步骤

Vue Cli4创建项目之后,没有配置vue.config.js,如果直接发起axios请求,可能会引起跨域问题. 以豆瓣电影首页的最近热门 为例: axios({ method: "get", url: "https://movie.douban.com/j/search_subjects", params: { type: "movie", tag: "热门", page_limit: 50,... »

vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

到此这篇关于vue scroll滚动判断的实现的文章就介绍到这了,更多相关vue scroll滚动判断内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网! »

Vue自定义render统一项目组弹框功能

我们可以体会到,通常要弹出一个页面,需要创建一个页面 normalDialog.vue 包裹 dialogBody.vue ;需要 parent.vue 设置flag控制弹框显示隐藏, normalDialog.vue 关闭的时候设置 parent.vue 对应 flag 。如果一个项目弹框较多的时候,弊端将会更明显,大量的 isXxxDialogShow ,大量的 vue 文件。因此项目组急需一... »

VueJS实现用户管理系统

本文实例为大家分享了VueJS实现用户管理系统的具体代码,供大家参考,具体内容如下源代码 用户管理系统 添加用户 用户列表 序号 姓名 年龄 邮箱 操作 } } } } 删除 </butto »

vue通过v-html指令渲染的富文本无法修改样式的解决方案

我猜,这应该是vue编译的规范吧,未在虚拟dom中渲染的元素无法修改样式。.article-context img 到此这篇关于vue通过v-html指令渲染的富文本无法修改样式的解决方案的文章就介绍到这了,更多相关vue v-html富文本无法修改内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网! »

vue el-tree 默认展开第一个节点的实现代码

实际应用:默认展开第一层节点中的第一个节点: 效果图:总结到此这篇关于vue el-tree 默认展开第一个节点的实现代码的文章就介绍到这了,更多相关vue el-tree默认展开节点内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网! »

Vue初始化中的选项合并之initInternalComponent详解

今天给大家分享Vue初始化中的选项合并之initInternalComponent的相关知识,具体代码如下所示: export function initInternalComponent (vm: Component, options: InternalComponentOptions) { const opts = vm.$options = Object.create(vm.construc... »

基于Vue sessionStorage实现保留搜索框搜索内容

保留搜索框内容:利用sessionStorage来保存每次搜索框的内容。比如路由是carManage 键名就是carManageStor因为不止一个页面要实现这个效果,在进入页面时要进行一次取值,拿浏览器存储中的数据:sessionStorage.getItem为了好看,把获取的方法写到method里了,getDefaultStor routeName参数的话看你自己的路由名啦,从this.$ro... »

如何在vue中使用jointjs过程解析

在vue中引入joint.js的问题,之前在网上搜了很多,都没有给出一个确切的答案,捣鼓了两天终于弄明白了,做个记录。 首先,我参考了一篇来自stackoverflow的文章 看完这篇文章,大家应该至少大致怎么做了,下面我们来具体看一下: 首先在vue项目中运行npm install jointjs –save 然后在入口文件,我的是main.js,也有可能是app.js中加入下面两行... »

精读《Vue3.0 Function API》

首先官方回答了几个最受关注的问题:Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样?不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API。下面正式进入 Vue 3.0 Function API 的介绍。原因是 Vue 采用双向绑定,只有对象形式访问值才能保证访问到的是最终值,这一点类似 React 的 useRef() API 的 .... »

Vue组件为什么data必须是一个函数

接下来很好解释为什么 vue 组件需要 function 了:function Component()Component.prototype.data = function ()}var componentA = new Component();var componentB = new Component();componentA.data.age=55;console.log此时,compone... »

webpack安装配置与常见使用过程详解(结合vue)

webpack介绍和安装 webpack:前端模块化打包工具 安装webpack需要安装Node.js,Node.js自带软件包管理工具npm 查看自己的node版本: node -v 全局安装webpack cnpm install webpack -g 查看webpack版本 webpack –version 局部安装webpack cnpm install webpack ... »

vue实现信息管理系统

最近学习了vue,自己用bootstrap+vue写了一个信息管理系统,只有前端,没有后台,可以实现基本的增、删、改、查 具体效果在结尾处有附图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body,htm... »

40行代码把Vue3的响应式集成进React做状态管理

前言vue-next是Vue3的源码仓库,Vue3采用lerna做package的划分,而响应式能力@vue/reactivity被划分到了单独的一个package中。如果我们想把它集成到React中,可行吗?预览可以看到,完美的利用了reactive、computed的强大能力。其实computed内部也是一个effect。那么思路就显而易见了: 把selector包装在effect中执行,去... »

Vue实现点击箭头上下移动效果

<body> <div id="app"> <ul> <li v-for="(item,i) in list">{{item.name}} //i<list.length-1 需要的是0,1,2,3 需要四个向上的箭头 长度为5 减1之后长度为4 小于4就是0,1,2,3 <button v-show="i<list.length-... »

使用Vue+Django+Ant Design做一个留言评论模块的示例代码

1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下所示: 有一张user表和留言表,关系为一对多,留言表有父留言字段的id,和自身有一个一对多的关系,建表语句如下: CREATE TABLE `message` ( `id` int NOT NULL AUTO_INCREMENT, `date` datetime ... »

Page 1 of 275123»