组件（component）是Vue最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码，根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己的需要，使用不同的组件来拼接页面。这种开发模式使得前端页面易于扩展，且灵活性高，而且组件之间也实现了解耦。 最近应公司的要求，需要开发一个精美的日历组件（IOS , 安卓， PC 的IE9+都能运行），写完后想把它分享出来，希望大家批评。 先来个截图 ...
本文主要介绍vue组件中使用iframe元素的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望能帮助到大家。需要在本页面中展示vue组件中的超链接，地址栏不改变的方法:<template><p class="accept-container"><p class="go-back" v-show="goBackState" @click="goBack">GoBack</p> <ul><li v-for="item in webAddress"><a :href="item.link" rel="external nofollow" target="showHere" @click="showIframe">{{it...
这篇文章主要给大家介绍了利用Vue-Router实现页面正在加载特效方法示例，文中给出了详细的示例代码，相信对大家具有一定的参考价值，有需要的朋友们下面来一起看看吧。前言vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中...
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 基础知识这里不再重述，学习的话请自行到官网学习https://vuex.vuejs.org/zh/ 文档最后有具体使用的实例，不想看基础的就直接下调页面~这里主要简单讲一讲Nuxt里怎么使用vuex， Nuxt.js 内置引用了vuex模块，所以不需要额外安装。 Nuxt.js 会尝试找到应用根目录下的store目录，...
一：使用场景哎哟，好烦啊，这个需求还么结束就来下一个需求，程序员不要排期的吗？ 没办法啊，资本主义的XX嘴脸啊 来吧，技术评审我俩把接口格式对一把，你先开发，我这边结束了我跟上，再联调 MMP，那又增加了我的工作量啊，每次我都要自己先把数据放在一个配置文件中，引入使用，然后对接的 时候还得删除无用代码，好气 你自己Mock接口啊，就向我们后端经常用PostMan一样模拟请求啊 Mock？？我去查查看 二：Mock的概念1：Mock的...
写后台管理系统，估计有不少人遇过这样的需求：根据后台数据动态添加路由和菜单。 为什么这么做呢？因为不同的用户有不同的权限，能访问的页面是不一样的。 在网上找了好多资料，终于想到了解决办法。 动态生成路由利用 vue-router 的 addRoutes 方法可以动态添加路由。 先看一下官方介绍： router.addRoutes router.addRoutes(routes: Array<RouteConfig>)动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 举...
一、前言 在广告机项目中，角色的权限管理是卡了挺久的一个难点。首先我们确定的权限控制分为两大部分，其中根据粒的大小分的更细： 1、接口访问的权限控制 2、页面的权限控制 菜单中的页面是否能被访问页面中的按钮（增、删、改）的权限控制是否显示下面我们就看一看是如何实现这些个权限控制的。 二、接口访问的权限控制 接口权限就是对用户的校验。正常来说，在用户登录时服务器需要给前台返回一个Token,然后在以后前台每次调用...
我想实现读取一个本地的xlsx文件(task_list.xlsx)然后显示在网页上, 一开始选择的方法是建个express server, 通过发送axios请求来实现, 但是觉得只是读取一个本地文件还要搞个server太复杂了, 最终还是通过"xlsx"模块 + axios实现了读取本地文件, 无需后端, 步骤如下: 1.通过vue-cli新建项目:2.编写分析excel workbook的脚本/src/scripts/read_xlsx.js const XLSX = require(xlsx)//将行,列转换 function transformSheets(sheets) ...
Vue.js 允许自定义过滤器，一般可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： <!-- 在双花括号中 --> {{ message | capitalize }}<!-- 在 v-bind 中 --> <div v-bind:id="rawId | formatId"></div>可以在一个组件的选项中定义私有的过滤器： filters: {dateFormat： (dataStr) => {var time = new Date(dataStr);function timeAdd...
第一步 安装安装crypto-js第二步 创建在js文件目录下创建一个js文件secret/*** 对页面上输入的密码进行加密传输给后台进行验证，对返回的数据进行解密，在页面展示*/ let CryptoJS = require(crypto-js); // 引入AES源码js export default { /* * 对密码进行加密，传输给后台进行验证 * @param {String} word 需要加密的密码 * @param {String} keyStr 对密码加密的秘钥 * @return {String} 加密的密文 * */ encrypt(word,...
第一次使用mpvue框架来写小程序，项目开发直接搬用mpvue-shop（一个仿网易严选的小程序开发项目）,项目结构清楚,实现了大部分功能，对于初次使用mpvue的小伙伴们来说，是一个很好的选择。 关于组件的选择： 1.echarts-for-weixin,官方echarts的小程序版本。使用参考：echarts-for-weixin介绍，如果你是原生开发小程序版本，这个组件非常适合你，开发过程中可使用echarts官方提供的所有配置和Api,但并不适合mpvue项目。 2、wx-chart...
昨天在用vue开发项目的时候遇到一个坑，在群友的探讨中，成功的解决了这一问题。具体情形如下：使用vue开发，在页面中有一个人数统计组件，人数统计是要动态变化数据的，由于目前没有真实数据，那么我想的是用随机数和setInterval来改变data里面的数据，从而做到数据实时变化，这样方便与我来做数字翻页动画。代码如下：<template><div class="totel-number"><div class="panel-top"><div class="panel-top_Left"></div><div class...
第一步 去高德地图开放平台申请密钥 高德地图开放平台第二部 在vue-cli项目目录结构 里面多了config文件夹和 utils文件夹 config.js里面是这样的 主要是导出密钥 // 高德地图 key export const MapKey = 你的密钥key // 地图限定城市 export const MapCityName = 武汉utils文件夹里面 新建路一个remoteLoad.js 主要是动态创建script标签 封装了一个函数 传入URL地址（） export default function remoteLoad (url, hasCallback...
前言 echarts 提供了直观，交互丰富，可高度个性化定制的数据可视化图表。而vue更合适操纵数据。 最近一直忙着搬家，就没有更新博客，今天抽出空来写一篇关于vue和echarts的博客。下面是结合地图的一个小的echarts demo，我在使用npm的时候对比了echarts和vue-echarts两个依赖，最后决定使用echarts依赖包，因为它更接近原生，使用现实更小，如果对vue生命周期比较了解，那就更容易操作。 下面讲一下做出这样一个echarts图。话不多...
前言：vue3.0要用Proxy来实现双向绑定，因此先来尝试一下实现方法。 1 Object.defineProperty 实现原来vue2的实现使用Object.defineProperty，监听set，但对于数组直接下标给数组设置值监听不了。 function observe(data) {if (!data || typeof data !== object) {return;}// 取出所有属性遍历Object.keys(data).forEach(function(key) {defineReactive(data, key, data[key]);}); };function defineReactive(data, key, val) {obs...