vue
Vue可复用过渡和动态过渡
本文将详细介绍Vue可复用过渡和动态过渡 可复用过渡 过渡可以通过Vue的组件系统实现复用。要创建一个可复用过渡组件，需要做的就是将 <transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其...
Vue多元素过渡
前面分别介绍了单元素过渡的CSS过渡和JS过渡，本文将详细介绍Vue多元素过渡 常见示例 最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：<transition><tablev-if="items.length>0"><!--...--></ta...
Vue组件实例间的直接访问
有时候需要父组件访问子组件，子组件访问父组件，或者是子组件访问根组件。在组件实例中，Vue提供了相应的属性，包括$parent、$children、$refs和$root，这些属性都挂载在组件的this上。本文将详细介绍Vue组件实例间的直接访问 $parent $parent表示父组件的实例，该属性只...
Vue动态组件
让多个组件使用同一个挂载点，并动态切换，这就是动态组件。本文将详细介绍Vue动态组件 概述 通过使用保留的<component>元素，动态地绑定到它的is特性，可以实现动态组件<divid="example"><button@click="change">切换页面&l...
Vue内容分发slot
为了让组件可以组合，需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发(或“transclusion”)。Vue实现了一个内容分发API，参照了当前Web组件规范草案，使用特殊的<slot>元素作为原始内容的插槽。本文将详细介绍Vue内容分发slot&nbs...
Vue自定义事件
父组件使用props传递数据给子组件，子组件怎么跟父组件通信呢？这时，Vue的自定义事件就派上用场了。本文将详细介绍Vue自定义事件 事件绑定 每个Vue实例都实现了事件接口(Eventsinterface)，即使用$on(eventName)监听事件使用$emit(eventName)触发事件 [注...
Vue组件选项props
组件接受的选项大部分与Vue实例一样，而选项props是组件中非常重要的一个选项。在Vue中，父子组件的关系可以总结为 propsdown,eventsup。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。本文将详细介绍Vu...
Vue响应式原理
Vue最显著的特性之一便是不太引人注意的响应式系统(reactivitysystem)。模型层(model)只是普通JS对象，修改它则更新视图(view)。这会让状态管理变得非常简单且直观，不过理解它的工作原理以避免一些常见的问题也是很重要的。本文将详细介绍Vue响应式系统的底层细节 追踪变化 把一个普...
Vue自定义指令
除了默认设置的核心指令(v-model和v-show)，Vue也允许注册自定义指令。在Vue里，代码复用的主要形式和抽象是组件。然而，有的情况下，仍然需要对纯DOM元素进行底层操作，这时候就会用到自定义指令。本文将详细介绍Vue自定义指令 指令注册 以一个input元素自动获得焦点为例，当页面加载时，使...
Vue实例生命周期
Vue实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。在此过程中，我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例生命周期的图示 解释 接下来，根据提供的生命周期钩子，对Vue实例各个阶段的情况进...
Vue表单控件绑定
本文将详细介绍Vue表单控件绑定 基础用法 可以用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据 [注意]v-model会忽略所有表单元素的value、checked、selecte...
Vue学习目录
近年来，前端框架发展火热，新的框架和名词不停地出现在开发者眼前，而且开发模式也产生了一定的变化。目前来看，前端MVVM框架的出现给开发者带来了不小的便利，其中的代表就有Angular.js、React.js以及Vue.js。这些框架的产生使得开发者能从过去手动维护DOM状态的繁琐操作中解脱出来，尽可能地让DOM的更...
Vue事件处理
Vue事件监听的方式貌似违背了关注点分离(separationofconcern)的传统理念。实际上，所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上，它不会导致维护上的困难。使用v-on有以下好处： 1、扫一眼HTML模板便能轻松定位在JS代码里对应的方法 2、无须在JS里手动...
Vue数组更新及过滤排序
Vue为了增加列表渲染的功能，增加了一组观察数组的方法，而且可以显示一个数组的过滤或排序的副本。本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue包含一组观察数组的变异方法，它们将会触发视图更新，包含以下方法push()接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度pop()...
Vue模板逻辑
上一篇介绍了Vue的模板内容，而对于一般的模板引擎来说，除了模板内容，还包括模板逻辑。常用的模板逻辑包括条件和循环。本文将详细介绍Vue模板逻辑 条件渲染 在Vue中，实现条件逻辑依靠条件指令，包括v-if、v-else、v-else-if这三个【v-if】 根据表达式的值的真假条件渲染元素。赋值为t...
