# 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 插值

# 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 语法

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

# 1.4.2 Array 语法

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

# 1.4.3 组件

<my-component class="baz boo"></my-component>

<p  class="origin baz boo">

# 1.5 Conditional Rendering

<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

对于数组

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

对于对象

<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

# 警告

直接通过 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 修改检测警告

js 无法直接提供对

this.$set(this.userProfile, 'age', 27)

# 1.7 Event Handling

# 1.7.1 Listening to Events

<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

事件修饰符

.stop
.prevent
.capture
.self
.once

<!-- 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

.enter
.tab
.delete (captures both “Delete” and “Backspace” keys)
.esc
.space
.up
.down
.left
.right

<!-- same as above -->
<input v-on:keyup.enter="submit" />
<!-- also works for shorthand -->
<input @keyup.enter="submit" />

# 1.7.6 System Modifier Keys

键盘

.ctrl
.alt
.shift
.meta

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

鼠标

.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 初始化本文