分类：VUE

2021
06-23

总结Vue Element UI使用中遇到的问题

基于vue2.0的element-ui框架，使用起来还是很方便的，非常适合快速开发，但是在做自己的项目中还是会碰到这样那样的问题，有些问题官方文档并不是很详尽，以下是我在使用element-ui过程中一些常用的或碰到的一些问题笔记。一、DateTimePicker日期选择范围为当前时间以及当前时间之前<template><div><el-date-pickersize="small"clearable:picker-options="pickerOptions"... 继续阅读 >
2021
06-23

如何使用vue过滤器filter

概述在vue2.0之前，是有内置过滤器的，在2.0中已经没有内置的过滤器了，但我们可以自定义过滤器。关于vue过滤器，在官方文档中是这样说明的：Vue.js允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式(后者从2.1.0+开始支持)。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示。即过滤器是用来格式化数据的一个函数。过滤器不会修改原始数据，它的... 继续阅读 >
2021
06-23

详解Vue自定义指令及使用

一、什么是指令学习vue的时候肯定会接触指令，那么什么是指令呢？在vue中提供了一些对于页面和数据更为方便的输出，这些操作就叫做指令，以v-xxx表示，比如html页面中的属性<divv-xxx></div>比如在angular中以ng-xxx开头的就叫做指令指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，会进行相关DOM操作的绑定，即可以进行一些模板的操作vue中常用的一些内置v-指令v-text... 继续阅读 >
2021
06-23

如何理解Vue中computed和watch的区别

