Vue
酷酷的橙007
哈尔滨工业大学控制科学与工程专业博士在读,前端工程师,算法工程师
展开
-
记录键盘上所有按键对应的KeyCode 值
在vue中,对于键盘全局监听事件一般放在mounted方法中,具体用法如下:mounted() { let _this = this // 全局监听键盘事件 document.onkeydown = function() { let key = window.event.keyCode let shift_key = window.event.shiftKey // shift键 // 监听键盘左方向按键(keycode3原创 2020-07-28 09:32:56 · 970 阅读 · 0 评论 -
vue中$event的用法——获取当前元素及相关元素
<button @click = “clickfun($event)”>点击</button>methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 # 获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML # 获得点击元素的第一个子元素 e.currentTarge原创 2020-07-25 14:29:42 · 3628 阅读 · 0 评论 -
两种方式调用本地json文件(基于Vue-cli3脚手架)
在前端开发过程中,当后台服务器开发数据还没完善,无法与前端进行交接时,我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。vue-cli3.0往后的项目基础架构对比旧版本有些区别。以前大家都习惯在根目录下的static文件夹下创建json文件,然而vuecli3、4没有static文件夹了。若创建一个static文件夹在下面存放json文件,在实际调用过程中会报错,提示请求404。因此本文将提供两种方法调用本地的json文件。1. 利用Axios请求调用本地json文件Vue cli3原创 2020-07-17 20:53:04 · 6072 阅读 · 4 评论 -
Vue自定义InputNumber 计数器组件
ElementUI中关于计数器组件(InputNumber)在设置大小时具有一定局限性。因此利用两个button和一个input对上述计数器进行重构,并封装成组件,供今后使用。先看效果(hover时):上代码:组件封装(Input_num.vue):<!-- 自定义Input_num计数器组件 --><template> <div class="input_num"> <button @click="minus">-<原创 2020-07-16 23:35:27 · 3395 阅读 · 0 评论 -
vscode的eslint插件不起作用
某次对vue项目重构之后,关闭项目再打开,突然发现prettier好使,但是eslint不好用了。通过尝试网上的各种方法,最终找到解决方案。VS Code打开“设置”,在扩展(extensions)中选择eslint,并打开"settings.json"输入(文件中有重复属性使用一次即可):"eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoF原创 2020-07-07 23:01:01 · 9199 阅读 · 0 评论 -
前端模块化CommonJS以及ES6模块化的导入导出
CommonJS(了解)模块化有两个核心:导入和导出CommonJS的导出(aaa.js):module.exports = { flag: true, test(a, b) { return a * b }, demo(a, b) { return a + b }}CommonJS的导入:let { test,demo,flag } = require('./aaa.js') // aaa.js文件路径//原创 2020-06-25 12:15:14 · 1372 阅读 · 0 评论 -
Vue中slot插槽的使用
为什么使用slotslot翻译为插槽:在生活中很多地方都有插槽,电脑的USB插槽,插板当中的电源插槽插槽的目的是让我们原来的设备具备更多的扩展性比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等组件的插槽:组件的插槽也是为了让我们封装的组件更加具有扩展性让使用者可以决定组件内部的一些内容到底展示什么举例:移动网站中的导航栏移动开发中,几乎每个页面都有导航栏。导航栏我们必然会封装成一个插件,比如nav-bar组件。一旦有了这个组件,我们就可以在多个页面中复原创 2020-06-25 10:54:07 · 1304 阅读 · 0 评论 -
Vue解决data数据改变时,v-for无法实现实时更新dom元素的问题(template中代码的局部刷新)
问题描述利用Vue做项目过程中,经常使用v-for渲染多个重复组件或dom元素,比如:传递json/字典,如下所示:<!--element实现折叠文件夹--><el-collapse ref="el_collaps_container" v-for="(value,key,index) in json_data" :key="index"> <!-- 这块引入自定义组件 --> <v-fold-file :fold_name="key" :fo原创 2020-06-21 13:28:21 · 9408 阅读 · 3 评论 -
Vue自定义元素身上的右键事件
在制作网页时,我们经常需要自定义右键事件,实现我们想要的功能,这里我手写了一个基于Vue的鼠标右键自定义事件,与大家共同分享。template内容:在自己想要改变鼠标右键事件的dom中(这里以div#demo为例)加入一个ul,模拟鼠标右键后的弹框。prevent属性可以消除右键默认事件。<template> <div> <div id="demo" @contextmenu.prevent="openMenu($event)">原创 2020-06-19 06:57:17 · 7542 阅读 · 2 评论 -
Vue中使用eslint和prettier格式化代码
前言使用eslint+prettier好处:避免运行时因格式问题报错方便团队合作,代码风格统一0. 建立项目利用Vue-cli3建立Vue项目时,一定要选上Linter/Formatter,然后选择 ESLint + Prettier1. 安装vscode插件首先在vscode中安装如下三个插件:eslintveturprettier2. 配置.eslintrc.js(根目录下找)注:代码缩进不是4个空格报错。.prettierrc在文件根目录下创原创 2020-06-07 18:25:16 · 8605 阅读 · 0 评论 -
Vuex详解
1. Vuex是做什么的?官方解释:Vuex是个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex也集成到Vue的官方调试工具 devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能状态管理到底是什么?状态管理模式、集中式存储管理这些名词听起来就非常高大上,让人捉摸不透其实,你可以简单的将其看成把需要多个组件共享的变量全部存储在原创 2020-06-06 14:35:20 · 266 阅读 · 0 评论 -
解决ElementUI导航栏重复点菜单报错问题
在使用ElementUI中的导航时,默认情况下如果重复点击某选项,会报错。element-ui.common.js?b705:3354 Error: Avoided redundant navigation to current location: “/home/home1”.at createRouterError (vue-router.esm.js?8c4f:2060)at createNavigationDuplicatedError (vue-router.esm.js?8c4f:2033)原创 2020-06-02 15:29:40 · 24039 阅读 · 12 评论 -
Vue中methods、computed和watch属性联系及区别
methods属性当我们在Vue中想要调用函数或者方法时,可以在methods中调用方法,如下:<template> <div> <h1>methods属性</h1> {{ getFullname() }} {{ getFullname() }} {{ getFullname() }} {{ getFullname() }} </div></temp原创 2020-05-25 09:56:57 · 2508 阅读 · 0 评论 -
Vue报错——Unknown custom element: XXX- did you register the component correctly?
今天在项目中遇到一个报错:Unknown custom element: <v-line>- did you register the component correctly? For recursive components, make sure to provide the “name” option.一般这种问题一定是组件引入时的报错,如果使用vue cli脚手架可以参考如下常见解决方法:1. 导入第三方库的配置文件时,一定要Vue use一下(比如:Echarts)// 导入.原创 2020-05-24 21:09:43 · 14392 阅读 · 0 评论 -
Vue实现前后端交互方式(Promise、fetch、axios、async/await)
目录1. 前后端交互模式1.1 接口调用方式1.2 URL地址格式2. Promise用法2.1 异步调用2.2 Promise概述2.3 Promise基本用法2.4 基于Promise处理Ajax请求2.5 then参数中的函数返回值2.6 Promise常用的API3. 接口调用-fetch用法3.1 fetch概述3.2 fetch的基本用法3.3 fetch请求参数3.4 fetch响应结果4. 接口调用-axios用法4.1 axios的基本特征4.2 axios的基本用法4.3 axios的常原创 2020-05-23 22:18:29 · 2102 阅读 · 1 评论 -
Vue拾遗 —— vue-router 基本使用
Vue路由项目文件基础结构自定义组件(components)定义两个组件,最后希望实现同一页面中两个组件的自由跳转。Content.vue<template> <h1>内容页</h1></template><script>export default { name: 'Content'}</script><style scoped></style>Main.vue&l原创 2020-05-17 09:51:54 · 386 阅读 · 0 评论 -
Vue自学笔记(10)—— Axios异步通信
什么是AxiosAxios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,它的主要作用就是实现 AJAX 异步通信,其功能特点如下:从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API [JS中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF(跨站请求伪造)GitHub:https://github.com/axios/axios中文文档:http:/原创 2020-05-15 21:52:39 · 387 阅读 · 0 评论 -
Vue小项目之模块化以及封装Storage实现todolist待办事项
input框中可以通过点击“添加”按钮或者回车添加待办事项,点击CheckBox选择框打钩,表示已完成,取消CheckBox前面的钩,表示未完成。点击删除可以删除该项。项目效果:完整代码:App.vue(根组件):<template> <div id="app"> <input type="text" v-model="todo" @keyd...原创 2019-07-08 19:24:33 · 214 阅读 · 0 评论 -
Vue自学笔记(3)——双向数据绑定v-model
前言今天主要给大家介绍双向数据绑定相关内容。在介绍内容之前先介绍一下Vue的开发架构——MVVM。啥是MVVM的?它是Model-View-ViewModel的简写,简单来说呢,就是model层可以影响view层,反过来view层也可以影响model层,model层可以简单理解为script框起来的那些东西,也就是业务逻辑层,view层就是视图层,就是浏览器能看到的内容。知道这些就够了。双向数...原创 2019-07-08 20:22:47 · 422 阅读 · 0 评论 -
Vue自学笔记(4)——Vue组件的基本概念
上一讲主要复习的是双向数据绑定相关内容,今天重点讲讲Vue中组件的使用。所谓组件,就是用户根据需要自定义一个标签。首先在src文件夹下建立一个名为components的文件夹,用于存放我们自定义的组件,随便起个名,这里我就叫Home.vue了。在Home.vue中添加组件内容:<template> <div> <h2>这是一个首页组件...原创 2019-07-08 20:59:34 · 215 阅读 · 0 评论 -
Vue自学笔记(5)——Vue的生命周期函数
前言Vue提供了8种生命周期函数,Vue官网中也给出了生命周期的执行过程,个人感觉这个图看看就好,关键还是在于学会如何使用。上代码为了理解上述生命周期函数的用法,新建一个Life.vue的组件,之前的项目中还有一个Home.vue组件,就在Home组件中引用Life组件吧。在Life组件中添加一个按钮,按钮触发可以改变msg的内容。在Life组件中将8个周期函数引入。在Home组件...原创 2019-07-09 10:32:18 · 230 阅读 · 0 评论 -
Vue自学笔记(6)——Vue的父子组件传值
在Vue实际项目开发过程中,经常用到父子组件之间相互传递属性和方法。以下介绍一种比较简单的父子组件相互传值的方式。父组件主动获取子组件的数据和方法首先,调用子组件的时候定义一个ref<v-child ref="chlid"></v-child>在父组件中通过以下方法调用this.$refs.child.属性this.$refs.child.方法()...原创 2019-07-09 19:32:51 · 222 阅读 · 0 评论 -
Vue自学笔记(7)——Vue-Router路由基础
在根组件中,如果我们想需要挂载哪个组件就挂载哪个组件,不需要的不挂载,比如我们常见的导航栏,点击首页就显示首页组件中的内容,点击新闻就显示新闻组件中内容,就需要用到Vue中的路由。配置路由步骤一般来说,Vue配置路由大概有如下几个步骤:cmd中项目文件夹下安装:其中–save可以保存依赖信息,一定要加上cnpm install vue-router --save在main.js中...原创 2019-07-10 17:04:51 · 173 阅读 · 0 评论 -
Vue自学笔记(8)——Vue-Router路由的嵌套
当我们在开发网站的过程中,经常能看到页面上方有导航栏,页面左侧也有导航栏,如下图所示。这就需要用到嵌套路由。在配置路由时,首先引入创建的组件,然后添加children属性 { path:'/user',component:User,children:[ {path:'adduser',component:addUser}, {path:'deleteuser',compone...原创 2019-07-10 19:26:50 · 243 阅读 · 0 评论 -
Vue自学笔记(9)——Vuex的使用
什么是Vuex官网上说Vuex是一个专门为Vue.js开发的状态管理模式。听着很高大上,其实就是解决不同组件之间相互传值的一种方式,不仅可以父子组件传值,也可以非父子组件传值,功能十分强大。但是Vuex建议在大型项目中使用,小型项目建议使用H5中的localstorage,因为Vuex相比较于localstorage配置起来还是比较复杂的。Vuex的使用src目录下新建一个vuex的文件夹...原创 2019-07-10 22:21:01 · 157 阅读 · 0 评论 -
Vue自学笔记(1)——Vue环境、项目搭建
写在前面的话从今天开始正式学习Vue。之前一直想学习利用Vue进行Web开发,也坚持过一段时间,但是当时并没有总结,很长时间不用,也基本都忘干净了。而且对于一个非计算机软件专业的渣硕,导师对于项目只有一个原则,就是功能实现了就可以,怎么实现的不管,所以之前的项目一直都是传统三大技术HTML + CSS + JQuery,再配合上BootStrap框架,反正页面美观度上确实也说得过去,再加上万能的...原创 2019-07-06 14:24:46 · 333 阅读 · 0 评论 -
Vue自学笔记(2)——Vue的基础语法和基本使用
上一讲主要介绍了Vue的环境、项目等的配置,今天来回顾一下Vue的一些基础语法。Vue项目的目录结构首先看一下昨天新建的Vue项目的目录结构:node_modules文件夹昨天说过了,是存放项目相关依赖的文件夹,与package.json相互对应。public文件夹存放项目首页index.html等文件,暂时先不用管。src中主要放置项目的静态资源文件,其中assets存放图片、css等文...原创 2019-07-07 22:21:27 · 314 阅读 · 0 评论