@黄小泽的个人博客

历年工作中供职项目主管、高级前端开发工程师、前端部门经理，博客内容将专注于前端领域学习和经验分享

12月 11月 09月 08月 07月 06月 05月 04月 03月 01月

原创前端框架vue.js系列（13）：路由

路由是指实现单页面的效果，它需要使用到 vue-router.js，可以到官网去下载，vue-router.js要与vue.js版本一致，若使用vue脚手架将自带路由功能。参考demo：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title

2017-09-30 16:31:50 744

原创前端框架vue.js系列（12）：mixins和自定义指令

本篇将介绍两个新的概念：混合、自定义指令。它们在构造大型项目时的可复用性上有不可或缺的地位。mixinsmixins（混入）是一种分发vue组件中可复用功能的非常灵活的方式，接受的是一个对象数组数据格式。换种说法，mixins类似于java的继承，定义一个被继承的对象myMixin，让vue的构造继承myMixin，最后通过组件或实例初始化该vue构造。如果对vue构造、组件和实例概念不熟...

2017-09-30 15:03:32 1061

原创前端框架vue.js系列（11）：元素动画过渡效果

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。它们包括：（1）在CSS过渡和动画中自动应用 class（2）配合使用第三方 CSS 动画库，引入animate.css实现效果过渡（3）配合使用第三方 JavaScript 动画库，引入velocity.js实现效果过渡（4）引入tween.js数值实现数值过渡在CSS过渡和动画中自动应用 cl

2017-09-30 10:53:40 1086 1

原创前端框架vue.js系列（10）：生命周期钩子函数

每个vue实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到dom、在数据变化时更新dom等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。下图说明了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。实例中的生命周期钩子可以分为以下8种情况：be...

2017-09-29 17:10:14 2003

原创前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue

vue构造、vue组件和vue实例这三个是不同的概念，它们的关系有点类似于Java的继承概念：关系：vue构造->vue组件->vue实例也就是说不同的vue组件可以共用同一个vue构造，不同的vue实例可以共用同一个vue组件。在大型项目中，用过java开发的都知道，继承是非常重要的，前端也一样。我们先看看他们之间的实现代码区别：<script> //vu...

2017-09-29 14:39:32 14970 2

原创前端框架vue.js系列（8）：嵌套元素、导入外部文件作为模板

组件嵌套元素一般定义组件，组件内不会再嵌套其他元素标签，如下所示：<my-component :item="item"> <p>我是嵌套标签</p></my-component>此时<p>元素标签并不会渲染出来。当然，正常情况下也不会有这种需求，因为如果你需要显示<p>标签，只要写入到<my

2017-09-29 10:28:29 4040

原创前端框架vue.js系列（7）：数据传递规范

父组件向子组件传参分两种数据类型：基础类型和引用类型。子组件通过props属性接收来自父组件的参数。请看下面demo：<my-component :itemobject="itemobject" :itembase="itembase"></my-component><script> Vue.component("my-component", { ..

2017-09-29 09:49:00 778

原创前端框架vue.js系列（6）：组合组件和动态组件

组合组件组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。换种说法，组件就是一个个小的可复用零件，通过这些复用零件的组合使用可以搭建起一个大型机械。我们先来看一个组件的demo：<div id="app-7"> <ol> <todo-...

2017-09-28 17:00:28 2771

原创前端框架vue.js系列（5）：表单元素的双向绑定

vue中常用到的表单组件主要有文本输入框，单选框，多选框和下拉列框。本篇将会讲述如何使用这些原生组件及这些组件在vue框架中的一些特性。vue与这些组件的绑定方法是：v-model，这种绑定是双向绑定。文本输入框文本输入框是type='text'的input元素，绑定方法如下：<input type="text" v-model="message"><label&...

2017-09-28 15:30:12 519

原创前端框架vue.js系列（4）：事件修饰符与按键修饰符

vue修饰符是指在触发事件或按键时额外的触发条件或回调。比如点击事件只允许触发一次，可以使用@click.once。原生事件对象vue可以通过以下方式，获取原生的事件对象：<button @click="getEventDom($event);">getEventDom</button><script> var vue = new Vu...

2017-09-27 15:25:00 1330

原创前端框架vue.js系列（3）：样式语法

根据以往vue的实际开发经验，需求中常常需要动态变化某些元素样式，如选中当前项时样式变为高亮。这时使用vue原生自带的方法来修改样式会更加方便。通常vue调用样式有3种语法，它们分别是：内联语法、对象语法及数组语法。内联语法用:style="{}"的方式按原生格式添加样式,如:style="{color:'red',fontWeight:'bold' }"<p :styl...

2017-09-27 10:43:00 917

原创前端框架vue.js系列（2）：条件v-if/v-show与循环v-for

条件通常用于显示隐藏，使用v-if或v-show实现。v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下， v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说， v-if ...

2017-09-27 09:48:50 742 1

原创前端框架vue.js系列（1）：初学入门

vue是一套构建用户界面的渐进式框架，其核心库只关注视图层，通过使用vue手脚架，它完全能够为复杂的单页应用程序提供驱动。为了便于初学者入门vue语法，介绍语法部分均通过引用vue.js文件的方式来引入vue，在实际项目开发中，建议尽量使用vue手脚架开发和npm来维护。渐进式框架那么，什么叫渐进式框架？渐进式框架可以理解为能支持任何其他前端框架及类库的一种框架。这就意味着vue框架...

2017-09-22 16:49:57 1549 4