Vue
Vue相关技术分享
JustinNeil
年少是你未醒的梦话,风华是燃尽的彼岸花
展开
-
JSX
如果你写了很多 render 函数,可能会觉得下面这样的代码写起来很痛苦:createElement(‘anchored-heading’, {props: {level: 1}}, [createElement(‘span’, ‘Hello’),’ world!’])特别是对应的模板如此简单的情况下: Hello world!这就是为什么会有一个 Babel 插件...原创 2019-08-23 15:48:56 · 228 阅读 · 0 评论 -
Vue响应式原理
响应式原理概述如何追踪变化检测变化的注意事项声明响应式属性异步更新队列概述 现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。我们将研究一下 Vue 响应式系统的底层的细节。如何追踪变化 当你把...原创 2019-08-24 11:26:27 · 121 阅读 · 0 评论 -
Vue生产环境部署
生产环境部署开启生产环境模式不使用构建工具使用构建工具模板预编译提取组件的 CSS跟踪运行时错误以下大多数内容在你使用 Vue CLI 时都是默认开启的。该章节仅跟你自定义的构建设置有关。开启生产环境模式 开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下...原创 2019-08-24 10:05:16 · 998 阅读 · 0 评论 -
Vue单元测试
Vue单元测试简单的断言编写可被测试的组件断言异步更新简单的断言你不必为了可测性在组件中做任何特殊的操作,导出原始设置就可以了:<template> <span>{{ message }}</span></template><script> export default { data () { re...原创 2019-08-24 08:52:36 · 645 阅读 · 0 评论 -
Vue渲染函数
渲染函数基础节点、树以及虚拟DOM虚拟DOMcreateElement参数深入数据对象完整示例约束基础 Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你确实需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。 让我们深入一个简单的例子,这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题:<h1&...原创 2019-08-23 13:39:51 · 3224 阅读 · 2 评论 -
Vue可复用的过渡
可复用的过渡 过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件,你需要做的就是将 <transition> 或者 <transition-group> 作为根组件,然后将任何子组件放置在其中就可以了。使用 template 的简单例子:Vue.component('my-special-transition', { template: '\ ...原创 2019-08-22 19:46:48 · 1201 阅读 · 0 评论 -
Vue列表过渡
列表过渡前言列表的进入/离开过渡列表的排序过渡列表的交错过渡前言目前为止,关于过渡我们已经讲到:单个节点同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group> 组件。在我们深入例子之前,先了解关于这个组件的几个特点: 不同于 <transition>,它会以一个真实元素呈现...原创 2019-08-22 18:58:45 · 1493 阅读 · 1 评论 -
Vue多个组件的过渡
Vue多个组件的过渡 多个组件的过渡简单很多 - 我们不需要使用 key 特性。相反,我们只需要使用动态组件:<transition name="component-fade" mode="out-in"> <component v-bind:is="view"></component></transition>new Vue({ ...原创 2019-08-22 17:27:10 · 661 阅读 · 0 评论 -
Vue插槽
插槽新语法插槽内容编译作用域后备内容具名插槽作用域插槽独占默认插槽的缩写语法解构插槽 Prop动态插槽名具名插槽的缩写其他示例废弃了的语法带有 slot 特性的具名插槽带有 slot-scope 特性的作用域插槽新语法 在 2.6.0 中,具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在...原创 2019-08-21 16:03:56 · 441 阅读 · 0 评论 -
Vue自定义事件
Vue自定义事件事件名自定义组件的v-model将原生事件绑定到组件.sync修饰符事件名 不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:this.$emit('myEvent') 则监听这个名字的 kebab-case 版本是不会有任何效果的:<!-- ...原创 2019-08-21 14:51:01 · 123 阅读 · 0 评论 -
Vue对象变更检测注意事项
对象变更检测注意事项 还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:var vm = new Vue({ data: { a: 1 }})// `vm.a` 现在是响应式的vm.b = 2// `vm.b` 不是响应式的 对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, ...原创 2019-08-20 19:59:10 · 370 阅读 · 0 评论 -
Vue数组更新检测
Vue数组更新检测变异方法 (mutation method)替换数组注意事项变异方法 (mutation method) Vue 将被侦听的数组的变异方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:push()pop()shift()unshift()splice()sort()reverse() 你可以打开控制台,然后对前面例子的 items 数组...原创 2019-08-20 19:28:24 · 315 阅读 · 0 评论 -
Vue侦听器
侦听器 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。例如:<div id="watch-example"> <p> Ask a yes/no question: <in...原创 2019-08-20 11:05:10 · 412 阅读 · 0 评论 -
Vue实例生命周期
实例生命周期实例生命周期钩子生命周期图示实例生命周期钩子 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。 比如 created 钩子可以用来在一个实例被创建之后执行代码:new Vue({ ...原创 2019-08-19 18:57:03 · 102 阅读 · 0 评论 -
Vue选项/DOM
Vue选项/DOMeltemplaterenderrenderErrorel类型:string | Element限制:只在由 new 创建的实例中遵守。详细:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。在实例挂载之后,元素可以用 vm.$el 访问。如果在实例化时存在这个选项,实...原创 2019-08-24 19:08:37 · 232 阅读 · 0 评论 -
Vue选项/组合
选项/组合parentmixinsextendsprovide / injectparent类型:Vue instance详细:指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 ...原创 2019-08-25 08:13:47 · 470 阅读 · 0 评论 -
Vue选项/其他
Vue选项/其他namedelimitersfunctionalmodelinheritAttrscommentsname类型:string限制:只有作为组件选项时起作用。详细:允许组件模板递归地调用自身。注意,组件在全局用 Vue.component() 注册时,全局 ID 自动作为组件的 name。指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外,当...原创 2019-08-25 09:08:35 · 264 阅读 · 0 评论 -
Vue选项/生命周期钩子
生命周期钩子概述beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedactivateddeactivatedbeforeDestroydestroyederrorCaptured错误传播规则概述 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周...原创 2019-08-25 07:43:50 · 348 阅读 · 1 评论 -
Vue函数式组件
函数式组件概述向子元素或子组件传递特性和事件slots() 和 children 对比概述 之前创建的锚点标题组件是比较简单,没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法。实际上,它只是一个接受一些 prop 的函数。 在这样的场景下,我们可以将组件标记为 functional,这意味它无状态 (没有响应式数据),也没有实例 (没有 this 上下文)。一个函数式...原创 2019-08-23 17:12:53 · 1064 阅读 · 0 评论 -
Vue初始渲染过渡
初始渲染的过渡 可以通过 appear 特性设置节点在初始渲染的过渡<transition appear> <!-- ... --></transition> 这里默认和进入/离开过渡一样,同样也可以自定义 CSS 类名。<transition appear appear-class="custom-appear-class"...原创 2019-08-22 14:32:06 · 893 阅读 · 2 评论 -
Vue处理边界情况
处理边界情况访问元素 & 组件访问根实例访问父级组件实例访问子组件实例或子元素依赖注入程序化的事件侦听器循环引用递归组件组件之间的循环引用模板定义的替代品内联模板X-Template控制更新强制更新通过 v-once 创建低开销的静态组件访问元素 & 组件 在绝大多数情况下,我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。不过在一些情况下做这些事情也确实是合适的。...原创 2019-08-21 18:50:32 · 968 阅读 · 0 评论 -
动态组件&异步组件
动态组件&异步组件动态组件在动态组件中使用keep-alive异步组件处理加载状态动态组件在动态组件中使用keep-alive 我们可以在一个多标签的界面中使用 is 特性来切换不同的组件:<component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件...原创 2019-08-21 16:51:58 · 1055 阅读 · 0 评论 -
Prop
PropProp的大小写(camelCase vs kebab-case)Prop类型传递静态或动态prop传入一个数字传入一个布尔值传入一个数组传入一个对象的所有属性单项数据流Prop验证类型检查非Prop的特性替换/合并已有的特性禁用特性继承Prop的大小写(camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。...原创 2019-08-21 14:00:31 · 607 阅读 · 0 评论 -
表单输入绑定基础用法
表单输入绑定综述文本多行文本复选框单选按钮选择框综述 可以使用v-model指令在<input>、<textarea>及select元素中创建双向数据绑定。它会根据控件类型自动选取正确的方式来更新元素。v-model本身只是语法糖。他负责监听事件以及更新数据,并对一些极端情况做一些特殊处理。 v-model会忽略所有表单元素的value、check、selec...原创 2019-08-21 08:44:18 · 209 阅读 · 0 评论 -
Class与Style绑定
Class与Style绑定概述Class绑定对象语法数组语法用在组件上绑定内联样式对象语法数组语法自动添加前缀多重值概述 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专...原创 2019-08-20 14:06:56 · 127 阅读 · 0 评论 -
Vue计算属性
计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div> 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 messag...原创 2019-08-20 10:28:17 · 210 阅读 · 0 评论 -
Vue内置组件
Vue内置组件componenttransitiontransition-groupkeep-aliveinclude and excludemaxslotcomponentProps:is - string | ComponentDefinition | ComponentConstructorinline-template - boolean用法:渲染一个“元组件”为动态组件...原创 2019-08-25 19:38:47 · 1240 阅读 · 0 评论 -
Vue实例方法/生命周期
Vue实例方法/声明周期vm.$mount( [elementOrSelector] )vm.$forceUpdate()vm.$nextTick( [callback] )vm.$destroy()vm.$mount( [elementOrSelector] )参数:{Element | string} [elementOrSelector],{boolean} [hydrating]返...原创 2019-08-25 13:56:41 · 168 阅读 · 0 评论 -
Vue实例方法/事件
Vue实例方法/事件vm.$on( event, callback )vm.$once( event, callback )vm.$off( [event, callback] )vm.$emit( eventName, […args] )vm.$on( event, callback )参数:{string | Array<string>} event (数组只在 2.2.0+...原创 2019-08-25 12:42:59 · 162 阅读 · 0 评论 -
Vue实例方法/数据
Vue实例方法/数据vm.$watch( expOrFn, callback, [options] )unwatch()vm.$set( target, propertyName/index, value )vm.$delete( target, propertyName/index )vm.$watch( expOrFn, callback, [options] )参数:{string...原创 2019-08-25 11:38:33 · 179 阅读 · 0 评论 -
Vue特殊特性
Vue特殊特性keyrefisslot 废弃slot-scope 废弃scope 移除key预期:number | stringkey 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序...原创 2019-08-25 19:06:34 · 243 阅读 · 0 评论 -
Vue实例属性
Vue实例属性vm.$datavm.$propsvm.$elvm.$optionsvm.$parentvm.$rootvm.$childrenvm.$slotsvm.$scopedSlotsvm.$refsvm.$isServervm.$attrsvm.$listenersvm.$data类型:Object详细:Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。...原创 2019-08-25 10:14:15 · 343 阅读 · 0 评论 -
Vue选项/资源
Vue选项/资源directivesfilterscomponentsdirectives类型:Object详细:包含 Vue 实例可用指令的哈希表。示例: <div id="app"> <span v-hello="color3">{{message}}</span> <button @click="add"...原创 2019-08-24 19:27:18 · 131 阅读 · 0 评论 -
Vue简介
Vue简介Vue是什么?MVVMVue 与其他框架的对比React运行时性能HTML&CSS规模AngularVue是什么? Vue (/vjuː/) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vu...原创 2019-08-19 11:02:54 · 1081 阅读 · 0 评论 -
Vue指令
Vue指令v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-bindv-modelv-slotv-prev-cloakv-oncev-text预期:string详细:更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。示例:<span v-text="msg"...原创 2019-08-25 16:22:00 · 176 阅读 · 0 评论 -
Vue过滤器
Vue过滤器 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 ...原创 2019-08-23 18:43:01 · 302 阅读 · 0 评论 -
使用 JavaScript 代替模板功能
使用JavaScript代替模板功能v-if 和 v-forv-model事件 & 按键修饰符插槽v-if 和 v-for只要在原生的 JavaScript 中可以轻松完成的操作,Vue 的渲染函数就不会提供专有的替代方法。比如,在模板中使用的 v-if 和 v-for:<ul v-if="items.length"> <li v-for="item in it...原创 2019-08-23 14:37:16 · 290 阅读 · 0 评论 -
Vue自定义指令
自定义指令简介钩子函数钩子函数参数动态指令参数函数简写对象字面量简介 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。 当页面加载时,该元素将获得焦点。事实上,只要你在打开这个页面后还没点击过任...原创 2019-08-23 11:44:55 · 233 阅读 · 0 评论 -
Vue多个元素的过渡
多个元素的过渡 对于原生标签可以使用 v-if/v-else 。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素:<transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p v-else>Sorry, no items ...原创 2019-08-22 16:22:37 · 1094 阅读 · 0 评论 -
Vue单元素/组件的过渡
单元素/组件的过渡过渡的类名CSS 过渡CSS 动画自定义过渡的类名同时使用过渡和动画显性的过渡持续时间JavaScript 钩子 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点这里是一个典型的例子:<div id="demo"> ...原创 2019-08-22 14:08:39 · 740 阅读 · 0 评论