vue

特别注意 ： Springboot 工作流 前后分离 + 跨域 版本 （权限控制到菜单和按钮） 后台框架： springboot 2.1.2+ activiti 6.0.0+ mybaits+maven+接口 前端页面：html +vue.js 形式 jquery ajax 异步跨域 json 格式数据交互 前后分离，前后台分开部署 （特别注意，前端用的vue.js, 就是html页面引入vue.js形式， 用tomcat部署运行，更适合后台开发者） 工作流模块 ---------------------------------------------------------------------------------------------------------- 1. 模型管理 ：web在线流程设计器、预览流程xml、导出xml、部署流程 2. 流程管理 ：导入导出流程资源文件、查看流程图、根据流程实例反射出流程模型、激活挂起 3. 运行中流程 ：查看流程信息、当前任务节点、当前流程图、作废暂停流程、指派待办人 4. 历史的流程 ：查看流程信息、流程用时、流程状态、查看任务发起人信息 5. 待办任务 ：查看本人个人任务以及本角色下的任务、办理、驳回、作废、指派一下代理人 6. 已办任务 ：查看自己办理过的任务以及流程信息、流程图、流程状态(作废 驳回 正常完成) 注：

vuex 一、是什么 是一个专为vue.js应用程序开发的转态管理（共享） 二、如何用 提示：若在创建项目时没有安装vuex，则需要执行第一步；若在创建项目时，已选择安装了vuex，则可以跳过第一步，直接第二不 第一步：安装 npm方式：npm install vuex --save cnpm方式：cnpm i --save vuex yarn方式：yarn add vuex 第二步：引入 import Vuex from 'vuex' 第三步：导出vuex的store库 export default new Vuex . Store ( { } ) 三、核心概念 （一）state 用于存放公共状态（全局状态） （二）mutation 提交更新数据的方法，通过commit提交且必须是同步的，若是异步的则需要在action中通过commit提交 唯一修改状态的地方 （三）action 支持异步操作，需要通过提交mutation来变更状态，不能直接更改 （四）getter 对“全局状态”进行数据处理，类似于vue中的计算属性 （五）module 模块化vuex，在vuex中只能有一个store，为了防止多人修改，我们可切割成子store，再通过module合并成唯一一个大的store对象，这样可以让每一个模块拥有自己的state、action、mutation、getter

