2018年12月_LorneNote

转载 Vue | 21 可复用性&组合-自定义指令

内容提要：自定义指令基本用法介绍自定义指令内部包含哪些钩子函数指令钩子内部传递哪些元素值自定义指令函数的缩略写法用例在JavaScript对象中传递多个字面值介绍除了在核心附带的默认的指令集合（v-model和v-show）外，Vue也允许你注册自定义指令。注意在Vue 2.0，代码重用和抽象的主要形式是组件-然而，可能某些情况下你可能需要针对原生元素进行一些底层的DOM访问...

2018-12-28 22:13:16 185

转载 Vue | 20 可复用性&组合-混入

内容提要：基础的混入方式操作项的合并全局的混入方式自定义操作项合并策略混入是一种非常灵活的分发Vue组件中可复用的功能模块的方式。一个混入对象能包含任何组件操作项。当一个组件使用一个混入对象的时候，在混入对象的所有操作项被‘混合’进组件自己的操作项。例如：// 定义一个混入对象var myMixin = { created: function () { ...

2018-12-24 18:55:39 261

转载 Vue | 19 过渡&动画-状态过渡

内容提要：动画的状态与监听器动态状态过渡在组件内组织过渡为设计赋予生命Vue的过渡系统提供了许多简单的方式去实现动画的进入、离开和列表的动效。但是怎么样对你的数据本身进行动画处理呢？例如：数字和计算颜色显示可缩放的矢量图形节点的位置元素的大小和其他属性所有这些或者被存储为原始数据或者被转化为数字。一旦我们这样做了，我们可以使用第三方库去把这些改变的状态做成动画，再结...

2018-12-21 19:31:17 607

转载 Vue | 18 过渡&动画-进入/离开&列表过渡

内容提要：单个元素或组件的过渡: 过渡类、CSS过渡、CSS动画、自定义过渡类、动画和过渡在一起使用、声明过渡持续时间、JavaScript钩子初始渲染的过渡元素间的过渡组件间的过渡列表的过渡：列表进入/离开过渡，列表项移动过渡，交错列表过渡可复用的过渡动态的过渡概览当项目从DOM插入、更新或删除的时候我们提供了多种方式去使用过渡效果。这包含以下工具：使用CSS过渡和...

2018-12-18 20:15:13 1363

转载 Vue | 17 组件深入-处理边界情况

内容提要：元素和组件的访问：根实例、父组件实例、子组件实例和子元素的访问方式以及依赖注入程式化事件监听器循环应用的产出原因及解决方式使用inline Templates、X-Templates替代模板定义数据更新的控制：强制更新和加载静态内容的方式这页假设你已经读了基本组件 Components Basics，如果你不了解组件知识，首先读它。这页记录了所有和处理边界情况...

2018-12-11 19:38:25 364

转载 Vue | 16 组件深入-动态的&异步的组件

内容提要：避免内容更新—keep-alive与动态组件异步加载组件的处理方式这页假定你已经了解组件基础 Components Basics，如果你不了解组件请先读它。keep-alive与动态组件之前，我们使用is属性去切换组件在标签栏界面：<component v-bind:is="currentTabComponent"></component>...

2018-12-07 20:11:35 319

转载 Vue | 15 组件深入-插槽

内容提要：插槽的内容命名的插槽默认插槽内容插槽的编译范围作用域插槽解构slot-scope这页假定你已经阅读组件基础（ Components Basics），如果你不了解组件，请先阅读它。插槽内容Vue实现了一套内容分发的API。该API基于当前Web组件规范草案 Web Components spec draft。使用slot元素去作为内容分发的出口。这允许你去像...

2018-12-06 13:06:23 197

转载 Vue | 14 组件深入-自定义事件

内容提要:事件名称命名注意事项自定义组件v-model的不同用法为组件绑定本地事件.sync修饰符的用法这页假定你已经阅读了组件基础Components Basics，如果你是组件新手请先阅读它。事件名称不像组件和props，事件名称不存在自动大小写转换。相反，事件被发出的名字必须与被监听的名字完全一致，例如，如果发送了一个 cameCased的事件名称：this.$e...

2018-12-04 20:24:46 527

转载 Vue | 13 组件深入-Props

这页假设你已经读了Components Basics，如果你不了解组件首先读它。Prop大小写（cameCase vs kebab-case）HTML属性名是大小写不敏感的，所以浏览器将解释任何大小字符作为小写字母。那意味着当你在DOM模板里使用的时候，camelCased（驼峰命名法） prop 名字会用它的等价物kebab-cased（以连字符分隔）：Vue.component('b...

2018-12-03 19:40:43 129

LorneNote