vue-json-editor可视化编辑器 最近项目中有用到json编辑器,我选用了这款vue的编辑器,看起来也是比较简洁,接下来就具体介绍一下它,以及内部属性. 一.vue-json-editor的简介 vue-json-editor可以编辑json数据,也可以对其进行格式化,我用于请求报文和响应报文的展示和上传,基本满足想要的功能,界面比较简单. 二.安装vue-json-editor 在目标文件夹中安装插件. // 键入命令安装插件 npm install vue-json-editor

一.效果 图1 图2,点击报错之后,又变成图1的效果 二.使用到了element UI中的以下组件: <el-button> <el-input> 三.使用的关键点是vue中的v-if指令 四.关键代码如下 HTML部分 <div class="content-wrapper"> <div> <el-button type="primary" icon="el-icon-plus" @clic

登录与注册功能都已经实现,现在是时候来开发文章编辑功能了. 这里咱们就使用 markdown 作为编辑语言吧,简洁通用.那么我们就需要找一下 markdown 的编辑器组件了,而且还要支持 vue噢. 若羽这里找到的一个是 mavonEditor,在 github 上有2k+ 的 star.文档也都是中文的,比较友好. mavonEditor地址 添加组件 && 新建编辑组件 首先来安装一下编辑器: npm install mavon-editor --save 然后在 main.js 中

创建table实例页 views/table.vue <template> <h1>table page</h1> </template> <script> import { getTableData } from '@/api/data' export default { data () { return { tableData: [], columns: [ { key: 'name', title: '姓名' }, { key: 'age'

在编辑该行的过程中,突然不想编辑了,想点击撤销按钮,将该行数据恢复到旧值,目前的做法是,在点击编辑按钮的时候转换成json字符,点击撤销按钮的时候再解析成对象,赋值给该行的数据. // 编辑editHandle (item) { this.dialogEdit = true this.editRow = JSON.stringify(item) this.editData = JSON.parse(this.editRow); },

先上效果 <template> <div> <el-table :data="tableData" style="width: 100%"> <div v-for="(item,index) in tableTitle" :key="index" > <el-table-column :prop="item.prop" :label="item

<template> <div> <div id="example-container" class="wrapper"> <HotTable ref="testHot" :root="root" :settings="hotSettings"/> <el-button type="primary" size="small&

在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托管在GitHub中,供下载并理解. vue项目自动生成完毕后,继续在命令行窗口输入cd swiper-test,将目录切换到swiper-test. 下面就开始启动vue项目了,输入启动命令行:npm run dev. 打开浏览器输入网址:localhost:8080 环境搭好了,进入主题,要想引入

模块化开发   使用vue-cli创建项目   1. vue-router模块化   引入vue-router cnpm install vue-router -S 1.1 编辑main.js import Vue from 'vue' import App from './App.vue' import vueRouter from 'vue-router' import routerConfig from './router.config.js' //使用vue-router Vue.use

接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热更新加载 2. 安装兼容环境变量的包 cross-env (1)原因: 构建项目时分生产环境和开发环境,此时webpack需要配置production和development模式,需要使用一个变量来作条件判断,而不同的平台上设置环境变量方式不同,在Mac平台是 NODE_ENV=production

1---- 2----  输入vue,  选 vue.json 3----  在vue.json中编辑, 有说明 a.  tab符,要用空格, 也可以转义 4----   新建vue文件, 输入自定义的关键字, 就出现了 5----  上图的 自定义的 vd 代码段 "demo": {         "prefix": "vd",         "body": [             "<templat

没想到隔了这么久才来更新. 用vue做简历,不是非常适合,为什么呢. 因为简历没什么数据上的操作,一般都是静态的内容. 不过都说了用Vue来做,也只能强行续命了. 这里是我做好的成品  非一般简历 由于未涉及页面跳转,所以没有vue-router 想要实现如网页中的功能,首先我们要使用fullpage.js插件 这也是jquery的插件之一,官网地址 他可以让我们的页面实习全屏滚动效果. 本来式通过 npm 进行安装使用的,结果... 3版本需要许可证书,ok,我在网站找了一个以前的,下载下来用

本着苍蝇虽小也是肉的精神...... 目标: 我们希望每次新建.vue文件后,VSCODE能够根据配置,自动生成我们想要的内容. 方法: 打开VSCODE编辑器,依次选择"文件 -> 首选项 -> 用户代码片段",此时,会弹出一个搜索框,我们输入vue, 如下: 选择vue后,VSCODE会自动打开一个名字为vue.json的文件,复制以下内容到这个文件中: { "Print to console": { "prefix": &quo

webstorm 因为之前开发ReactNative的时候,选择了webstorm,这回转战Vue,自然还是用它.如果什么也不做的话,打开Vue工程,编辑区域基本上没有语法高亮.怎么办呢? 安装插件(以mac版本为例,window下面应该大同小异) 1. 打开偏好设置,从左边找到Plugins 2. 点击Browse repositories...,然后搜索Vue,进行安装 3. 添加Vue模板 <template> </template> <script> expor

Vue本地代理举例: module.exports = { publicPath: './', devServer: { proxy: { '/api': { target: 'https://movie.douban.com', ws: true, changeOrigin: true, pathRewrite: { '^/api': '' } }, '/bpi': { target: 'https://cdnopenapialifc.agaege.com/', ws: true, chang

安装node.js最新版 这里安装的是8.11.4版   image.png 更新npm至最新版 安装node.js后, npm默认版本为: 6.1.0   image.png 使用npm install npm -g更新npm至最新版   image.png 安装vs code 安装过程就忽略了. 安装@vue/cli > npm install -g @vue/cli   image.png 创建一个vue-demo-project工程 创建过程中默认配置(开箱即用)   image.png

1. 官方文档 https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show 2. v-if 和 v-show 的区别 2.1 官方解释 v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块.相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单

一.项目概况 基于Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技术仿制微信电脑端界面聊天室实例,实现消息发送/动态表情,图片/视频预览,拖拽图片/粘贴截图发送,朋友圈/红包/换肤等功能. 二.效果图 三.技术栈 框架技术:electron + electron-vue + vue 状态管理:Vuex 地址路由:Vue-router 字体图标:阿里iconfont字体图标库 弹窗插件:wcPop 打包工

感谢:https://www.jianshu.com/p/5d9b341d650f 总结: 1.<router-link to=''>主要实现跳转链接功能,属性to='/'即是跳转到path为'/'的路径. 2.v-bind动态绑定指令,格式为:v-bind:你要动态变化的值="表达式" 3.v-for列表渲染例:<tr v-for="item in peoples"> <td> {{item.name}} </td>

一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码组件是自定义元素(对象) 2. 定义组件的方式 方式1:先创建组件构造器,然后由组件构造器创建组件方式2:直接创建组件 3. 组件的分类 分类:全局组件.局部组件 4. 引用模板 将组件内容放到模板<template>中并引用 5. 动态组件 <component :is="">组件多个组件使用同一个挂载点

参考:https://www.jianshu.com/p/104bbb01b222 Vue 页面加载数据之前增加 `loading` 动画 创建组件 1.新建 .vue 文件: src -> components -> laoding -> index.vue 2.编辑 index.vue 文件 <template> <div class="loading"></div> </template> <script&g