Vue 2.0 不再支持在 v-html 中使用过滤器 解决方法： 1：全局方法（推荐） 2：computed 属性 3：$options.filters（推荐） 1：使用全局方法： 可以在 Vue 上定义全局方法： Vue.prototype.msg = function（msg）{ 　　return msg.replace（"\n"，"<br>"） }； 然后所有地方上都可以直接用这个方法了： <div v-html="msg(content)"></div> 2：computed 属性 var appMain = new Vue({ 　　data:{ 　　　　content："XXX" 　　}， 　　el："#appMain"， 　　computed：{ 　　　　content：function(msg){ 　　　　　　return msg.replace("\n"，"<br>") 　　　　} 　　} }) 页面上： <div>{{content}}</div> 3：$options.filters： 在定义的vue里的filter添加方法： var appMain = new Vue({ 　　el："#appMain"， 　　filters：{ 　　　　msg：function(msg){ 　　　　　　return msg.replace(/\n/g，"<br>") 　　　

因为vue是单页面应用，进入其他页面时会销毁该页面，用keep-alive不让其刷新，具体实现为： 在App.vue中加入： index.js页面 这样在index.vue中，mounted方发只走一次，在浏览器上实现了返回原来滚动位置的目的。但是在手机上测试，发现没用，解决手机上实现目的的方法： 版权声明：本文为CSDN博主「全易」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_42618566/article/details/91045458 来源： CSDN 作者： 小小雪花儿 链接： https://blog.csdn.net/qq_43671996/article/details/104605360

Vue常用的修饰符有哪些？ Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。 .prevent : 拦截默认事件 .passive: 不拦截默认事件 .stop : 阻止冒泡事件 .self : 事件不是从内部元素触发的，是前元素自身时触发处理函数 .self.prevent 只会阻止对元素自身的点击。 .once : 只会触发一次 .capture ：事件侦听，事件发生的时候会调用 vue的单页面应用有啥优缺点？ 优点： Vue的目的是通过尽可能简单的API实现相应的数据绑定和组合视图组件，核心是响应式数据绑定，MVVM 轻量、组件化、简洁、高效、快速 缺点： 不支持低版本浏览器，最低只支持IE9 不利于SEO的优化 第一次加载页面耗时相对长一些，不可以使用浏览器的导航按钮需要自行实现前进和后退 路由，$route和$router有什么区别？ route 表示路由信息对象，包括path,params,hash,query,fullpath,matched,name等路由信息参数 router表示路由实例对象，包括了路由的跳转方法，钩子函数等。 vue-Router中有哪些导航守卫? 「全局前置钩子」：beforeEach,beforeResolve,afterEach 「路由独享守卫」：beforeEnter 「组件内部守卫」

官方文档说明 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli 。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。 可以使用下列任一命令安装这个新的包： npm install -g @vue/cli # OR yarn global add @vue/cli 安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue ，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。 你还可以用这个命令来检查其版本是否正确： vue --version 总结 #卸载原先的vue-cli npm uninstall vue-cli -g #安装最新版的vue-cli npm install -g @vue/cli 参考文档 Vue官方文档 : https://cli.vuejs.org/zh/guide/installation.html 来源： CSDN 作者： David-Hsiang

Vue-自学笔记 Vue (读音 /vjuː/，类似于 view ) 是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链 以及各种 支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 总之一句话：有问题，查官网。本笔记只适合学习复习使用。如果学习话，请自行查阅 Vue官网 。 本笔记来源于：自学过程， 参考Vue官方文档 。——大娃 基础 安装 https://cn.vuejs.org/v2/guide/installation.html 相关版本介绍 1. 直接引用 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 2. CDN <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> 3. 模块化构建 <script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js' </script> 起步 声明式渲染

表单与 v-model / Component 内容包含：v-model / component(全局注册/局部注册/父子组件之间传递数据/slot/动态组件等..) 哈哈，又是 demo 和基础概念理解。 边写 demo 边理解总结，花费两天终于完成，我要缓一天去学学 webpack ，接着回来再战 Vue。 这边博文会略长，因为有关于组件的各个例子的 demo~全部敲一遍才能理解得更快嘛。 v-model 你可以用 v-model 指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 Vue 的官方文档： v-model v-model 的 demo ： JSbin Component Vue 关于 组件的官方文档： Component 定义：组件是可复用的 Vue 实例 作用：提高代码的复用性 关于 component 的 demo： JSbin 全局注册 <div id="app"> <!-- 2.引入组件 --> <div-component></div-component> </div> // 1.注册组件 Vue.component('div-component',{ template:'<div>I\'m component</div>' }) var app = new Vue

理解 Vue中有个非常重要的核心思想，就是组件化，组件化是为了代码复用 什么是组件化 组件化，就像一个电脑主机里的主板，有内存条的插口，有硬盘，光驱等等的插口，我们的项目，就像一个电脑主机，通过各种组件化的模块（硬盘、内存等），来拼合成一个完整的电脑。 如图，每一个块都是一个组件，由许许多多的组件拼合而成，可以无限的嵌套下去 组件化的好处 模块复用，提高效率，让重复的代码只写一遍。 预留个性化设置，可以保证模块，既通用，又可变。 提高可维护性，如果一个项目多个页面使用了同一个组件（例如消息弹框），如果修改弹框样式，只需要修改这个模块即可。 写法 cli模式 组件部分 <template> <div></div> </template> <script> export default { name:"myAlert" }; <style></style> 使用者部分 <template> <div> <myAlert></myAlert> <!-- 实例中使用组件 --> </div> </template> <script> import myAlert from '@/components/alert.vue';//导入自己写的组件 export default { components:{myAlert}//在这个vue实例中注册组件 }; </script> <style><

需求 后台系统 从后台获取允许访问的菜单列表，并在右侧菜单栏展示，但路由已在router.js中配置完成，此时无权限的路径不展示在前端页面，但用户仍可输入url进行访问。则需要解决该问题。 解决办法： 1.从后台获取的允许访问的菜单列表储存在vuex或localStorage中 2.在router.js中对需要进行需要校验权限的页面配置*meta: { requiresAuth: true }*属性 3.接下来在全局路由守卫里做判断，可在main.js中编写钩子函数对路由进行判断，与后台允许访问列表的菜单匹配的路径才可进入。 如下代码 从后台获取的菜单列表储存在vuex或localStorage中。 menuList = { ‘ / index’，‘ / Statistical’ } ; localStorage . setItem ( "menuList" , JSON . stringify ( menuList ) ) ; router.js中： { path : '/Statistical' , component : ( ) => import ( '../components/page/Statistical.vue' ) , meta : { title : '统计' , requiresAuth : true } } main.js中： import Vue