前端框架
文章平均质量分 95
博主学习前端框架的记录与总结
ITKaven
ACMER
本科软件工程专业
硕士计算机技术专业
专注于WEB开发的烟酒僧
展开
-
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了,主要原因是博主一直在补充知识,发现自己还有很多地方不足,等博主学到一定程度再来相互探讨技术。主要是看到评论区的小伙伴说分页该怎么实现,博主就花了几个小时去实现一个小例子。ElementUI的Pagination分页组件:Pagination大家可以先看一下这个组件实现分页的效果怎么样。数据库有数据才能进行展示,为了简单,原创 2021-04-13 16:48:10 · 6982 阅读 · 6 评论 -
Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标
Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标博主很久之前就想使用Element-UI,总是因为学习后端的技术鸽了很久(博主目前是偏后端),这里博主通过Vue来整合Element-UI(不是Vue项目整合Element-UI,Vue项目整合Element-UI不久就会有的,因为最近博主有一个项目需要)。引入Element-UInpm安装Vue项目整合Element-UI会用到,这里博主就介绍一下。npm i element-u原创 2020-12-11 13:01:56 · 13835 阅读 · 7 评论 -
Vue项目 - 单文件组件和Vue中的路由
推荐:Vue汇总Vue项目 - 单文件组件和Vue中的路由什么是单文件组件在之前的博客中,博主使用Vue.component来定义全局组件,紧接着用new Vue({ el: '#container '})在每个页面内指定一个挂载点。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>组件</title> <script sr原创 2020-12-07 19:34:56 · 750 阅读 · 4 评论 -
Vue项目 - 项目文件介绍
Vue项目 - 项目文件介绍上一篇博客介绍了三种方式创建Vue项目:Vue - vue create、vue ui、vue init三种方式创建Vue项目。这里博主使用第三种方式创建Vue项目,并且介绍一下项目文件的组成部分。首先创建一个Vue项目:C:\Users\Kaven>e:E:\>cd E:\workspace\WebStorm\blogE:\workspace\WebStorm\blog>vue init webpack project下面是创建Vue项目的原创 2020-12-05 15:23:27 · 997 阅读 · 0 评论 -
Vue - vue create、vue ui、vue init三种方式创建Vue项目
Vue学习(十九)- 三种方式创建Vue项目(vue create、vue ui、vue init)安装@vue/cli为npm安装的包配置环境变量。运行下面这条命令。npm install -g @vue/cli在CMD中运行vue --version命令,如果输出了@vue/cli的版本,则说明@vue/cli安装成功了。C:\Users\Kaven>vue --version@vue/cli 4.5.9创建Vue项目 - vue create通过下面这条命令可以查看v原创 2020-11-28 11:45:40 · 28120 阅读 · 5 评论 -
Vue - 安装Node.js(配置环境变量、配置NPM下载存放目录、NPM设置镜像仓库)
Vue学习(十八)- 安装Node.js和使用Webpack打包Vue项目安装Node.jsNode.js下载地址根据自己的操作系统下载相应的安装包。一直下一步即可。配置环境变量。在CMD中运行node -v和npm -v两条命令,如果都能输出版本号,说明nodejs安装成功。博主习惯将npm安装的包放在安装nodejs的目录下,方便统一管理。npm config set prefix "E:\tools\nodejs\node_global"npm config set cach原创 2020-11-27 23:42:09 · 1519 阅读 · 0 评论 -
Vue - 插槽
推荐:Vue学习汇总Vue学习(十六)- 插槽如果你对组件不太了解,推荐你先阅读它:Vue学习(七)- Vue组件基础在2.6.0中,为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。插槽使用Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口。<!DOCTYPE html><html lang="e原创 2020-11-16 23:10:10 · 732 阅读 · 2 评论 -
Vue - 组件传值(父子组件间传值、非父子组件间传值)
推荐:Vue学习汇总Vue学习(十五)- 组件传值(父子组件间传值、非父子组件间传值)如果你对组件不太了解,推荐你先阅读它:Vue学习(七)- Vue组件基础父子组件间传值父组件向子组件传值:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件传值</title> <script src="./js/vue原创 2020-11-16 12:50:42 · 1166 阅读 · 0 评论 -
Vue - Prop
推荐:Vue学习汇总Vue学习(十四)- Prop如果你对组件不太了解,推荐你先阅读它:Vue学习(七)- Vue组件基础Prop 的大小写 (camelCase vs kebab-case)HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:<!DOCTYPE html><ht原创 2020-11-12 20:47:48 · 948 阅读 · 0 评论 -
使用Vue和Spring Boot实现文件下载
使用Vue和Spring Boot实现文件下载推荐使用Vue和Spring Boot实现文件上传。前端这里介绍三种方式来实现文件下载,跨域问题在后端会进行处理,这个例子是下载MP4文件,我这里是直接使用HTML来写前端,如果用Vue来写,可能要防止mockjs对请求的responseType产生影响(mockjs会创建一个新的XMLHttpRequest对象,并且有着自己的原始配置。所以导致覆盖了axios的配置,如responseType等)。<!DOCTYPE html>&l原创 2020-11-11 23:21:50 · 10737 阅读 · 21 评论 -
Vue - attribute is & ref
推荐:Vue学习汇总Vue学习(十三)- attribute is & refattribute is用于动态组件且基于 DOM 内模板的限制来工作。动态组件有的时候,在不同组件之间进行动态切换是非常有用的。可以通过 Vue的 <component> 元素加一个特殊的 is attribute 来实现:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <ti原创 2020-11-11 15:22:38 · 1005 阅读 · 0 评论 -
Vue - 深入响应式原理
推荐:Vue学习汇总Vue学习(十二)- 深入响应式原理现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。在这个章节,我们将研究一下 Vue 响应式系统的底层的细节。如何追踪变化当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并原创 2020-11-11 11:50:35 · 927 阅读 · 2 评论 -
Vue - v-if、v-show、attribute key、v-else、v-else-if
推荐:Vue学习汇总Vue学习(十一)- v-if、v-show、v-else、v-else-ifv-if根据表达式的真假值,来有条件地渲染元素。在切换时元素及它的数据绑定 、组件被销毁并重建。如果元素是 <template>,将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。当和 v-if 一起使用时,v-for 的优先级比 v-if 更高。代码:<!DOCTYPE html><html lang="en"><head> &原创 2020-11-10 11:26:14 · 956 阅读 · 0 评论 -
Vue - 侦听器 watch 和计算属性 computed
推荐:Vue学习汇总Vue学习(十)- 侦听器 watch 和计算属性 computed代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>computed</title> <script src="./js/vue.js"></script></head><body&原创 2020-11-09 23:59:32 · 791 阅读 · 0 评论 -
Vue - v-text、v-html
推荐:Vue学习汇总Vue学习(九)- v-text、v-htmlinnerText和innerHTML的区别代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-text v-html</title></head><body> <div id="div1"></d原创 2020-11-09 23:10:25 · 737 阅读 · 0 评论 -
Vue - Vue生命周期钩子
推荐:Vue学习汇总Vue学习(八)- Vue生命周期钩子官网下图展示了Vue实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。beforeCreate在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2020-11-09 18:01:38 · 967 阅读 · 2 评论 -
Vue - Vue组件基础
推荐:Vue学习汇总Vue学习(七)- Vue组件基础为了介绍Vue的组件,先用Vue的组件来改造之前实现的TodoList:Vue学习(六)- 用Vue写一个TodoList小栗子代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>TodoList</title> <script src="./js/vue.js">&原创 2020-11-07 22:06:42 · 876 阅读 · 2 评论 -
Vue - 用Vue写一个TodoList小栗子
推荐:Vue学习汇总Vue学习(五)- 用Vue写一个TodoList小栗子需求在输入框中输入计划,点击提交,可以加入List的最前面。避免输入全是空格。避免按钮点击的冒泡事件。代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>TodoList</title> <script src="./js/vue.js">&l原创 2020-11-07 18:27:21 · 956 阅读 · 0 评论 -
Vue - v-model
Vue学习(四)- v-modelv-model可以在表单控件或者组件上创建双向绑定。双向绑定<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>v-model</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <原创 2020-11-06 11:45:51 · 749 阅读 · 0 评论 -
Vue - v-bind
Vue学习(四)- v-bindv-bind 使用v-bind动态地绑定一个或多个attribute,或一个组件 prop 到表达式。在绑定class或style这种attribute时,支持其它类型的值,如数组或对象。代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>v-bind</title> <script src="ht原创 2020-11-06 10:54:55 · 927 阅读 · 0 评论 -
Vue - v-on
Vue学习(三)- v-onv-on 使用v-on是用于绑定事件监听器。事件类型由参数指定,表达式可以是一个方法的名字或一个内联语句。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>v-on</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"><原创 2020-11-05 21:40:12 · 793 阅读 · 0 评论 -
Vue - v-for
Vue学习(二)- v-forv-for就相当于程序语言中的for一样,可以遍历一个Array、Object、number、string、Iterable(2.6 新增)。遍历Array。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>TodoList</title> <script src="https://cdn.jsdelivr.原创 2020-11-05 13:50:52 · 793 阅读 · 0 评论 -
Vue汇总
VueVue学习(一)- Hello World 初体验未完待续原创 2020-11-05 10:59:08 · 2927 阅读 · 18 评论 -
Vue - Hello World 初体验
Vue学习(一)- Hello World 初体验介绍Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。尝试Vue最简单的方法是使用Hello World例子。可以创建一个 .html 文件,然后通过如下方式引入 Vue:<!-- 开发环境版本,包含了有帮助的命令行警告原创 2020-11-05 10:57:10 · 1090 阅读 · 2 评论 -
使用Vue和Spring Boot实现前端图片获取
使用Vue和Spring Boot实现前端图片获取前端通过后端请求图片数据也是很常见的业务需求,这里博主给大家演示一下。前端:<template> <div class="blog"> <div class="upload"> <img :src="'data:image;base64,'+image"> <button @click="gain()"><span&原创 2020-10-30 13:12:06 · 4014 阅读 · 2 评论 -
使用Vue和Spring Boot实现文件上传
使用Vue和Spring Boot实现文件上传文件上传是开发中很常见的业务需求,这里博主通过使用Vue和Spring Boot实现一个简单的文件上传小例子。前端:<template> <div class="blog"> <div class="upload"> <input type="file" @change="fileChoose($event)"> <button @原创 2020-10-30 11:50:38 · 1532 阅读 · 5 评论 -
用Webpack启动Vue项目时提示This is probably not a problem with npm,there is likely additional logging output
首先 cd 到要运行的项目里面再启动该项目 npm run dev出现下面情况:解决方法:输入npm install,重新安装再重新启动该项目 npm run dev出现下面情况说明成功:进入浏览器 输入 http://localhost:8080出现这个说明启动项目成功:...原创 2018-11-01 12:13:08 · 7465 阅读 · 1 评论 -
npm install stylus --save失败
下面是日志文件0 info it worked if it ends with ok1 verbose cli [ 'F:\\Install\\web\\nodejsInstall\\node.exe',1 verbose cli 'F:\\Install\\web\\nodejsInstall\\node_modules\\npm\\bin\\npm-cli.js',1 verbos...原创 2018-11-02 11:33:03 · 5006 阅读 · 0 评论