Vue
关注
分享
扫一扫
Smootht
这个作者很懒，什么都没留下…
展开
-
Jwt概解
Jwt1.JWT1. JWT是什么2. 为什么使用JWT3. JWT的工作原理4. JWT组成1.JWT1. JWT是什么JSON Web Token (JWT)，它是目前最流行的跨域身份验证解决方案2. 为什么使用JWTJWT的精髓在于：“去中心化”，数据是保存在客户端的。3. JWT的工作原理 1. 是在服务器身份验证之后，将生成一个JSON对象并将其发送回用户，示例如下： {"UserName": "Chongchong","Role": "Admin","Expir原创 2020-08-30 09:06:03 · 499 阅读 · 0 评论 -
Vuex简介（带操作实例）
Vuex1. vue中各个组件之间传值1.1 父子组件1.2 非父子组件或父子组件2. Vuex2.1 Vuex简介2.2 Vuex组成部分3. vuex使用步骤3.1 安装3.2 创建store模块，分别维护state/actions/mutations/getters3.3 引入模块3.4 在main.js中导入并使用store实例4. vuex的核心概念：store、state、getters、mutations、actions4.0 store4.1 state(保存数据的容器)4.2 getter原创 2020-08-27 20:19:10 · 204 阅读 · 0 评论 -
SPA项目开发之表单验证与增删改功能实现
SPA项目开发之表单验证与增删改功能实现1. 前言2. 表单验证3. 增删改功能4. 效果实现1. 前言续前篇SPA项目开发之动态树+数据表格+分页，对表格数据进行一个增删改功能。2. 表单验证Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可<!-- 编辑窗体 --> <el-dialog :title="title" :visible.sync="editFormVisi原创 2020-08-26 11:08:30 · 225 阅读 · 0 评论 -
SPA项目开发之动态树+数据表格+分页
SPA项目开发之动态树+数据表格+分页1. 前言2. 动态树2.1 代码块概解2.2 效果显示3. 数据表格+分页3.1 定义组件3.2 表格样式3.3 搜索框3.4 分页3.5 实现代码块3.6 实现效果图1. 前言续写前篇Spa项目开发之首页导航+左侧菜单，在spa项目中进行书写一个动态树与数据表格，分页的功能2. 动态树2.1 代码块概解在前篇代码的基础上，将LeftNav.vue组件内容进行修改成动态的菜单，也就是将获取到的表格数据赋值遍历输出要实现路由跳转，先要在el-menu标原创 2020-08-25 16:57:51 · 264 阅读 · 0 评论 -
Spa项目开发之首页导航+左侧菜单
Spa项目开发之首页导航+左侧菜单1. 前言1. Mock.js1.1 Mock.js简介1.2 Mock.js使用步骤3. 目录和文件创建3. 首页导航+左侧菜单3.1 代码块汇总3.2 配置3.3 左侧树收缩功能4. 总结1. 前言续前篇登录注册后，通过Mock.js模拟数据进行首页导航与左侧菜单的测试1. Mock.js1.1 Mock.js简介Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。Mock.js为什么风靡前端原创 2020-08-24 16:01:40 · 321 阅读 · 0 评论 -
简单操作SPA项目开发之登录注册功能
SPA项目开发之登录注册1. 操作步骤1.1 新建项目1.2 安装开发模块1.3 引入min.js配置1.4 添加elementUI组件查看效果2. Vue+ElementUI设计登陆页面2.1 修改界面2.2 显示结果3. 后台交互(axios/qs/vue-axios)3.1 axios3.2 qs3.3 vue-axios3.4 ajax 跨域问题3.4.1 引入main.js配置3.4.2 配置tomcat允许跨域访问3.5 This 指针变量污染4. 代码运行结果及其代码块4.1 代码块4.2 测原创 2020-08-21 22:19:11 · 1558 阅读 · 0 评论 -
vue-cli搭建SPA项目
vue-cli搭建SPA项目1. 前言2. 什么是vue-cli?3. 安装vue-cli4. 使用脚手架vue-cli(2.X版)来构建项目5. 案例路由测试6. 总结1. 前言前提，搭建好NodeJS环境(点击此查看如何搭建NodeJS环境)2. 什么是vue-cli?vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板创建命令： vue init webpack xxxxxx 为自己创建项目的名称必须先安装vue,vue-cli，webp原创 2020-08-19 17:10:35 · 226 阅读 · 0 评论 -
Vue简单购物车
Vue简单购物车1. 介绍2. 代码实现步骤2.1 初始界面显示2.2 删除功能2.3 全选反选3. 总结1. 介绍这是一个Vue实例，实现一个简单的购物车功能。用于实践Vue的数据绑定，条件，循环，父子通信等功能。2. 代码实现步骤2.1 初始界面显示<body> <div id="a_div"> <table style="width: 99%;" border="2px"> <tr> <th>原创 2020-08-19 10:37:55 · 1235 阅读 · 2 评论 -
NodeJs环境搭建
NodeJs环境搭建1. Node.js是什么?2.npm是什么？3. Node.js环境搭建3.1 下载3.2 解压3.3 环境变量配置3.4 配置npm全局模块路径和cache默认安装位置3.5 配置下载源地址3.6 验证安装结果3.7 启动项目测试是否成功4. 总结1. Node.js是什么?Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。Node.js是一个让JavaScript运行在服务端的开发平原创 2020-08-18 10:56:21 · 391 阅读 · 0 评论 -
Vue语法模板二
Vue语法模板二1. 样式绑定2. 事件修饰符2.1 事件冒泡2.2 代码汇总2.3 代码运行结果3. 表单3.1 代码块3.2 代码运行结果4. 组件4.1 组件简介4.2 全局和局部组件4.3 props4.4 代码块4.5 代码运行结果5. 自定义事件1. 样式绑定class绑定使用方式：v-bind:class=“expression”expression的类型：字符串、数组、对象style绑定v-bind:style=“expression”expression的类型：字符串、数组原创 2020-08-14 11:16:08 · 197 阅读 · 0 评论 -
Vue语法模板一
Vue语法模板一1. 模板语法1.1 插值1.1.1 文本1.1.2 html1.1.3 属性1.1.4 表达式1.1.5 代码块总写1.1.6 测试结果2. 指令2.1 核心指令2.1.1 代码块总写2.1.2 测试结果3. 参数4. 过滤器4.1 全局过滤器4.2 局部过滤器4.3 注意事项4.4 代码块总写4.5 测试结果5. 计算属性 与监听属性5.1 代码总写5.2 测试结果6. 小结1. 模板语法1.1 插值1.1.1 文本{{msg}}1.1.2 html使用v-html指令原创 2020-08-12 17:06:07 · 347 阅读 · 2 评论 -
Vue入门
Vue入门1. Vue概念与作者2. 库和框架的区别3. MVVM的介绍4. Vue实例4.1 入门案例4.2 Vue事件4.3 Vue双向数据绑定4.4 Vue运行过程1. Vue概念与作者Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架官网：https://cn.vuejs.org/Vue作者：尤雨溪/中国无锡2. 库和框架的区别库库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者代表：jQueryjQuer原创 2020-08-12 09:46:59 · 180 阅读 · 0 评论