概述我们在Vue项目中多多少少都会有用到computed和watch，这两个看似都能实现对数据的监听，但还是有区别。所以以下通过一个小栗子来理解一下这两者的区别。computed计算属性计算属性基于data中声明过或者父组件传递的props中的数据通过计算得到的一个新值，这个新值只会根据已知值的变化而变化，简言之：这个属性依赖其他属性，由其他属性计算而来的。<p>姓名：{{fullName}}</p>......data:{firstName:'David'... 继续阅读 >
2021
06-23

详解vue组件之间相互传值的方式

概述我们都知道Vue作为一个轻量级的前端框架，其核心就是组件化开发。Vue就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。在vue中组件之间的关系有：父子，兄弟，隔代。针对不同的关系，怎么实现数据传递，就是接下来要讲的。一、父组件... 继续阅读 >
2021
06-23

讨论vue中混入mixin的应用

混入(mixin)提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。即mixin在引入组件之后，会将组件内部的内容如data、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。比如在两个不同的组件的组件中调用sayHi方法，需要重复定义，倘若方法比较复杂，代码将更加... 继续阅读 >
2021
06-23

详解vue中$router和$route的区别

我们在vue项目中一般都会用到路由，而vue-router是vue.js官方的路由管理器。this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的path,name,params,query等属性。this.$router：全局的router实例。通过vue根实例中注入router实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如history对象），任何页面也都可以调用其push(),replace(),g... 继续阅读 >
2021
06-23

如何使用Webstorm和Chrome来调试Vue项目

前言在项目开发中,Debug模式是非常有必要的，后端对于IDEA工具而言Debug模式非常方便,但前端WebStorm而言如果启用Debug模式是需要单独去配置一些东西,所以这里整理自己搭建成功的过程分享出来。可能不同的Webstorm版本会导致效果不一样，所以这里先列出我的版本。Webstorm版本:2018.3.4一、新建Vue项目为了演示一个完整的示例,所以从创建项目开始，这里通过vue脚手架命令开始创建一个项目vueinitwebpackdebug-vue如果运行成... 继续阅读 >
2021
06-23

vue+element开发一个谷歌插件的全过程

简单功能：点击浏览器右上角插件icon弹出小弹窗，点击设置弹出设置页，并替换背景图或颜色。开始1.本地创建文件夹testPlugin并新建manifest.json文件{"name":"testPlugin","description":"这是一个测试用例","version":"0.0.1","manifest_version":2}2.添加插件的小icontestPlugin下创建icons文件夹，可以放入一些不同尺寸的icon，测试可以偷懒都放一种尺寸的icon。修改manifest.json为：{"name":"testPl... 继续阅读 >
2021
06-23

如何用Vue实现父子组件通信

一、父子组件的关系构成本篇文章将要总结的是Vue中父子组件之间的通信方式。那在vue中父子组件之间的关系是怎么构成的呢，或者说哪个组件可以称为是父组件，哪个组件又可以称为是子组件呢。在我的理解中，父子组件的关系构成也比较简单。使用vue-cli工具构建的项目中，我们经常会在一个组件中注册引用另外一个组件。Home.vue<template><divclass="home"><p>这里是Home组件</p></div></template><script>exportdefault{... 继续阅读 >
2021
06-23

Vue通过懒加载提升页面响应速度

概述项目的目的是要通过数据透视表和Excel公式来分析公司的各项运营数据。不过在集成后，在开发环境页面运行流畅，大量数据加载处理也很快。但是发布生产后，在用户每次打开页面时，加载时间上相较开发阶段均有所降低，经过排查速度变慢是由于发布包的vendor.js变大所导致的，这个文件加载每次都需300毫秒左右，由于小的Vue项目并没有做模块划分，所以所有的代码都直接打包到了vendor中，在集成了新功能后，发布包也随之变大了。既... 继续阅读 >
2021
06-23

详细对比Ember.js和Vue.js

概述JavaScript最初是为Web应用程序创建的。但是随着前端技术的发展，大多数开发人员更喜欢使用基于JavaScript的框架。它简化了你的代码以及使你能完成更多全栈工作，您几乎可以在任何框架中使用JavaScript。使用什么类型的框架决定了创建应用程序的便捷程度。因此，您必须慎重选择。在已经足够复杂的前端环境里，其中两个框架脱颖而出。我们会在本文中对Ember.js和Vue.js之间进行对比，以帮助你更好的做出判断。为什么要选择框架... 继续阅读 >
2021
06-23

Vue开发指南之重点知识梳理

概述如果您是Vue开发的新手，您可能已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等。另外您可能还经常听到和Vue一起提到的工具和库，如Vuex、Webpack、VueCLI和Nuxt。也许您在面对这些未知的术语和工具时会感到无助和绝望，没关系，您并不孤单，因为这是所有新手在初次接触Vue时都会有的感受。但如果您试图要一次掌握所有这些内容，那么这些庞大的体系很可能会压垮你。为此，我在这里将为大家... 继续阅读 >
2021
06-23

VUE+Canvas实现简单五子棋游戏的全过程

前言在布局上，五子棋相比那些目标是随机运动的游戏，实现起来相对简单许多，思路也很清晰，总共分为：（1）画棋盘；（2）监听点击事件画黑白棋子；（3）每次落子之后判断是否有5子相连，有则赢。最复杂的恐怕就是如何判断五子棋赢了，那么就先从简单的开始，画个棋盘吧~1、画棋盘棋盘很简单，我们画个15*15的棋盘，横线竖线相交错：drawCheckerboard(){//画棋盘let_this=this;_this.ctx.beginPath();... 继续阅读 >
2021
06-23

Vue详细的入门笔记

一、前言最近找了些教程，顺带着趴在官网上，看了看Vue的一些内容，入门的一些概念，以及基础语法，还有一些常用的操作，瞄了一眼，通篇文字+贴了部分代码9000多字，入门语法什么的还是很好理解的，以前也有一定做小程序的基础，感觉还是很相似的，不过对于一些稍复杂的点，感觉还是总结的不够细致，例如插槽，和计算属性等，平时前端的东西看的也不是很多，学习过程中整理的笔记，和大家一起分享交流！欢迎各位大大交流意见~... 继续阅读 >
2021
06-22

如何理解Vue前后端数据交互与显示

一、技术概述将后端所计算的数据呈现在前端页面的相应位置并根据用户点击操作改变相应的数据和界面，再传值给后端。该技术是Web开发必备，是前后端交互的纽带。难点在于获取后端数据并且防止数据联动。二、技术详述1.从接口获取后端数据(1)仔细查看后端所传数据的类型。主要是区分数组和单个数据。查看后端的请求方式，区分post或者get。(2)首先，在data中return一个xxxData:[]数组或一个变量xxxData:<类型>来接收后端传来的数... 继续阅读 >