Vue
Vue
杨林伟
像火箭科学家一样思考!
展开
-
84Vue - JavaScript 钩子
可以在属性中声明 JavaScript 钩子HTML代码:<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="before...原创 2019-07-29 17:27:22 · 360 阅读 · 0 评论 -
83Vue - 自定义过渡类名
我们可以通过以下特性来自定义过渡类名:enter-classenter-active-classleave-classleave-active-class他们的优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库,如 Animate.css 结合使用十分有用。示例:HTML代码:<link href="https://unpkg.com/anima...原创 2019-07-29 17:22:56 · 1146 阅读 · 1 评论 -
82Vue - CSS动画
CSS 动画用法同 CSS 过渡,区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在animationend 事件触发时删除。示例: (省略了兼容性前缀)HTML代码:<div id="example-2"> <button @click="show = !show">Toggle show</button> <t...原创 2019-07-29 17:21:03 · 297 阅读 · 0 评论 -
81Vue - CSS 过渡
常用的过渡都是使用 CSS 过渡。下面是一个简单例子:HTML代码:<div id="example-1"> <button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show"&...原创 2019-07-29 17:19:08 · 323 阅读 · 0 评论 -
80Vue - 过渡的-CSS-类名
会有 4 个(CSS)类名在 enter/leave 的过渡中切换v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。v-leave...原创 2019-07-29 17:17:09 · 406 阅读 · 0 评论 -
79Vue - 单元素过渡效果
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库,如 Velocity.jsVue 提供了 transition 的封装组件,在下...原创 2019-07-29 17:14:25 · 310 阅读 · 0 评论 -
78Vue - 响应式原理(异步更新队列)
你应该注意到 Vue 执行 DOM 更新是异步的,只要观察到数据变化,Vue 就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个 watcher 被多次触发,只会推入一次到队列中。然后,在接下来的事件循环中,Vue 刷新队列并仅执行必要的 DOM 更新。Vue 在内部尝试利用原生的Promise.then和 MutationObserver来调用异步队列,如果执行环境不兼容,会采用 ...原创 2019-07-29 16:55:02 · 558 阅读 · 0 评论 -
77Vue - 响应式原理(变化检测问题)
受现代 Javascript 的限制(以及 Object.observe 的废弃),Vue 不能检测到对象属性的添加或删除。因为 Vue 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue 转换它,这样才能让它是响应的。例如:var vm = new Vue({ data:{ a:1 }})// `vm.a` 是响应的vm.b ...原创 2019-07-29 14:27:39 · 493 阅读 · 0 评论 -
76Vue - 响应式原理(如何追踪变化)
把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项,Vue 将遍历它的属性,用Object.defineProperty 将它们转为 getter/setter。这是 ES5 的特性,不能打补丁实现,这便是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。用户看不到 getter/setters,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知...原创 2019-07-29 14:19:16 · 437 阅读 · 0 评论 -
75Vue - 使用 v-once 的低级静态组件(Cheap Static Component)
尽管在 Vue 中渲染 HTML 很快,不过当组件中包含大量静态内容时,可以考虑使用 v-once将渲染结果缓存起来,就像这样:Vue.component('terms-of-service', { template: '\ <div v-once>\ <h1>Terms of Service</h1>\ ... a lot...原创 2019-07-29 11:52:11 · 475 阅读 · 0 评论 -
74Vue - X-Templates
另一种定义模版的方式是在 JavaScript 标签里使用 text/x-template类型,并且指定一个id。例如:<script type="text/x-template" id="hello-world-template"> <p>Hello hello hello</p></script>Vue.component('hell...原创 2019-07-29 11:51:23 · 290 阅读 · 0 评论 -
73Vue - 内联模版
如果子组件有 inline-template 特性,组件将把它的内容当作它的模板,而不是把它当作分发内容。这让模板更灵活。<my-component inline-template> <div> <p>These are compiled as the component's own template.</p> <p>...原创 2019-07-29 11:50:09 · 345 阅读 · 0 评论 -
72Vue - 递归组件
组件在它的模板内可以递归地调用自己,不过,只有当它有 name 选项时才可以:name: 'unique-name-of-my-component'当你利用 Vue.component全局注册了一个组件, 全局的ID作为组件的 name 选项,被自动设置.Vue.component('unique-name-of-my-component', { // ...})如果你不谨慎, ...原创 2019-07-29 11:49:08 · 255 阅读 · 0 评论 -
71Vue - 组件命名约定
当注册组件(或者 props)时,可以使用 kebab-case ,camelCase ,或 TitleCase 。Vue 不关心这个。// 在组件定义中components: { // 使用 camelCase 形式注册 'kebab-cased-component': { /* ... */ }, 'camelCasedComponent': { /* ... */ }, ...原创 2019-07-29 11:47:59 · 407 阅读 · 0 评论 -
70Vue - 异步组件
在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载。为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。例如:Vue.component('async-example', function (resolve, reject) { setTimeout(fun...原创 2019-07-29 11:46:20 · 395 阅读 · 0 评论 -
69Vue - 子组件索引
尽管有 props 和 events ,但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref为子组件指定一个索引 ID 。例如:HTML代码:<div id="parent"> <user-profile ref="profile"></user-profile></div>JS代码:var parent ...原创 2019-07-29 11:44:43 · 406 阅读 · 0 评论 -
68Vue - 编写可复用组件
在编写组件时,记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系,但是可复用组件应当定义一个清晰的公开接口。Vue 组件的 API 来自三部分 - props, events 和 slots :Props 允许外部环境传递数据给组件Events 允许组件触发外部环境的副作用Slots 允许外部环境将额外的内容组合在组件中。使用 v-bind 和 v-on 的简写...原创 2019-07-29 11:43:13 · 395 阅读 · 0 评论 -
67Vue - 动态组件(keep-alive)
多个组件可以使用同一个挂载点,然后动态地在它们之间切换。使用保留的 <component> 元素,动态地绑定到它的 is 特性:var vm = new Vue({ el: '#example', data: { currentView: 'home' }, components: { home: { /* ... */ }, posts: {...原创 2019-07-29 11:36:09 · 321 阅读 · 0 评论 -
66Vue - Slots 分发内容(具名Slots)
<slot>元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。仍然可以有一个匿名 slot ,它是默认 slot ,作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ,这些找不到匹配的内容片段将被抛弃。例如,假定我们有一个 app-layout 组件,它的模板为:&l...原创 2019-07-29 11:33:04 · 444 阅读 · 0 评论 -
65Vue - Slots 分发内容(单个 Slot)
除非子组件模板包含至少一个 <slot> 插口,否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身。最初在 <slot>标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。假定 my-c...原创 2019-07-29 11:30:08 · 417 阅读 · 0 评论 -
64Vue - Slots 分发内容(编译作用域)
在使用组件时,常常要像这样组合它们:<app> <app-header></app-header> <app-footer></app-footer></app>注意两点:<app> 组件不知道它的挂载点会有什么内容。挂载点的内容是由<app>的父组件决定的。<app&...原创 2019-07-29 11:28:01 · 427 阅读 · 0 评论 -
63Vue - 自定义事件(非父子组件通信)
有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的 Vue 实例作为中央事件总线:var bus = new Vue()// 触发组件 A 中的事件bus.$emit('id-selected', 1)// 在组件 B 创建的钩子中监听事件bus.$on('id-selected', function (id) { // ...})在更多复杂的情况下,你应该考虑...原创 2019-07-29 11:23:01 · 420 阅读 · 0 评论 -
62Vue - 自定义事件(使用自定义事件的表单输入组件)
自定义事件也可以用来创建自定义的表单输入组件,使用 v-model来进行数据双向绑定。牢记:<input v-model="something">仅仅是一个语法糖:<input v-bind:value="something" v-on:input="something = $event.target.value">所以在组件中使用时,它相当于下面的简写:&l...原创 2019-07-29 11:21:49 · 591 阅读 · 0 评论 -
61Vue - 自定义事件(使用 v-on 绑定自定义事件)
我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!使用 v-on 绑定自定义事件每个 Vue 实例都实现了事件接口(Events interface),即:使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运...原创 2019-07-29 11:16:43 · 749 阅读 · 0 评论 -
60Vue - Props(Prop 验证)
组件可以为 props 指定验证要求。如果未指定验证要求,Vue 会发出警告。当组件给其他人使用时这很有用。prop 是一个对象而不是字符串数组时,它包含验证要求:Vue.component('example', { props: { // 基础类型检测 (`null` 意思是任何类型都可以) propA: Number, // 多种类型 propB: [S...原创 2019-07-29 11:08:50 · 971 阅读 · 0 评论 -
59Vue - Props(单向数据流)
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了,Vue 会在控制台给出警告。通常有两种改变 prop 的情况:prop 作为初始值传入,子组件之后只是将它的初始...原创 2019-07-29 11:00:31 · 423 阅读 · 0 评论 -
58Vue - Props(字面量语法 vs 动态语法)
初学者常犯的一个错误是使用字面量语法传递数值:<!-- 传递了一个字符串"1" --><comp some-prop="1"></comp>因为它是一个字面 prop ,它的值以字符串 “1” 而不是以实际的数字传下去。如果想传递一个实际的 JavaScript 数字,需要使用 v-bind ,从而让它的值被当作 JavaScript 表达式计算:&l...原创 2019-07-29 10:54:45 · 436 阅读 · 0 评论 -
57Vue - Props(动态 Props)
类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件:<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></c...原创 2019-07-29 10:53:15 · 362 阅读 · 0 评论 -
56Vue - Props(camelCase vs. kebab-case)
HTML 特性不区分大小写。当使用非字符串模版时,prop的名字形式会从 camelCase 转为 kebab-case(短横线隔开):JS代码:Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '<span>{{ myMessage }}</sp...原创 2019-07-29 10:50:03 · 479 阅读 · 0 评论 -
55Vue - Props(使用Props传递数据)
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项 声明 “prop”Vue.component('child', { // 声明 props props: ['message'], // 就像 data 一样,prop 可...原创 2019-07-29 10:47:30 · 533 阅读 · 0 评论 -
54Vue - 组件的使用(构成组件)
组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件。然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性。在 Vue.js 中,父子组件的关系可以总结为 props down...原创 2019-07-29 10:41:51 · 390 阅读 · 0 评论 -
53Vue - 组件的使用(data 必须是函数)
使用组件时,大多数选项可以被传入到 Vue 构造器中,有一个例外: data必须是函数。 实际上,如果你这么做:Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' }})那么 Vue 会在控制台发出警告,告...原创 2019-07-29 10:38:52 · 461 阅读 · 0 评论 -
52Vue - 组件的使用(DOM 模版解析说明)
当使用 DOM 作为模版时(例如,将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制,因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <ul> ,<ol>, <table>, <select> 限制了能被它包裹的元素, <option>只能出现在其它元素内部。在自定义组件中使...原创 2019-07-29 10:34:18 · 952 阅读 · 0 评论 -
51Vue - 组件的使用(局部注册)
不必在全局注册每个组件。通过使用组件实例选项注册,可以使组件仅在在这里插入代码片另一个实例/组件的作用域中可用:var Child = { template: '<div>A custom component!</div>'}new Vue({ // ... components: { // <my-component> 将只在父模板可...原创 2019-07-29 10:30:39 · 386 阅读 · 0 评论 -
50Vue - 组件的使用(全局注册)
什么是组件?组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。组件的使用1.注册之前说过,我们可以通过以下方式创建一个 Vue 实例:new Vue({ el: '#some-e...原创 2019-07-29 10:28:23 · 555 阅读 · 0 评论 -
49Vue - 修饰符(.lazy /.number/.trim)
.lazy在默认情况下, v-model在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:<!-- 在 "change" 而不是 "input" 事件中更新 --><input v-model.lazy="msg" >.number如果想自动将用户的输入值转为 Number 类型(如果原值的转...原创 2019-07-29 10:19:17 · 469 阅读 · 0 评论 -
48Vue - 绑定 value(单选按钮、选择列表设置)
单选按钮:HTML代码:<input type="radio" v-model="pick" v-bind:value="a">JS代码:// 当选中时vm.pick === vm.a选择列表设置:HTML代码:<select v-model="selected"> <!-- 内联对象字面量 --> <option v-bi...原创 2019-07-29 10:16:28 · 1123 阅读 · 0 评论 -
47Vue - 绑定 value(复选框)
HTML代码:<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">JS代码:// 当选中时vm.toggle === vm.a// 当没有选中时vm.toggle === vm.b...原创 2019-07-29 10:13:59 · 736 阅读 · 0 评论 -
46Vue - 绑定 value(单选框)
对于单选按钮,勾选框及选择列表选项,v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值):<!-- 当选中时,`picked` 为字符串 "a" --><input type="radio" v-model="picked" value="a"><!-- `toggle` 为 true 或 false --><input t...原创 2019-07-29 10:12:11 · 1341 阅读 · 0 评论 -
45Vue - 表单控件绑定(选择列表)
单选列表:HTML代码:<select v-model="selected"> <option>A</option> <option>B</option> <option>C</option></select><span>Selected: {{ selected }}&...原创 2019-07-29 10:10:04 · 337 阅读 · 0 评论