VueJS 文档阅读笔记

0x01 Essential

1.1 The Vue Instance

当 Vue 实例被创建时,添加所有在 Data 对象中的属性到 Reactivity System 中。

而创建之后添加赋值新属性,则不 Reactive

而实例被创建之时,会自带前缀为 $ 的一系列属性和方法

1.1.1 内置方法和属性

Instance Properties

vm.$data
vm.$props
vm.$el
vm.$options
vm.$parent
vm.$root
vm.$children
vm.$slots
vm.$scopedSlots
vm.$refs
vm.$isServer
vm.$attrs
vm.$listeners

Instance Methods / Data

vm.$watch
vm.$set
vm.$delete

Instance Methods / Events

vm.$on
vm.$once
vm.$off
vm.$emit

Instance Methods / Lifecycle

vm.$mount
vm.$forceUpdate
vm.$nextTick
vm.$destroy

1.1.2 生命周期

生命周期

1.2 Template Syntax

VueJS 编译 模板为 VirtualDOM render 函数,如果对 VirtualDom 非常熟悉的话,则可以使用

1.2.1 插值

1
2
3
4
5
6
7
8
9
10
11
12
# text
{{ msg }}
<span v-once> {{ msg }} <span>
# raw html
<div v-html="rawHTML"></div>
# attributes
<div v-bind:id="dynamicID"></div>
# JS Expressions
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

1.2.2 指令

  • v-bind -> :
  • v-on -> @
  • v-on:submit.prevent=”onSubmit”

1.3 Computed Properties and Watchers

  • 当使用 Computed 的时候,一旦其依赖的 reactive 的 data 发生变化之后,则其值发生变化。
  • 其实,可以在模板中调用方法,但只能在项目中。

1.4 Class and Style Bindings

1.4.1 Object 语法

1
2
3
<div class="static"
:class="{ active: isActive, 'text-danger': hasError }">
</div>

1.4.2 Array 语法

1
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

1.4.3 组件

1
2
3
<my-component class="baz boo"></my-component>
<p class="origin baz boo">

1.5 Conditional Rendering

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h1 v-if="ok">Yes</h1>
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
  • v-if 是否
  • v-for 优先级高于 v-if

1.6 List Rendering

对于数组

1
2
3
4
5
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>

对于对象

1
2
3
4
5
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>

1.6.1 ARRAY 修改检测

方法
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
取代数组

filter

警告
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
直接通过 index 对数组进行修改
不应该
vm.items[indexOfItem] = newValue
应该
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
修改 length
不该 vm.items.length = newLength
应该 example1.items.splice(newLength)

猜测背后可能是因为这种方式是无法监测设置

1.6.2 Object 修改检测警告

1
2
3
js 无法直接提供对
this.$set(this.userProfile, 'age', 27)

1.7 Event Handling

1.7.1 Listening to Events

1
2
3
4
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>

PS: 注意,前面 v-on v-bind 所有的绑定可以绑在方法上,也可以直接填单行表达式。可以提高可阅读性

1.7.2 Method Event Handlers

可以绑定方法

1.7.3 Methods in Inline Handlers

可以绑定方法加参数,配合 for / if

1.7.4 Event Modifiers

事件修饰符

1
2
3
4
5
.stop
.prevent
.capture
.self
.once
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- just the modifier -->
<form v-on:submit.prevent></form>
<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div v-on:click.capture="doThis">...</div>
<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

1.7.5 Key Modifiers

1
2
3
4
5
6
7
8
9
.enter
.tab
.delete (captures both “Delete” and “Backspace” keys)
.esc
.space
.up
.down
.left
.right
1
2
3
4
<!-- same as above -->
<input v-on:keyup.enter="submit">
<!-- also works for shorthand -->
<input @keyup.enter="submit">

1.7.6 System Modifier Keys

键盘

1
2
3
4
.ctrl
.alt
.shift
.meta
1
2
3
4
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

鼠标

1
2
3
.left
.right
.middle

1.7.7 Why Listeners in HTML?

在以往的开发中,直接写在 html 的 onclick 是很糟糕的方式,因为这违反了局部变量准则。将 onclick 变量提升为整个页面很容易导致,页面内部组织混乱。

而 v-on 则仅执行 viewmodel 的方法,不会绑定到其他方法里。

1.8 Form Input Bindings

https://vuejs.org/v2/guide/forms.html

对于每个 Form 空间,可以进行一定的封装。

比如拖拽上传啦,比如 RadioGroup 啦等等。通过封装,可以进行相关的分析。

1.9 Components

Using Components
Global Registration
Local Registration
DOM Template Parsing Caveats
data Must Be a Function
Composing Components
Props
Passing Data with Props
camelCase vs. kebab-case
Dynamic Props
Literal vs. Dynamic
One-Way Data Flow
Prop Validation
Non-Prop Attributes
Replacing/Merging with Existing Attributes
Custom Events
Using v-on with Custom Events
Binding Native Events to Components
.sync Modifier
Form Input Components using Custom Events
Customizing Component v-model
Non Parent-Child Communication
Content Distribution with Slots
Compilation Scope
Single Slot
Named Slots
Scoped Slots
Dynamic Components
keep-alive
Misc
Authoring Reusable Components
Child Component Refs
Async Components
Advanced Async Components
Component Naming Conventions
Recursive Components
Circular References Between Components
Inline Templates
X-Templates
Cheap Static Components with v-once

总结

组件化是 Vue 模块化组织前端网页的方式。

Vue 的组件化,将模板,JavaScript 与样式放在一起。出于代码的复用性:

组件化可以给组件子组件们组织起来,起一个阅读性更好的名称,从而使得编写 Vue 组件更加语义化。

  • 如果模板是常用的组件,比如手风琴控件,Menu 控件,sidebar 控件

Vue 通过组件来组织代码,但糟糕的是并不是一切都可以被组件化

0x02 Transitions & Animation

2.1 Event Handling

2.2 Event Handling

0x03 Reusability & Composition

0x04 Tooling

0x05 Scaling Up

0x06 Internals

0x07 Vue 番外篇

下面的内容从 Vue 作者的知乎 Live 上取来。

阅读源码的建议

http://hcysun.me/2017/03/03/Vue 源码学习 /

框架背后的要解决的原理

组件为基本单元

页面 ->应用(模块,组件树(偏展示))

  • 接入型 container
  • 展示型
  • 交互型 比如各类加强版的表单组件,通常强调复用
  • 功能型 比如 <router-view><transition>,作为一种扩展、抽象机制存在。

view = render(state)

  • 命令式 (jquery)
  • 声明式

Virtual Dom

变化侦测和渲染机制

push pull

vue 混合式

状态管理

0xEE TODO TO LIST


ChangeLog:

  • 2017-09-15 初始化本文