前端框架
flat on failure
一分耕耘 一分收获
展开
-
Vue模板语法(下)
模板语法样式绑定事件处理器表单组件样式绑定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>vu...原创 2019-08-02 17:10:45 · 93 阅读 · 0 评论 -
Vuex的运用
目录:什么是Vuex?vue中各个组件之间传值传值图解vuex使用步骤安装vuex创建store模块,分别维护state/actions/mutations/gettersactions.jsgetters.jsmutations.jsstate.js在store/index.js文件中新建vuex的store实例,并注册上面引入的各大模块index.js在main.js中导入并使用store实例...原创 2019-08-16 20:10:25 · 179 阅读 · 0 评论 -
SPA项目开发的Mock、总线(BUS)
本章目标:首页导航+左侧菜单1. Mock.js2. Mock.js使用步骤第一步: 安装mockjs依赖第二步: 引入第三步:目录和文件创建第四步:为每个*.vue定义单独的xxx-mock.js文件第五步:在index.js中导入xxx-mock.js,并添加拦截路由配置第⑥步:之后ajax请求便会被mock拦截了3.登陆与注册页面的跳转字符串对象命名的路由this.$router.push、...原创 2019-08-12 06:57:41 · 275 阅读 · 0 评论 -
SPA项目开发之CRUD+表单验证
目标:实现CRUD+表单验证1. 表单验证2.功能:① dialog布局② 表单验证③ 新增功能④ 修改功能⑤ 删除功能3.DemoDemo效果1. 表单验证Form组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将Form-Item的prop属性设置为需校验的字段名即可<el-form-item label=“文章标题” prop=“title”&g...原创 2019-08-14 18:27:28 · 120 阅读 · 0 评论 -
SPA项目开发之登录注册
目录1. vue 怎么引入和配置使用 element-ui 框架2. Vue+ElementUI 设计登陆页面3. 后台交互(axios/qs/vue-axios)4.案例Login.vueRegmain.jsaction.jshttp.jsindex.js编写代码的效果图1. vue 怎么引入和配置使用 element-ui 框架1使用vue-cli脚手架工具创建一个vue项目vue ...原创 2019-08-09 22:00:19 · 2784 阅读 · 0 评论 -
SPA的动态树(菜单)、表格、分页
目标:树形菜单+数据表格+分页vue中如何修改[数组中][对象的值]动态生成NavMenu导航菜单的基本语法(只支持2级菜单)①动态树的结构②vue+element的el-menu组件实现路由跳转及当前项的设置③ 数据表格④分页条菜单、表格、分页案例左侧动态树的编写(LeftNav.vue)表格与分页的编写(Articles.vue)效果图展示vue中如何修改[数组中][对象的值] data:...原创 2019-08-13 20:10:20 · 161 阅读 · 0 评论 -
使用vue-cli搭建SPA项目
本章目标:使用vue-cli来搭建vue项目前提:搭建好NodeJS环境什么是vue-cli?安装vue-cli使用脚手架vue-cli(2.X版)来构建项目**①使用脚手架创建项目骨架**②**运行完上面的命令后,我们需要将当前路径改变到SPA这个文件夹内,然后安装需要的模块**③**启动并访问项目**④停止项目添加element-ui模块package.json详解npm install/np...原创 2019-08-06 19:38:06 · 361 阅读 · 0 评论 -
Vue模板语法(上)
模板语法vue的插值vue的指令Vue的过滤器计算属性、监听属性指令指的是带有“v-”前缀的特殊属性参数一些指令能够接收一个“参数”,在指令名称之后以冒号表示修饰符修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。简写Vue为v-bind和v-on这两个最常用的指令,提供了特定简写vue的插值<!DOCTYPE htm...原创 2019-08-01 15:05:26 · 75 阅读 · 0 评论 -
elementUI入门与nodeJS环境搭建
目录ElementUI简介Node.js是什么npm是什么Vue+ElementUI安装一、CDN方式二、NPM(需要配置NodeJs环境)ElementUI简介我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件原创 2019-08-05 11:53:05 · 139 阅读 · 0 评论 -
Vue的路由
目录路由思路是什么?SPA是什么?router-link相关属性route和router的区别?路由.html效果图展示路由思路是什么?1、确保引入Vue.vue-router的js依赖2、首先需要定义组件(就是展示不同的页面效果)3、需要将不同的组件放入一个容器中(路由集合)4、将路由集合组装成路由器5、将路由挂载到Vue实例中6、定义锚点7、跳转原创 2019-08-05 17:38:32 · 103 阅读 · 0 评论 -
Vue.js路由
目录路由思路是什么?SPA是什么?router-link相关属性route和router的区别案例(路由.html)路由思路是什么?1、确保引入Vue.vue-router的js依赖2、首先需要定义组件(就是展示不同的页面效果)3、需要将不同的组件放入一个容器中(路由集合)4、将路由集合组装成路由器5、将路由挂载到Vue实例中6、定义锚点7、跳转注:一定要正确引入vue-rout...原创 2019-08-03 10:32:41 · 133 阅读 · 0 评论 -
Vue入门
目录什么是Vue?Vue有哪些特点?安装Vue什么是BootCDN?案例:vue的hellowordv-model双向绑定变量指令v-on事件指令vue的生命周期图及案例什么是Vue?Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 ()Vue与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。...原创 2019-07-30 16:40:06 · 176 阅读 · 1 评论 -
Vue-jwt
目标:学会正确使用jwt1. JWT是什么?2. 为什么使用JWT3. JWT的工作原理4.JWT的验证过程5. JWT令牌刷新思路6.JWT组成HeaderPayload(负荷)signature1. JWT是什么?JSON Web Token (JWT),它是目前最流行的跨域身份验证解决方案2. 为什么使用JWTJWT的精髓在于:“去中心化”,数据是保存在客户端的。3. JW...原创 2019-08-17 11:59:31 · 3592 阅读 · 1 评论