vue

基于 vue 和 element-ui 实现的表单设计器，使用了最新的前端技术栈，内置了 i18n 国际化解决方案，支持生成element 和 antd-vue 表单，让表单开发简单而高效。 在线预览 使用文档 特性 可视化配置页面 提供栅格布局，并采用flex实现对齐 一键预览配置的效果 一键生成配置json数据 一键生成代码，立即可运行 提供自定义组件满足用户自定义需求 提供远端数据接口，方便用户需要异步获取数据加载 提供功能强大的高级组件 支持表单验证 快速获取表单数据 国际化支持 组件 MakingForm 表单设计器（基于可视化操作快速设计出表单页面，并获取到表单配置 json 数据）。 GenerateForm 表单生成器（根据设计器中获取的配置 json 数据，快速渲染出表单页面）。 效果图 联系我们 如果大家在使用中过程中有任何问题欢迎 联系我们。也可以直接加入我们qq群进行讨论：985558286 来源： 51CTO 作者： wx5e551dec271a1 链接： https://blog.51cto.com/14733268/2473601

vue 使用用户名和密码成功登录后，获取返回结果header中的token信息，存储到cookie中，发送请求时从cookie中获取token auth.js import Cookies from 'js-cookie' const TokenKey = 'vue_admin_template_token' export function getToken() { return Cookies.get(TokenKey) } export function setToken(token) { return Cookies.set(TokenKey, token) } export function removeToken() { return Cookies.remove(TokenKey) } request.js ,编写request和response拦截器，获取header中的Authorization信息对token进行更新，request拦截器对发送请求时在header中加入Authorization 的token信息。 import axios from 'axios' import { Message, MessageBox } from 'element-ui' import store from '../store' import { setToken,

1. data 数据 　　methods 方法 　　watch 监听变化 2. 模版指令（类似 angular） {{}} v-text 渲染数据 v-html html 结构 3. v-if v-show 控制模块隐藏 v-if 直接不渲染 dom 元素 v-show display:none 进行隐藏 代码中有 4. v-for 渲染循环列表 ： v-for item 是循环体的对象 data: { 　　items:[ 　　{ 　　label:'apple' },{ 　　label: 'banana' } ] } <ul> 　　<li v-for='item in items'> 　　　　<p v-text='item-label'></p> 　　</li> </ul> 5. v-on 绑定事件 v-on:click="doThis" method: { 　　doThis: function(sonmeThing){} ++ .22233+00. } 6. v-bind 绑定属性 来源： https://www.cnblogs.com/youngchou/p/6834737.html

从入口文件index.js中我们可以看到暴露出了一个VueRouter类,这个就是我们在 vue 项目中引入 vue-router 的时候所用到的new Router() 其中具体内部代码如下(为了方便阅读,省略部分代码) export default class VueRouter { constructor (options: RouterOptions = {}) { this.app = null this.apps = [] this.options = options this.beforeHooks = [] this.resolveHooks = [] this.afterHooks = [] this.matcher = createMatcher(options.routes || [], this) let mode = options.mode || ‘hash’ this.fallback = mode === ‘history’ && !supportsPushState && options.fallback !== false if (this.fallback) { mode = ‘hash’ } if (!inBrowser) { mode = ‘abstract’ } this.mode = mode switch (mode) { case

最近用VUE做了个项目，觉得VUE确实很有趣，其中双向绑定是最吸引人的特性了。 绑定文本框 用React写一个文本框： class TextBox extends Component { constructor(props) { super(props); this.state = { txtValue: 'hello world' }; this.setTxtValue = this.setTxtValue.bind(this); } setTxtValue(e) { this.setValue({txtValue: e.target.value}) } render() { return ( <div> <input type="text" onChange={this.setTxtValue} value={this.state.txtValue} /> </div> ) } } 为了取数据要专门写个事件处理，还要bind，很啰嗦，要是来十个文本框，手指受不了，眼睛也受不了。 让我们看看VUE的伟大吧 <template> <div> <input type="text" v-mode="txtValue"> </div> </template> <script> export default { data() { return { txtValue: 'hello

vue-alain 是基于 vue 和 Ant Design of Vue（Ant Design 的 vue 版本） 基础组件库的中后台前端，使用 vue vue cli 3.0 typescript antd antd pro Ant Design Vue 技术栈，参考并使用了 ng-alain 相关内容，秉承 Ant Design 的设计价值观。 github--https://github.com/vue-alain/vue-alain 预览：https://vue-alain.github.io/ 来源： CSDN 作者： Misnice 链接： https://blog.csdn.net/Misnice/article/details/104495820

Vue中监听窗口关闭事件并在窗口关闭前发送请求，代码如下： mounted() { window.addEventListener('beforeunload', e => this.beforeunloadHandler(e)) window.addEventListener('unload', e => this.unloadHandler(e)) }, destroyed() { window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e)) window.removeEventListener('unload', e => this.unloadHandler(e)) }, methods: { beforeunloadHandler(){ this._beforeUnload_time=new Date().getTime(); }, unloadHandler(e){ this._gap_time=new Date().getTime()-this._beforeUnload_time; debugger //判断是窗口关闭还是刷新 if(this._gap_time<=5){ //如果是登录状态，关闭窗口前，移除用户 if(!this.showLoginButton){ $

情景描述：子组件是一个省市区三级地址组件，父组件通过向子组件传一个对象，使其有一个默认的地址。父组件向子组件传递省市区名称，子组件根据名称，使用计算属性获取对应地址列表。 父组件向子组件传一个对象，模型如下 子组件有一个默认的对象，模型如下。 使用子组件currentAreaInfo对象接收父组件传过来的areaInfo对象 问题：在切换省份时，城市显示的是默认的城市列表，地区也是一样 解决方法：让父组件和接收其传过来的对象的子组件对象，结构保持一致。 究其原因，如果父组件缺少一些字段，即使将父组件传过来的对象直接赋值给子组件对象，缺失的字段没有set、get方法，就无法触发计算属性 来源： CSDN 作者： yyy2567338788 链接： https://blog.csdn.net/yyy2567338788/article/details/104505305

嵌套路由 当我们不满足与 /home这种路由，而是希望通过 /home/news和/home/message访问一些内内容 那么就需要嵌套路由了 实现嵌套路由有两个步骤： ·创建对应的子组件，并且在路径映射中配置对应的子路由（注意：路由的定义也需嵌套）　　　　　　 ·在组件内部使用<router-view>标签 　　　　　　 　　　　　　 　　　　最后。在浏览器的地址栏就是这种形式了 　　 query传值 　　之前我们传值，是通过/user/3这种param形式。 　　但是，当我们的需求发生变化，传的值的个数增加时，就需要用到query形式的传值了(/user?name=tom&age=3) 　　·定义传值 　　 　　·接受传值（为什么这里用$route?因为route用的是当前路由对象） 浏览器展示为： 来源： https://www.cnblogs.com/cl94/p/12363528.html

最新在使用codemirror，整理了一下使用心得，仔细看下官网文档，看个一两天肯定就熟悉了 1. hint (1) javascript-hint: a: 在源文件javascript-hint.js中下面代码修复空字符串时也会有代码提示出现。 ```javascript if (token.string == "") { return {list:{}};; } ``` b: 使用“cursorActivity”事件而不是"change"事件来监听显示代码提示，防止页面卡死。 2. mode: (1) json模式应该将mode属性设置为: application/json 3. lint: (1) json-lint：使用json-lint还需要找到json-lint.js，并且在代码顶部手动添加一个全局的jsonlint对象。 安装jsonlint依赖，将jsonlint指向这个依赖 需要将jsonlint.js最头上的#....这段删除，否则使用require引入失败 4. autoRefresh (1) autoRefresh用于刚进入页面时，编辑器自动刷新一次。只有这样才能自动获取光标并且显示完整的编辑器。autoRefresh只会运行一次。 来源： CSDN 作者： Hws有梦想 链接： https://blog.csdn.net/qq_37028216