错误大全为了测试各种异常处理技巧，我故意触发三种类型的错误。 第一种：引用一个不能存在的变量： <div id="app" v-cloak> Hello, {{name}} </div>上述代码运行后不会抛出错误，但是在控制台会有[Vue warn]消息。你可以在Codepen查看例子完整代码。 第二种：将变量绑定到一个被计算出来的属性，计算的时候会抛出异常。 <div id="app" v-cloak> Hello, {{name2}} </div> <script> const app = new Vue({ el:#app, computed:{ name...
前言深入学习 chart.js 的选项来制作漂亮的图表。交互式图表可以给你的数据可视化提供很酷的展示方式。但是大多数开箱即用的解决方案用默认的选项并不能做出很绚丽的图表。 这篇文章中，我会教你如何自定义 chart.js 选项来制作很酷的图表。 ? Quick Start我们需要： Vue.jsvue-chart.jsvue-cli使用 vue-cli 来搭基本架构，希望你已经安装好了。我们使用 vue-chart.js 来作为 chart.js 的打包器。 vue init webpack awesome-charts...
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制Vue.js关于静态资源的 官方文档 静态资源可以通过两种方式进行处理： 在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用。这类引用会被 webpack 处理。 诸如 <img src="..."> 、 background: url(...) 和 CSS @import 的资源例如， url(./image.png) 会被翻译为 require(./image.png)放置在 public 目录下或通过...
背景最近研究了vue3.0的最新进展，发现变动很大，总体上看，vue也开始向hooks靠拢，而且vue作者本人也称vue3.0的特性吸取了很多hooks的灵感。所以趁着vue3.0未正式发布前，抓紧时间研究一下hooks相关的东西。源码地址：vue-hooks-poc为什么要用hooks?首先从class-component/vue-options说起： 跨组件代码难以复用大组件，维护困难，颗粒度不好控制，细粒度划分时，组件嵌套存层次太深-影响性能类组件，this不可控，逻辑分散，不容易...
有一个项目需求，要求在前端项目中导出Excel表格，经过查找代码,Vue.js确实可以实现，具体实现步骤为： 1.安装依赖 npm install -S file-saver xlsx npm install -D script-loader2.导入两个JS 下载Blob.js和Export2Excel.js，在src目录下新建Excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件 3.在main.js引入这两个JS文件 ** import Blob from ./excel/Blob import Export2Excel from ./excel/Export2Excel.js 4.在组件中...
vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具，vue.js组件系统。 Vue.js组件系统 每一个新技术的诞生，都是为了解决特定的问题。组件的出现就是为了解决页面布局等等一系列问题。vue中的组件分为两种，全局组件和局部组件。 组件的注册 全局组件的注册 通过Vue.component()创建一个全局组件之后，我们可以在一个通过 new Vue 创建的 Vue...
综述名称：vee-validate 用途：简单的 Vue.js 表单验证插件 官网：地址 github:地址特别提示配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样 插件既可以应用于SPA也可以应用于多页面，通用性强安装单页安装npm install vee-validate --save浏览器安装 <!-- unpkg --><script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script> 引入项目单页引入import Vue from vue; import VeeValidate from vee-vali...
前言 在Vue的项目中，如果我们想要做返回、回退操作时，一般会调用router.go(n)这个api，但是实际操作中，使用这个api有风险，就是会让用户跳出当前应用，因为它记录的是浏览器的访问记录，而不是你当前应用的访问记录，这是非常可怕的事情。 解决方案就是，我们自己来维护一份history跳转记录。 案例与使用场景代码地址：https://github.com/dora-zc/mini-vue-mall （本地下载） 这是一个基于Vue.js的小型商城案例，应用场景： 自...
介绍 atom-design经过几个月的开发，以及这段时间的修复bug，对js,css压缩，按需引入处理等等的性能优化,现在已经逐渐完善.做这套UI考虑到很多性能的问题，以及如何让开发者更自由、更简单的去使用。这篇文章主要讲使用Gesture(手势)相关组件的感受。 Gesture(手势)相关组件?Carousel(传送带) ?SlideItem (滑动条) ?Range (区域选择) ?Pull Gesture (上下拉动手势) Carousel(传送带)import {Carousel} from atom-design; Vue.compo...
话不多说先上效果图，本文引荐链接https://www.gxlcms.com/article/129112.htm 这个是html, <template><div><div class="back_add"><div class="threeImg"><div class="Containt"><div class="iconleft" @click="zuohua"><i class="el-icon-arrow-left"></i></div><ul :style="{left:calleft + px}" v-on:mouseover="stopmove()" v-on:mouseout="move()"><li v-for="(item,index) in superurl" :key="index"><img :src="item.img"/...
本文我们将学习如何制作一个vue插件，并将其分发到npm上，能够让其他人安装使用.插件大大地提高了开发者的开发效率。我们的大多数项目都依赖于它们，因为它们能够以极快的速度发布新功能。 正如官方Vue.js文档中所述，插件的范围没有限制。通常我们想实现的功能有下面5种: 添加全局方法或者属性 (如: vue-custom-element)添加全局资源：指令/过滤器/过渡等 (如：vue-touch)通过全局 mixin 方法添加一些组件选项 (如：vue-router)添...
Vue 安装 vue-cli /webpack 全局安装 如果在意安装速度，可以使用淘宝镜像来安装安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org安装完淘宝镜像后，就可以使用cnpm 来代替 npm 安装工具啦 我个人比较喜欢直接使用npm 安装： 全局webpack：npm install webpack -gvue脚手架vue-cli：npm install vue-cli -g安装webpack 版vue 项目 在指定的目录中打开命令窗口（编辑器中自带的命令窗口也可以）vue ini...
利用 vue-cli 搭建的项目大都是单页面应用项目，对于简单的项目，单页面就能满足要求。但对于有多个子项目的应用，如果创建多个单页面，显示有点重复，特别是 node_modules 会有多份相同的。如果全部放到单页面项目下，又显得有点乱，这时候通过改造 vue-cli 搭建的项目为多页面，就是一个比较好的解决方法。 如何改造单页面 vue.js 项目为多页面项目？下面是这次改造的具体过程。 一、创建单页面 vue.js 项目 这里直接使用官方提...
vee-validate 是为 Vue.js 量身打造的表单校验框架，允许您校验输入的内容并显示对应的错误提示信息。它内置了很多常见的校验规则，可以组合使用多种校验规则，大部分场景只需要配置就能实现开箱即用，还支持自定义正则表达式。而且支持 40 多种语言，对本地化、多语言支持非常友好。 国内饿了么团队开源项目 Element UI 就用到了 vee-validate 。 vee-validate 官网：https://baianat.github.io/vee-validate/ 1. 安装 安装 vee-v...
1.在index.html引入高德地图JSAPI<script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script>2.地图dom <div class="map-container"><div id="container" style="width:100%;height:500px"></div> </div>3.js实现 export default {data() {},methods:{initMap(){let map = new AMap.Map(container, {features: [bg, road],resizeEnable: true,center: [116.397428, 39.90923],zoom: 11,viewMode: 2D,pitch: 50,showZoomB...