Vue
~~
不愿秃头的阳某
入一行,爱一行,懂一行。
展开
-
简单粗暴vue实现截图
vue实现图片截取最近项目有一个需求,需要上传图片,但是客户上传的图片大小不一,所以我们需要规定客户的图片比例,但又需要是客户所需的,所以就想到了截图实现效果我们的架构是vue,所以用的是一个vue的截图插件安装插件:npm install vue-cropper --save-dev引入组件 import Vue from 'vue'; import { VueCropper }...原创 2020-04-14 11:29:20 · 11092 阅读 · 2 评论 -
vue+elementUI点击菜单添加tab
目录效果如下这个功能主要是靠elementUI的tab+Vuex来实现的,下面就来介绍如何实现的思路:首先我们正常点击菜单跳转页面是靠路由实现的,然后我们需要点击菜单生成tab页和设置显示的tab页,所以我们需要用Vuex定义一个数组options,用来存放添加进去的tab页,还有一个设置显示哪个tab页的属性activeIndex,所以在点击时我们把这个页面的信息存放到options里面...原创 2019-09-27 20:23:49 · 16409 阅读 · 19 评论 -
Jwt身份验证
目录什么是JwtJwt实现登录验证什么是JwtJSON Web Token (JWT),它是目前最流行的跨域身份验证解决方案JWT的精髓在于:“去中心化”,数据是保存在客户端的。JWT的工作原理是在服务器身份验证之后,将生成一个JSON对象并将其发送回用户,示例如下:{“UserName”: “Chongchong”,“Role”: “Admin”,“Expire”: “2018-...原创 2019-08-17 17:10:55 · 401 阅读 · 0 评论 -
elementUI入门和nodeJS环境搭建项目导入
目录ElementUI入门nodeJS环境搭建ElementUI入门ElementUI简介我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件ElementUI官网:http://element-cn.eleme.io/#/...原创 2019-08-05 11:50:24 · 728 阅读 · 0 评论 -
Vuex传值运用
文章目录Vuex是什么Vuex使用:Vuex传值Vuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”(数据仓库)让其在各个页面上实现数据的共享包括状态,并且可操作Vuex分成五个部分:1.State:单一状态树2.Getters:状态获取3.Mutations:触发同步事件4.Actions:提交mutation,可以包含异步操作...原创 2019-08-16 19:36:15 · 453 阅读 · 0 评论 -
SPA项目左侧树形菜单显示和顶部导航
目录Mock使用整体配置和效果显示Mock使用Mock.js是一个模拟数据的生成器,用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。我们可以不用返回后台就能获取直接想要的格式的数据,区别与Json的是它不是死的,json是定死的Mock使用:1、npm install mockjs -D 先下载引入所需文件,下载好后你的package.json会出现mock的版本...原创 2019-08-10 23:02:12 · 624 阅读 · 0 评论 -
SPA项目CRUD加表单验证
CRUD+表单验证今天同样在上次的基础上继续完善我们的功能,上次实现了动态树和数据表格,今天完善数据表格的增删改查,后台同样是用的SSH增删改查,博客地址:https://blog.csdn.net/qq_43517653/article/details/97611761同时我们利用ElementUI的Form组件自带的表单验证完善表单验证,Form组件提供了表单验证的功能,只需要通过 rul...原创 2019-08-14 18:06:29 · 259 阅读 · 0 评论 -
SPA项目开发实现登录注册
SPA项目所需配置npm install axios -Snpm install qs -Snpm install vue-axios -S这是开发需要 用到的库,axios相当于ajax的升级版,用来访问后台的,依次在cmd窗口执行就能下载了然后我们界面要用到element-UI,所以还要导入element-UI的库npm install element-ui -S 这是我的项...原创 2019-08-09 21:57:08 · 996 阅读 · 0 评论 -
SPA项目之动态树和数据表格
目录树形菜单数据表格和分页这是我的项目层级结构树形菜单今天是在上次的基础上改良,访问后台数据,动态显示树形菜单,然后菜单能点击跳转不同的页面.数据用的是上次SSH树形菜单和书籍增删查改的代码vue+element的el-menu组件实现路由跳转及当前项的设置,要实现路由跳转,先要在el-menu标签上添加router属性,然后只要在每个el-menu-item标签内的index属性设置...原创 2019-08-13 20:42:12 · 1544 阅读 · 0 评论 -
使用vue-cli搭建SPA项目
目录SPA项目搭建SPA项目路由嵌套案例SPA项目搭建今天的搭建是在nodeJS环境搭建好后的基础上实行搭建的什么是vue-clivue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下:vue init webpack xxx搭建步骤一、安装vue-cli执行代码:npm install -g vue-cli成功后会在你的vue-g...原创 2019-08-06 20:21:31 · 427 阅读 · 0 评论 -
Vue模板语法(上)
目录插值指令过滤器计算属性和监听属性插值v-Html指令我们可以在js里自定义html代码属性v-bind(简写:)我们可以可以指定标签的一些属性给它们赋值,还有v-model也是赋值,但是它会影响整个所有它定义的那个数据,而不只是一个v-bind:与v-model的区别 v-model是做数据双向绑定的指令 v-bind只是将对应的值给填写到指定属性中 ...原创 2019-08-01 10:21:08 · 321 阅读 · 0 评论 -
Vue路由
目录SPA项目路由SPA项目1. SPA是什么 单页Web应用(single page application,SPA),就是只有一个Web页面的应用, 是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序: 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, ...原创 2019-08-03 10:26:30 · 244 阅读 · 0 评论 -
Vue模板语法(下)
目录样式绑定事件处理器表单组件样式绑定1. 样式绑定 1.1 class绑定 使用方式:v-bind:class="expression" expression的类型:字符串、数组、对象 1.2 style绑定 v-bind:style="expression" expression的类型:字符串、数组、对象Dem...原创 2019-08-02 17:19:17 · 293 阅读 · 0 评论