生命不息,编程不止

deniro's thinking

说说 Vuex 的 actions 属性

Vuex 的 action 属性内,可以定义异步操作逻辑,以满足某些业务场景要求。在组件内,是通过 $store.dispatch 来触发 action 定义的函数。 我们使用 action,来为计数器异步增 1。 1 Promise 方式 main.js: const store = new V...

2019-04-14 11:43:37

阅读数 153

评论数 0

说说 Vuex 的 getters 属性

1 应用场景 假设我们在 Vuex 中定义了一个数组: const store = new Vuex.Store({ state: { list:[1,3,5,7,9,20,30] } ... }) 业务场景希望过滤出大于 5 的数。马上想到的方法可能的是:在...

2019-04-14 09:07:59

阅读数 110

评论数 0

说说如何使用 Vuex 进行状态管理

1 为什么需要状态管理 一个 Vue 组件分为数据(model)与视图(view)。当通过 methods 中的方法更新数据时,视图也会自动更新。 message.vue <template> <div> {{mess...

2019-04-13 21:19:01

阅读数 66

评论数 0

说说 vue-router 组件的高级应用

1 动态设置页面标题 页面标题是由 <title></title> 来控制的,因为 SPA 只有一个 HTML,所以当切换到不同的页面时,标题是不会发生变化的。必须通过 JavaScript 来修改 <title>...

2019-04-05 19:56:33

阅读数 103

评论数 0

说说如何使用 vue-router 实现页面跳转

vue-router 有两种实现页面跳转的方法。 1 <router-link> 组件 <template> <div> <h3>首页</h3&am...

2019-04-05 15:27:01

阅读数 82

评论数 0

说说如何使用 vue-router 插件

1 安装 首先,通过 npm 安装 vue-router 插件: npm install --save vue-router 安装的插件版本是:vue-router@3.0.2 2 用法 2.1 新建 vue 组件 在 router 目录中,新建 views 目录,然后新建两个 vue 组件(...

2019-04-05 14:39:47

阅读数 70

评论数 0

说说如何利用 Webpack 来搭建 Vue 单文件组件环境

首先必须先安装与配置好 Webpack。可参考以下内容: 说说如何安装 Webpack 说说如何配置 Webpack .vue 单文件组件:是一个后缀名为 .vue 的文件,我们可以利用 Webpack 的 vue-loader 插件来处理 *.vue 的文件。 1 安装加载器 使用 npm...

2019-03-17 14:31:55

阅读数 99

评论数 0

说说如何配置 Webpack

1 基本配置 Webpack 最关键的就是 webpack.config.js 配置文件,架构的好坏都体现在这个配置文件中。 我们在工程所在的根目录,新建一个 webpack.config.js,初始化为: var config = {}; module.exports = config; 如...

2019-03-03 16:19:19

阅读数 76

评论数 0

说说如何基于 Vue.js 实现表格组件

我们基于 Vue.js 实现一个可根据某列进行排序的表格组件。 一个表格包含表头和数据两部分内容。因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在此指定某一列是否需要排序;data 表示数据。 html: &a...

2019-02-17 14:12:32

阅读数 218

评论数 0

说说 Vue.js 中的 functional 函数化组件

Vue.js 组件提供了一个 functional 开关,设置为 true 后,就可以让组件变为无状态、无实例的函数化组件。因为只是函数,所以渲染的开销相对来说,较小。 函数化的组件中的 Render 函数,提供了第二个参数 context 作为上下文,data、props、slots、chi...

2019-02-07 14:32:34

阅读数 449

评论数 0

说说如何利用 Render 函数来实现 Vue.js 的内置指令

因为在 Render 函数中无法使用 Vue 内置指令,比如 v-if 等,但我们可以在 Render 函数中,利用原生的 JavaScript 来实现这些指令。 1 v-if/v-else html: <div id="app&a...

2019-02-03 18:18:36

阅读数 105

评论数 0

说说 Vue.js 中的 Render 函数

1 引子 锚点是网页中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。它的英文名是 anchor。 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。 如...

2019-01-13 14:35:19

阅读数 125

评论数 0

说说 Vue.js 中的 Virtual DOM 技术

Virtual DOM 不是 DOM ,它是一个轻量级的 JavaScript 对象,当状态发生变化时, Virtual DOM 会进行 Diff 运算,只更新那些需要真正被替换的 DOM 。 因为 Virtual DOM 只是基于 JavaScript 进行计算,所以相对于 DOM 来说,性...

2019-01-12 15:45:31

阅读数 111

评论数 0

说说在 Vue.js 中,如何实现时间转换指令

在社区中,发布的动态信息,经常会有一个相对余实际发布时间的相对时间。比如这里的微博: 服务端存储的时间格式,一般为 Unix 时间戳,比如 2019/1/6 13:40:1 的Unix 时间戳为 1546753201651。前端在获取到这个时间戳之后,会转换为可读格式的时间。在社交类产品中,一...

2019-01-06 14:31:44

阅读数 121

评论数 0

说说在 Vue.js 中,如何实现自定义下拉菜单指令

我们利用 Vue.js 的自定义指令能力,来实现一个自定义下拉菜单功能。描述如下: 点击按钮,弹出下拉菜单。 点击下拉菜单之外的区域,关闭下拉菜单。 1基础版 html: <!DOCTYPE html> <html lang...

2019-01-05 18:37:10

阅读数 103

评论数 0

说说 Vue.js 中的自定义指令

如果需要直接操作 DOM,那么就会用到自定义指令啦。 1 注册 注册自定义指令分为全局注册与局部注册两种: 全局注册: Vue.directive('xxx', { inserted: function (el) { //指令属性 } ...

2019-01-05 15:54:49

阅读数 94

评论数 0

说说如何在 Vue.js 中实现标签页组件

标签页组件,即实现选项卡切换,常用于平级内容的收纳与展示。 因为每个标签页的内容是由使用组件的父级控制的,即这部分内容为一个 slot。所以一般的设计方案是,在 slot 中定义多个 div,然后在接到切换消息时,再显示或隐藏相关的 div。这里面就把相关的交互逻辑也编写进来了,我们希望在组件中...

2018-12-31 20:14:42

阅读数 268

评论数 1

说说如何在 Vue.js 中实现数字输入组件

我们对普通输入框进行扩展,实现一个可快捷输入数字组件。 首先制定规则: 只能输入数字。 设计两个快捷按钮,可直接在当前值的基础上增 1 或者减 1。 数字输入组件可设置初始值、最大值与最小值。 接着,规划好 API。一个 Vue.js 组件最重要的 3 个部分就是 props、events ...

2018-12-30 20:18:26

阅读数 690

评论数 1

说说 Vue.js 组件的高级特性-续篇

1 $nextTick Vue.js 在检测到数据发生变化时,会先开启一个队列,并在内存中循环遍历所有的数据改变,去除中间数据改变过程,直接执行实际工作(比如 for 循环改变某个变量 10 次,那么 Vue.js 只会执行最后一次更新操作)。这样可以避免不必要的计算以及 DOM 操作,从而提高...

2018-12-29 15:54:33

阅读数 102

评论数 0

说说 Vue.js 组件的高级特性

1 递归 为组件设置 name 属性,这个组件就可以在自身的模板内递归调用自己。 html: <div id="app"> <deniro-component :count=&q...

2018-12-23 15:44:41

阅读数 132

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