Vue.js
文章平均质量分 88
Deniro Lee
这个作者很懒,什么都没留下…
展开
-
说说如何基于 Vue.js 、element UI 与 Echart 实现一张地图展示多个区域提示框
1 需求变更省级区域图实现效果给客户看了之后,客户希望可以一次性把所有区域的数据展示在地图周围。原计划是想用 echart 的 tooltip 提示框组件来实现。实验之后发现 echart 地图只支持弹出一个 tooltip 提示框。这样显然无法满足要求。转而考虑使用 element UI 的 tooltip 组件。实现效果:2 element UI Tooltip 组件Tool...原创 2020-04-04 12:02:37 · 871 阅读 · 0 评论 -
说说如何基于 Vue.js 与 ECharts 实现省级区域图
ECharts,是一个使用 JavaScript 实现的开源可视化库,可以流畅地运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的...原创 2020-04-04 11:55:40 · 510 阅读 · 0 评论 -
说说 Vue.js + Echarts 堆叠条形图,如何不显示为 0 的数据
Echarts 堆叠条形图,可以一次性显示不同状态的统计数据。但如果数据中包含 0,那么就是挤在一起,影响前一个状态数据的显示:我们可以为 series 中每一项的 label.normal 添加相应的 formatter 函数,让其返回空串,具体代码如下。首先在 Vue.js 的 methods 中新增一个转换函数:zero_format(){ return function (p...原创 2019-10-27 09:58:53 · 2278 阅读 · 0 评论 -
说说如何在 element UI 的 Table 数据中加入跳转链接
我们使用 Vue.js 的 slot-scope 特性,来实现加入跳转链接功能。在 <template> 上使用特殊的 slot-scope 特性,可以接收传递给插槽的 prop 属性。示例:<el-table-column prop="name" label="任务" align="left" width="900"> <templa...原创 2019-10-13 11:34:06 · 6903 阅读 · 6 评论 -
Vue.js 组件中绑定点击事件不生效的解决方法
在使用组件(比如 element UI)的过程中,会发现无法通过 @click 绑定标签的点击事件。因为 Vue.js 使用的是一套自己的事件传递机制,所以我们需要添加 @click.native 来绑定 DOM 原生事件。示例:<el-tag v-for="name in members" @click.native="filter(name)" class="member_tag...原创 2019-10-13 11:31:51 · 6681 阅读 · 3 评论 -
说说 Vuex 的 actions 属性
Vuex 的 action 属性内,可以定义异步操作逻辑,以满足某些业务场景要求。在组件内,是通过 $store.dispatch 来触发 action 定义的函数。我们使用 action,来为计数器异步增 1。1 Promise 方式main.js:const store = new Vuex.Store({ state: { count: 0, },...原创 2019-04-14 11:43:37 · 1259 阅读 · 0 评论 -
说说 Vuex 的 getters 属性
1 应用场景假设我们在 Vuex 中定义了一个数组:const store = new Vuex.Store({ state: { list:[1,3,5,7,9,20,30] } ...})业务场景希望过滤出大于 5 的数。马上想到的方法可能的是:在组件的计算属性中进行过滤:<template> <div> ...原创 2019-04-14 09:07:59 · 420 阅读 · 0 评论 -
说说如何使用 Vuex 进行状态管理
1 为什么需要状态管理一个 Vue 组件分为数据(model)与视图(view)。当通过 methods 中的方法更新数据时,视图也会自动更新。message.vue<template> <div> {{message}} <button @click="changeMessage">改变内容</button...原创 2019-04-13 21:19:01 · 318 阅读 · 0 评论 -
说说 vue-router 组件的高级应用
1 动态设置页面标题页面标题是由 <title></title> 来控制的,因为 SPA 只有一个 HTML,所以当切换到不同的页面时,标题是不会发生变化的。必须通过 JavaScript 来修改 <title></title> 中的内容:window.document.title ='xxx'有一种思路是在每个页面的 *.vue 的 m...原创 2019-04-05 19:56:33 · 517 阅读 · 0 评论 -
说说如何使用 vue-router 实现页面跳转
vue-router 有两种实现页面跳转的方法。1 <router-link> 组件<template> <div> <h3>首页</h3> <router-link to="/about">关于我们</router-link> </div><...原创 2019-04-05 15:27:01 · 485 阅读 · 0 评论 -
说说如何使用 vue-router 插件
1 安装首先,通过 npm 安装 vue-router 插件:npm install --save vue-router安装的插件版本是:[email protected] 用法2.1 新建 vue 组件在 router 目录中,新建 views 目录,然后新建两个 vue 组件(一个页面就对应一个组件)。index.vue:<template> <...原创 2019-04-05 14:39:47 · 383 阅读 · 0 评论 -
说说如何利用 Webpack 来搭建 Vue 单文件组件环境
首先必须先安装与配置好 Webpack。可参考以下内容:说说如何安装 Webpack说说如何配置 Webpack.vue 单文件组件:是一个后缀名为 .vue 的文件,我们可以利用 Webpack 的 vue-loader 插件来处理 *.vue 的文件。1 安装加载器使用 npm 安装 vue-loader、vue-style-loader、babel 以及 babel-load...原创 2019-03-17 14:31:55 · 490 阅读 · 0 评论 -
说说如何配置 Webpack
1 基本配置Webpack 最关键的就是 webpack.config.js 配置文件,架构的好坏都体现在这个配置文件中。我们在工程所在的根目录,新建一个 webpack.config.js,初始化为:var config = {};module.exports = config;如果 IDE 安装了支持 ES6 的编译插件,那么这里就可以直接使用 ES6 的导出语法:export...原创 2019-03-03 16:19:19 · 538 阅读 · 0 评论 -
说说如何基于 Vue.js 实现表格组件
我们基于 Vue.js 实现一个可根据某列进行排序的表格组件。一个表格包含表头和数据两部分内容。因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在此指定某一列是否需要排序;data 表示数据。html:<div id="app" v-cloak> <v-table :data="data" :columns="c...原创 2019-02-17 14:12:32 · 2086 阅读 · 0 评论 -
说说 Vue.js 中的 functional 函数化组件
Vue.js 组件提供了一个 functional 开关,设置为 true 后,就可以让组件变为无状态、无实例的函数化组件。因为只是函数,所以渲染的开销相对来说,较小。函数化的组件中的 Render 函数,提供了第二个参数 context 作为上下文,data、props、slots、children 以及 parent 都可以通过 context 来访问。1 示例这里,我们用 fun...原创 2019-02-07 14:32:34 · 9094 阅读 · 0 评论 -
说说如何利用 Render 函数来实现 Vue.js 的内置指令
因为在 Render 函数中无法使用 Vue 内置指令,比如 v-if 等,但我们可以在 Render 函数中,利用原生的 JavaScript 来实现这些指令。1 v-if/v-elsehtml:&lt;div id="app"&gt; &lt;e :is-show="isShow"&gt;&lt;/e&gt; &a原创 2019-02-03 18:18:36 · 1730 阅读 · 0 评论 -
说说 Vue.js 中的 Render 函数
1 引子锚点是网页中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。它的英文名是 anchor。使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。如果把这个功能封装为组件,它一般是这样写的:html:<div id="app"> ...原创 2019-01-13 14:35:19 · 1104 阅读 · 0 评论 -
说说 Vue.js 中的 Virtual DOM 技术
Virtual DOM 不是 DOM ,它是一个轻量级的 JavaScript 对象,当状态发生变化时, Virtual DOM 会进行 Diff 运算,只更新那些需要真正被替换的 DOM 。因为 Virtual DOM 只是基于 JavaScript 进行计算,所以相对于 DOM 来说,性能更高,开销更小。Vue.js 2 中的 Virtual DOM 是通过 VNode 来实现的,...原创 2019-01-12 15:45:31 · 490 阅读 · 0 评论 -
说说在 Vue.js 中,如何实现时间转换指令
在社区中,发布的动态信息,经常会有一个相对余实际发布时间的相对时间。比如这里的微博:服务端存储的时间格式,一般为 Unix 时间戳,比如 2019/1/6 13:40:1 的Unix 时间戳为 1546753201651。前端在获取到这个时间戳之后,会转换为可读格式的时间。在社交类产品中,一般会将时间戳转换为 x 分钟前,x 小时前或者 x 天前,因为这样的显示方式用户体验更好。我们可以自...原创 2019-01-06 14:31:44 · 716 阅读 · 0 评论 -
说说在 Vue.js 中,如何实现自定义下拉菜单指令
我们利用 Vue.js 的自定义指令能力,来实现一个自定义下拉菜单功能。描述如下:点击按钮,弹出下拉菜单。点击下拉菜单之外的区域,关闭下拉菜单。1基础版html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g原创 2019-01-05 18:37:10 · 774 阅读 · 0 评论 -
说说 Vue.js 中的自定义指令
如果需要直接操作 DOM,那么就会用到自定义指令啦。1 注册注册自定义指令分为全局注册与局部注册两种:全局注册: Vue.directive('xxx', { inserted: function (el) { //指令属性 } });局部注册:var app = new Vue({ el: '#app', di...原创 2019-01-05 15:54:49 · 324 阅读 · 0 评论 -
说说如何在 Vue.js 中实现标签页组件
标签页组件,即实现选项卡切换,常用于平级内容的收纳与展示。因为每个标签页的内容是由使用组件的父级控制的,即这部分内容为一个 slot。所以一般的设计方案是,在 slot 中定义多个 div,然后在接到切换消息时,再显示或隐藏相关的 div。这里面就把相关的交互逻辑也编写进来了,我们希望在组件中处理这些交互逻辑,slot 只单纯处理业务逻辑。这可以通过再定义一个 pane 组件来实现,pane ...原创 2018-12-31 20:14:42 · 941 阅读 · 0 评论 -
说说如何在 Vue.js 中实现数字输入组件
我们对普通输入框进行扩展,实现一个可快捷输入数字组件。首先制定规则:只能输入数字。设计两个快捷按钮,可直接在当前值的基础上增 1 或者减 1。数字输入组件可设置初始值、最大值与最小值。接着,规划好 API。一个 Vue.js 组件最重要的 3 个部分就是 props、events 以及 slot,我们需要定义这三个部分的命名以及业务规则。这个组件比较简单,所以我们只用到 prop...原创 2018-12-30 20:18:26 · 1372 阅读 · 0 评论 -
说说 Vue.js 组件的高级特性-续篇
1 $nextTickVue.js 在检测到数据发生变化时,会先开启一个队列,并在内存中循环遍历所有的数据改变,去除中间数据改变过程,直接执行实际工作(比如 for 循环改变某个变量 10 次,那么 Vue.js 只会执行最后一次更新操作)。这样可以避免不必要的计算以及 DOM 操作,从而提高性能。这个队列叫做异步更新队列。我们来看这样一个场景:一个默认隐藏的 DIV。点击按钮后,显示这个 ...原创 2018-12-29 15:54:33 · 445 阅读 · 0 评论 -
说说 Vue.js 组件的高级特性
1 递归为组件设置 name 属性,这个组件就可以在自身的模板内递归调用自己。html:<div id="app"> <deniro-component :count="1"></deniro-component></div>js:Vue.component('deniro-component',{ name:'deniro...原创 2018-12-23 15:44:41 · 444 阅读 · 0 评论 -
说说如何使用 Vue.js 中的 slot 实现内容分发
当需要组合组件,即混合父组件内容与子组件模板时,就需要用到 slot。一个组件不管多么复杂,都是由以下三个部分组成的:props - 传递数据events - 触发事件slot - 分发内容1 组件作用域html:&lt;div id="app"&gt; &lt;child v-show="isShow"&gt;&lt;/chil原创 2018-12-23 13:46:22 · 367 阅读 · 0 评论 -
说说在 Vue.js 中如何实现组件间通信(高级篇)
之前说过,可以使用 props 将数据从父组件传递给子组件。其实还有其它种的通信方式,下面我们一一娓娓道来。1 自定义事件通过自定义事件,我们可以把数据从子组件传输回父组件。子组件通过 $emit() 来触发事件,而父组件通过 $on() 来监听事件,这是典型的观察者模式。html:<div id="app"> <p>总数:{{total}}</p&...原创 2018-12-09 16:27:33 · 913 阅读 · 0 评论 -
说说在 Vue.js 中如何实现组件间通信
1 用法假设父组件的模板包含子组件,我们可以通过 props 来正向地把数据从父组件传递给子组件。props 可以是字符串数组,也可以是对象。html:<div id="app"> <deniro-component message=""嫦娥四号"成功发射升空 飞向月球背面要登陆"></deniro-component></div>...原创 2018-12-08 17:44:09 · 309 阅读 · 0 评论 -
说说 Vue.js 组件
使用 Vue.js 组件,可以提高控件及其 JS 能力的可复用性。1 定义第一个组件Vue.js 组件需要注册后才可以使用,注册分为全局注册和局部注册。全局注册后,任何 vue 实例都可以用这个组件。html:<div id="app"> <deniro-component></deniro-component></div>j...原创 2018-12-07 18:22:02 · 236 阅读 · 0 评论 -
说说 Vue.js v-model 指令的修饰符
1 .lazyv-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外)。我们可以使用 .lazy 懒加载修饰符,让其只在 change 事件中再加载输入框中的数据。html:<div id="app"> <input type="text" v-model.lazy="content" placeholder="请输入"...原创 2018-12-02 16:32:28 · 815 阅读 · 0 评论 -
说说 Vue.js 中的 v-model 指令以及如何绑定表单元素
我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定。1 基础用法1.1 文本输入框(text)这里演示了在文本输入框上输入的内容,会实时映射到绑定的数据上。html:<div id="app"> <input type="text" v-model="content" placeholder="请输入"> <原创 2018-12-02 16:08:43 · 1977 阅读 · 0 评论 -
说说如何使用 Vue.js 开发购物车功能
购物车一般包含商品名称、单价、数量等信息,数量可以任意新增或减少,商品项也可删除,还可以支持全选或多选:我们把这个小项目分为三个文件:index.html (页面)index.js (Vue 脚本)style.css (样式)1 index.js首先在 js 中初始化 Vue 实例,整体模板如下:var app = new Vue({ el: '#app', ...原创 2018-11-24 20:34:21 · 669 阅读 · 1 评论 -
说说 Vue.js 中的 v-on 事件指令
v-on 事件指令用于绑定事件。1 基础用法v-on 指令绑定事件后,就会监听相应的事件。html:<div id="app"> <h3>已点击 {{count}} 次</h3> <button @click="count++">点我</button></div>注意:原创 2018-11-24 11:14:38 · 440 阅读 · 0 评论 -
说说 Vue.js 中的 v-for 列表渲染指令
1 基本用法当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for。 它的表达式需要结合 in 来使用,类似 item in items 的形式。1.1 遍历数组html:<div id="app"> <ul> <li v-for="n in news">{{n.title}}</li> ...原创 2018-11-18 16:06:05 · 812 阅读 · 0 评论 -
说说 Vue.js 中的 v-show 指令
1 用法v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏。html:<div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p></div>js:<script> var app = new原创 2018-11-18 13:28:56 · 1050 阅读 · 0 评论 -
说说 Vue.js 中的条件渲染指令
1 应用于单个元素Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件。html:&lt;div id="app"&gt; &lt;p v-if="type===1"&gt;拌面&lt;/p&gt; &lt;p v-else-if="type=原创 2018-11-17 18:25:48 · 300 阅读 · 0 评论 -
说说 Vue.js 中的 v-once 指令
被定义了 v-once 指令的元素或组件(包括元素或组件内的所有子孙节点)只能被渲染一次。首次渲染后,即使数据发生变化,也不会被重新渲染。一般用于静态内容展示。html:<div id="app"> <div v-once> {{content}} </div></div>js:<script>...原创 2018-11-17 15:49:49 · 1335 阅读 · 0 评论 -
说说 Vue.js 中的 v-cloak 指令
可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。html:&lt;div id="app"&gt; {{context}}&lt;/div&gt;js:&原创 2018-11-17 15:15:22 · 425 阅读 · 0 评论 -
说说在 Vue.js 中如何绑定样式(class 或 style)
在数据绑定中,最常见就是动态绑定元素的 class 或内联样式 style 咯,它们也是 HTML 的属性,所以可以使用 v-bind 指令 。1 绑定 class1.1 对象语法使用 v-bind:class 属性,实现动态切换 class。html:<div id="app"> <div :class="{'hidden':isHidden}">看得...原创 2018-11-17 11:13:16 · 1195 阅读 · 0 评论 -
说说 Vue.js 的计算属性
1 应用场景Vue.js 的表达式如果因为逻辑复杂变得过长时,就会变得臃肿,以至于难以阅读和维护。这里我们对一个以分号分隔的字符串做逆序处理,并修改分隔符为逗号的表达式。html:<div id="app"> {{str.split(';').reverse().join(',')}}</div>js:var app=new Vue({ el:'#...原创 2018-10-28 14:48:15 · 333 阅读 · 0 评论