computed属性：计算属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></scrip...
vue 实例介绍 vue 实例分两种，一种为组件实例，另外一种为根实例。组件实例负责创建个性化组件、而根实例负责把组件渲染到指定的真实的 DOM 结构中。并且 vue 为我们提供了一种特殊的文件格式 .vue 来创建 组件实例。.vue 文件格式如下：*.vue<template>... </template><script>export default {data(){return {}}} </script><style lang="less" scoped></style>通过上面的代码，我们可以看出，整个 .vue 文件分为三个部分：te...
1.这种方法页面会一瞬间的白屏this.$router.go(0)2.这种也是一样，画面一闪location.reload()3.搭配provide、inject使用首先在主页面 app.vue设置： <keep-alive include="GjTable"><router-view v-if="isRouterAlive"></router-view></keep-alive>设置：scriptexport default {provide () {return {reload: this.reload},data () {return {isRouterAlive: true}},methods: {reload () {this.isRouterAlive = falsethis.$nextTick(...
<template><div class="n-header"><ul class="title-wrapper"><li class="n-fliter">筛选:</li><li v-for="(item,index) in titles" :key="item.id" class="n-title" @click="select(index)" :class="{‘active‘: item.show?‘active‘: ‘‘}"><a href="#"><span v-show="item.show"></span>{{item.sort}}</a></li></ul></div></template><script> export default {data() {return {titles: [{ sort: "全部", show: true },{ sor...
需求需要根据不同的角色来显示不同的菜单问题系统是前后分离模式开发的，出现了后端接口和前端路由都需要权限管理。思路后端的接口肯定得验证权限前端的路由通过后端发回的json动态生成，对于比较细粒度的可以通过css来控制和隐藏方案使用vue-router的router.addRoutes(routes)来动态生成路由。注意事项vue-router 是按照路由表里的顺序来查找路由的，如果你的404页面在动态添加的路由前面，则需要把404路由单独移出来，最后再添加...
需求：将页面中DIV内容块（包含svg流程节点）生成图片并直接下载到用户本地，并且不影响之前的svg图的使用实现：1、安装依赖cnpm install --save html2canvas cnpm install --save canvg@2.0.0-beta.1 canvas@^2 jsdom@^13 xmldom@^0 2、引入依赖import html2canvas from "html2canvas"; import canvg from "canvg"; 3、代码实现主要是两个问题SVG无法显示： 借助canvg将svg转canvas不能影响原有的元素显示：上一步会改变原有的dom...
1.动画基础使用：给哪个元素添加动画，只需要给元素用<transition>标签包裹起来就可以<transition><div class="box" v-show=‘isShow‘></div> </transition>之后去样式中设置6个类名即可 .v-enter {opacity: 0;}.v-enter-to {opacity: 1;}.v-enter-active {transition: all 2s;}.v-leave {opacity: 1;}.v-leave-to {opacity: 0;}.v-leave-active {transition: all 2s;}如果页面中有多个元素需要添加不同的动画，那么只需要给<tran...
本文重点介绍Vue单页面应用的优化手段：异步加载面切换时加loading特效点击延迟inline manifest逻辑代码优化依赖包体积优化cdn引用Vue代码优化异步加载所谓的异步加载组件，其实就是组件懒加载。可以理解为：当我需要使用组件的时候才进行加载。主要包含两部分：路由配置和子组件的调用。所以在router文件夹下 index.js 做如下配置组件优化由于是后台项目，所以选择element-ui框架进行后台系统搭建，所以对这个进行优化也可以减小体...
1、vue的路径通过新建的项目的导入：得到绝对路径“@/.....”import LoginPage from‘@/components/LoginPage‘2、2.1、vue init webpack project, project是你创建的文件夹名2.2、npm install就像其他的项目内的sbt导入依赖包和相关的包文件的导入进入项目，下载依赖：（进入项目一定要切换到项目路径）1npm install 或者 cnpm install 2.3、运行项目：npm run dev 3、不同的创建vue项目的方式，没有试过 npm install -g @vu...
什么是路由后端路由对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上的资源前端路由对于单页面应用程序来说，主要通过URL中的hash(#)来实现不同页面的切换，hash有一个特点，HTTP请求中不会包含hash相关的内容。所以单页面程序中的页面跳转主要用hash实现。这种通过hash改变来切换页面的方式叫做前端路由。 原文：https://www.cnblogs.com/lianglanlan/p/10279039.html
1.代码生成器： [正反双向](单表、主表、明细表、树形表，快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面、建表sql脚本、处理类、service等完整模块2.多数据源：（支持同时连接无数个数据库，可以不同的模块连接不同数的据库）支持N个数据源3.阿里数据库连接池druid,安全权限框架 shiro（菜单权限和按钮权限）, 缓存框架 ehcache4.代码编辑器，在线模版编辑，仿开发工具编辑器5.调用摄像头拍照 自定义裁...
前言：很多人说jquey和vue没有什么可比的，应该和Angular，React来比吧，我到觉得他们倒没有多大的可比性，都是基于mvvm思想设计的框架，无非就是实现的方式不一样，在不同场景下性能上会有一些差异。然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据上去，难道不是一个根本性的改变吗？ 1.jquery介绍：想必大家都用过jquery吧，这个曾经也是现在依然最流行的web前端js库，...
问题描述：前端需要修改restful API的url，但是打包之后，配置文件找不到了，如果在npm run build 生成dist后，这个配置也被写死了，传到运行的前端服务器上后，假设某次，api服务器的ip修改了，改动只是更新下这个url，但是却需要会到前端源码，url后，在重新npm run build,然后再把整个dist再重新传到前端服务器，才可以。解决方法：用了generate-asset-webpack-plugin 这个插件，在webpack.prod.conf.js中去生成configServer.js...
使用Vue-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式先安装插件.Vetur+ Prettier + ESlint1、ESlint设置 文件.eslintrc.js中的配置 1 module.exports = {2 root: true,3 env: {4 node: true 5 },6‘extends‘: [7‘plugin:vue/essential‘,8‘eslint:recommended‘ 9 ], 10 parserOptions: { 11 parser: ‘babel-eslint‘12 }, 13 rules: { 14‘no-console‘: process.env.NO...
引用vue-touch之后，页面里多了一个css属性 只要给这个元素一个新的CSS覆盖就行了。但写的时候发生一个小插曲，加了一个touch-action: pan-y!important;没起作用。后来发现原来是<v-touch v-on:swipeleft="getNext" v-on:swiperight="getPrev" tag="div" class="v-touch">在引用之后会变成<div>标签所以只需要给后面加一个class标识就可以了。class="v-touch" .v-touchtouch-action: pan-y!important;最后给一个CSS属性变OK了。 ...