![](https://img-blog.csdnimg.cn/20191229101523689.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
🍀 Vue框架
vue学习
赫于富
这个作者很懒,什么都没留下…
展开
-
怎么把Vue项目发布到本地Tomcat上
第一步:在VScode中运行打包命令npm run build之后会生成一个dist文件第二步:打开tomcat的webapps目录,将打包后的文件复制到这里第三步:启动tomcat(双击startup.bat)启动之后一般tomcat的默认的路径是localhost:8080我们可以直接通过这个地址打开tomcat但是我个人在前期修改了tomcat的端口号,我直接通过8080就无法直接访问了,我们来配置文件中查看一下自己的tomcat端口号C:\Pro...原创 2020-07-07 09:37:19 · 1255 阅读 · 2 评论 -
Vue分环境打包
在项目开发过程中,我们的项目一般分为开发版,测试版,生产版,之前每次发布不同的版本都需要在源码中修改api地址然后再次打包,这样就很麻烦,如果可以根据不同环境进行打包就完美了。下面就来介绍如何进行分环境打包(前提是你已经创建好了一个vue项目,我这里用的是vue4)第一步:打包package.json文件可以看到scripts我们添加一个test打包环境"test":"vue-cli-service serve --mode test"解释:serve是运行命令,s..原创 2020-07-07 08:31:41 · 4232 阅读 · 2 评论 -
computed、watch,方法的区别和使用
最近在看的一篇文章中一个面试官问一个面试人员:你知道computedwatch和方法的区别吗?他说自己不怎么用computed和watch,一般都用方法,面试官表示很无奈,咱们这篇博客就主要介绍一下他们三者的区别:方法:页面数据每次重新渲染都会重新执行,性能消耗较大,除非不希望有缓存的时候使用 computed:是计算属性,依赖其他属性计算值,并且computed的值有缓存,只有当计算值变化时才会返回内容 watch:监听到值的变化就会执行回调,在回调中可以进行一些较复杂的逻辑操作方法...原创 2020-07-03 20:57:33 · 500 阅读 · 1 评论 -
如何在Vue中使用Axios
首先介绍一下什么是Axios: Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中 主要的作用是用于向后台发起请求我们先来了解一下promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果那么如何在Vue中使用axios呢?第一步:安装axios:npm install --save axios第二步:在vue的main.js中导...原创 2020-07-03 10:43:25 · 30911 阅读 · 3 评论 -
创建VUE项目
一、搭建VUE环境: 如果电脑中没有安装过node.js,首先安装node.js 为什么在创建vue项目之前要有node.js? 因为vue.js的资源依托于npm管理,npm是类似Java的maven,npm包管理工具是基于Node.js的前端项目包管理工具,是项目中对各种程序包的依赖管理 与其说VUE需要借助Node开发前端项目,不如换个思路...原创 2020-07-02 19:20:48 · 371 阅读 · 3 评论 -
element ui datePicker 设置当前日期之前的日期不可选
HTML代码:<el-form-item label="考试开始时间:" prop="examStartTime"> <el-date-picker v-model="createExam.examStartTime" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change="test"原创 2020-07-01 09:06:55 · 1504 阅读 · 5 评论 -
Vue+Element-UI 实现分页显示效果
当我们从后端返回的数据量很大,并且根据需求我们需要将返回的数据全部都显示在页面中,默认情况下会把所有的数据全部显示在一个页面,这样非常影响视觉和页面的使用,所以需要使用分页我这次使用的是Vue4.0 + Element-UI组件,Element-UI库非常的丰富,它提供了一个分页组件Pagination展示效果:这个是获取两个时间段的上机记录HTML部分:<el-c...原创 2020-05-03 11:21:18 · 7563 阅读 · 3 评论 -
VUE 实例的生命周期
什么是VUE生命周期从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! vue把整个生命周期划分为 创建 、更新、挂载、销毁 等阶段生命周期钩子 其实就是生命周期事件的别名生命周期函数分类创建期间的生命周期函数:1.beforeCreate:实例刚在内存中被创建出来,还没有初始化好 data 和methods属性data 和 el 还不...原创 2020-01-11 17:14:59 · 365 阅读 · 1 评论 -
VUE - 路由的使用和重定向
什么是路由:后端路由: 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换前端路由的后端路由的区分后端路由:当我们在浏览器中输入http://192.168.1.200:8899/index.html来访问界面的时候,web服务器就会接收到这个请求,然后把in...原创 2020-01-08 18:42:32 · 872 阅读 · 3 评论 -
VUE 组件 - 创建和切换
什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可模块化和组件化的区别 模块化:是从代码逻辑的角度进行划分的,方便代码分层开发,保证每个功能模块的职能单一 组件化:是从UI界面的角度进行划分的,前端的组件化,方便UI组件的重用一、创建组件的三个方式1.使用vue.extend来...原创 2020-01-07 10:23:44 · 387 阅读 · 1 评论 -
MVVM架构模式
前言:MVVM是一种软件架构设计模式,是一种思想,他利用数据绑定,属性依赖,路由事件等特性实现高效灵活的架构 MVVM源于MVC模式,很多人都说MVVM是对MVC的一种颠覆,是前端视图层的分层开发思想,主要把每个页面分成了 M、V和VM其中VM是MVVM的思想核心因为VM是M和V之间的调度者设计图:或者:通过上图可看到MVVM比MVC多了一个ViewModel,...原创 2019-12-29 20:06:09 · 510 阅读 · 10 评论