Vue
关注
分享
扫一扫
vue框架
江夏、
关注微信公众号：1024笔记；可免费领取海量学习资源和资料
展开
-
Springboot+Vue整合笔记【超详细】
| 作者：江夏| 微信公众号：1024笔记| 知乎：https://www.zhihu.com/people/qing-ni-chi-you-zi-96| GitHub：https://github.com/JiangXia-1024?tab=repositoriesPart 1目前很多公司的开发模式都是前后的分离的分工模式，这样能够做到各司其职，提高开发的效率。之前也有文章介绍了springboot项目和vue创建一个简单的前端项目，这篇文章则是将springboot和vue进行简单的整合，实现原创 2020-12-05 16:59:02 · 11286 阅读 · 4 评论 -
前端如何增加、删除和修改css样式
事情的起因是这样的，我们公司有个项目的多个页面引用的css文件是同一个，今天做一个需求的时候发现需要重新修改某个元素的样式，但是我不想修改文件中元素的class或者id然后再在css文件中新增样式，因为就一两个样式，然后也怕会影响其他地方。所以可以通过jquery或者js动态的修改某个元素的样式。比如：我有个div，是这样的：<div id="div1" style="width:8px;height:88px">但是我在另一个页面并不想显示这个样式，那么就可以移除这个style,那么原创 2020-09-17 19:51:11 · 1349 阅读 · 0 评论 -
Vue学习笔记(一)：从零开始创建一个Vue前端项目
一、开篇最近公司的老的项目重构，改成了前后端分离的架构，前端采用的是vue.js前端框架，所以接触到vue.js。Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库，它是以数据驱动和组件化的思想构建的。相较于其他的前端框架，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用。Vue.js不同于以前的jQuery操作DOM，因为Vue.js是数据驱动的，所以无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起原创 2020-09-02 20:04:10 · 10226 阅读 · 2 评论 -
几种常见跨域解决方案
一、同源策略现在很多的项目开发，都实现了前后端分离开发，能够大大提高效率，但是导致前端向后端发送请求，会出现跨域错误。先说说什么是跨域当访问一个网站时，一个完整的域名由传输协议、网络名、域名主体和域名后缀四个部分组成，如下图所示：相同后缀的域名主体是不能重复。http://www.baidu.com和http://www.google.cn就是两个不同的域。跨域就是在当前域去访问其他域的资源。就比如我们在自己的机器上通过ajax去调用百度地图提供的API接口数据，这就是跨域请求。<!DOCT原创 2020-05-12 16:42:17 · 1518 阅读 · 0 评论 -
Vue npm install 失败报错：ENOENT errno -4058 npm ERR! syscall access
公司开发前端使用Vue，今天获取最新代码之后，由于新装了包，所以拉取之后重新npm install,结果报下面的错误：找到该路径下的npm 和npm-cache文件夹，删除掉之后，重新npm install即可！...原创 2020-03-09 14:34:06 · 4367 阅读 · 0 评论 -
npm install 失败报错：ENOENT errno -4058 npm ERR! syscall access
在远程获取代码之后，执行npm run dev,出现以下错误解决方案删除掉C:\Users\用户名\AppData\Roaming\npm-cache\C:\Users\用户名\AppData\Roaming\npm\ 这两个文件夹然后重新执行npm install -g即可解决...原创 2020-03-01 17:21:31 · 4341 阅读 · 0 评论 -
vue实例的生命周期
一、Vue实例的生命周期官网上有张图详细的讲解了Vue实例的完整生命周期，如下：Vue实例的生命周期函数主要可以分为三个部分：创建期间、运行期间以及销毁期间的生命周期函数创建期间的生命周期函数：beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods属性created：实例已经在内存中创建OK，此时 data 和 methods 已经创建O...原创 2019-10-22 15:47:42 · 238 阅读 · 0 评论 -
Vue.js中时间的格式化
在Vue.js中并没有对于时间的格式化方法。比如，新建一个Vue文件，然后在页面输出当前时间。<template> <p>{{shijian}}</p></template><script>export default { name:"shijian", data() { return ...原创 2019-10-18 18:02:22 · 2718 阅读 · 0 评论 -
Vue.Js过滤器的简单使用
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：{{ message | filter}}接下来通过一个具体是示例，分析Vue.Js中过滤器的简单使用，在component文件夹下新建一个vue.js文件，具体代码如下：<template> <div class = "Demo1"> &l...原创 2019-10-17 18:04:53 · 451 阅读 · 0 评论 -
如何在vue项目中引入使用bootstrap前端框架并实现模糊搜索【图文步骤+效果详解】
一.引言 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。在Vue项目中引用Bootstrap可以快速的构建出良好的前端样式，比使用Vue的Element—UI和CSS手写样式来的快捷美观的多。接下来介绍如何在Vue项目中引入Bootstrap框架。二.步骤 Bootstrap框架使用的前提是基于jQuery的，所以我们想要在项目中引入jQu...原创 2019-08-20 23:53:59 · 1150 阅读 · 0 评论 -
Vue-devtools安装及使用
在vue开发过程中使用vue-devtools调试工具进行开发能够大大的方便我们的开发过程，但vue-devtools开发插件需要我们额外安装，一种是在线翻墙搜索安装chrome插件，前提是能够翻墙的，这里针对不能翻墙的提供一种离线安装方式，即找vue-devtools工具资源，我这里在我的资源里面上传了一份，有需要的可以下载，下载下来解压后按照以下方式进行安装安装好了以后就可以在菜单...原创 2019-08-14 18:05:44 · 331 阅读 · 0 评论 -
setinterval方法和clearInterval方法实现跑马灯效果
今天在学习前端的时候看到了setinterval函数，写了一个小的Demo来练练手，祝祖国母亲70周年生日快乐！下面是代码，注释和分析在代码里<template> <div id="Demo3"> <button @click="run">滚动</button> <button @click="st...原创 2019-08-07 14:54:22 · 652 阅读 · 0 评论 -
Vue中用CSS翻转动画的实现
今天女朋友给我提了个需求，一张图片实现鼠标滑过翻转到背面是介绍图片的内容，代码如下<template> <div class="Demo"> <div class="Before" ></div> <div class="After" style="font-size:20px;color:black">这个是...原创 2019-08-06 16:47:07 · 3594 阅读 · 0 评论 -
Vue ESLint检测问题的解决办法
在创建vue项目的时候,有些时候会一不注意就把ESLint 检测勾上了，虽然对编码规范很好，但其中的痛苦可能只有经历过得人才懂，如果勾选上了可以按照下面的步骤 去除ESLint检测，在build文件夹下找到webpack.base.conf.js文件，将creatLintingRule方法下面的代码注释掉即可。 或者后面在创建Vue项目的时候在Use ESLint to lint yo...原创 2019-08-05 17:21:45 · 1041 阅读 · 0 评论 -
安装vue-cli 脚手架
开发vue项目的时候一般是通过vue-cli脚手架进行开发。之所以成为脚手架就是因为他通过webpack搭建的开发环境直接生成开发所需要的基本模板，我们只需要在模板中进行开发即可。接下啦详细记录下在自己的电脑上安装vue-cli脚手架的步骤以及问题。一.前提安装vue-cli首先需要在自己的电脑上安装node.js环境，可以通过node -v命令来查看自己的电脑是否安装了node.js。如...原创 2019-07-31 16:21:39 · 317 阅读 · 0 评论 -
Vue.js的事件(单双击、鼠标和键盘)以及阻止事件冒泡
自己随便琢磨了一个小的Demo，实现了一些事件和阻止事件冒泡，具体的代码如下，注释在代码里html文件<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"></meta> <title>VueDemo</title> <li...原创 2019-07-30 16:01:56 · 3995 阅读 · 0 评论 -
Vue的数据绑定
Vue简单的数据绑定，就是在根容器中添加一个标签，然后用{{}}中引入具体的数据名这里主要讲利用v-bind进行属性的绑定。在app.js的data中添加site。 注意这里的地址一定要加http，不然后面跳转的时候回出现找不到文件，如下在html文件中引入一个a标签，标签中引入site，如果不添加v-bind，直接类似上面的name进行绑定的话，...原创 2019-07-30 10:59:56 · 228 阅读 · 0 评论 -
Vue的方法的调用以及传参
前面讲到了如何用CDN的方式引入vue.js。在Vue中方法(methods)和data属于同一量级的属性，所以在Vue中有methods模块，对于方法的定义都定义在这个区域内。如下，在methos内定义一个say的方法，返回，他说要好好学习同样在html的根容器的标签下，引入say方法，同data中name的调用，因为say是个方法，方法后面应该加(),如下：用浏览器打开inde...原创 2019-07-30 09:58:34 · 17030 阅读 · 2 评论 -
使用CDN方法的方式进行Vue.js的安装
最近公司需要进行一些前端的开发工作用到了Vue前端框架，所以准备自学Vue，顺便几下学习的过程以及一些问题。使用Vue框架的话，首先需要在自己的电脑上安装Vue.js。安装Vue.js有两种方式，一种是直接下载进行独立安装，另一种则是是用CDN的方式。独立版本的话，可以直接去在Vue.js的官网直接下载 vue.min.js 并在用<script>标签中引入即可，比较简单，这...原创 2019-07-29 17:42:00 · 6290 阅读 · 0 评论