Vue2官网简要笔记

####Vue实例

vue构造器：
var vm = new Vue({
  // 选项

})

扩展vue构造器：
var MyComponent = Vue.extend({
  // 扩展选项

})

属性和方法：
var vm = new Vue({
  el: "#example",
  data: data，
  computed: {}，
  watch: {},
  methods: {}

})

生命周期：

beforeCreate, created, beforeMount, mouted, beforeUpdate, updated, beforeDestory, destoryed

####模板语法：
文本：<span>Message: {{msg}}</span>
纯HTML：<div v-html="rawHtml"></div>

属性：<div v-bind:id="dynamicId"></div>

使用js表达式：{{ number + 1 }}

指令（Directives）是带有v-前缀的特殊属性

<p v-if="seen">Now you see me</p>

参数：（一个指令能接受一个参数，在指令后以冒号指明）
<a v-bind:href="url"></a>

<a v-on:click="doSomethind"></a>

修饰符（Modifiers）是以半角句号.指明的特殊后缀

<form v-on:submit.prevent="onSubmit"></form>

过滤器：
{{ message | capitalize }}

<div v-bind:id="rawId | formatId"></div>

缩写：
<a v-bind:href="url"></a>  缩写为 <a :href="url"></a>

<a v-on:click="doSomething"></a> 缩写为 <a @click="doSomethind"></a>

####计算属性：
计算缓存VS Methods:计算属性是基于他们的依赖进行缓存的，只要在他的相关依赖发生改变时才会重新求值。
computed属性VS Watched属性：尽量使用computed。
计算setter: 计算属性默认只有getter, 不过在需要时你可以提供一个setter。

观察Watchers：响应变化的数据，执行异步操作或者开销较大的操作。

####Class与Style绑定：
绑定HTML Class（对象语法）：

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

绑定HTML Class（数组语法）：

<div :class="[activeClass, errorClass]"></div>

绑定内联样式（对象语法）：

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<div :style="styleObject"></div>

绑定内联样式（数组语法）：

<div :style="[baseStyles, overridingStyles]"></div>

####条件渲染

v-if, v-else, v-else-if, v-show

用key 管理可复用的元素

####列表渲染
v-for: 数组迭代，对象迭代，整数迭代
key: v-for 正在更新已渲染的元素列表时，它默认“就地复用”策略。

<div v-for="item in items" :key="item.id"></div>

数组更新检测：
变异方法：push(), pop(), shift(), unshift(),splice(),sort(),reverse()
重塑数组：filter(), concat(), slice()
####事件处理器
监听事件：v-on
方法事件处理器：methods
内联处理器方法：<button @click="say('hi', $event)">Say hi</button>
事件修饰符：.stop, .pervent, .capture, .self, .once

按键修饰符：.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right, .ctrl, .alt, .shift, .meta

####表单控件绑定
基本用法：
文本：<input v-model="message" >
多行文本：<textarea v-model="message"></textarea>
复选框：<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>
单选按钮：<input type="radio" id="radio" v-model="radiobox"><label for="radio">Radio</label>
选择列表：<select v-model="selected">...</select>
绑定value
单选按钮：<input type="radio" v-model="picked" value="a">
复选框：<input type="checkbox" v-model="toggle" :true-value="a" :false-value="b">
列表设置：<select v-model="selected"><option :value="{ number: 123 }">123</option></select>
修饰符
.lazy, .number, .trim
组件：
注册：new Vue({el: "element"})
全局注册：Vue.component('my-component',{})

局部注册：new Vue({ ...,components: { 'my-component': ChildComponent }})

DOM模板解析说明：元素ul, ol, table, select 限制了被包裹的元素
data 必须是函数
构成组件：props down, events up.
Prop
使用prop传递数据：props: ['message']
camelCase VS kebab-case：当使用的不是字符串模板，驼峰式命名的prop需要转换为相对应的短横线隔开式命名。
props: ['myMessage']
<child my-message="hello"></child>
动态prop: <child :my-message="parentMsg"></child>
单向数据流：prop是单项绑定的。

Prop验证：可以为组件的props指定验证规格。

自定义事件：
使用v-on绑定自定义事件
    使用 $on(eventName) 监听事件
    使用 $emit(evnetName) 触发事件
使用自定义事件的表单输入组件：
<input v-model="something">（语法糖）
<input v-bind:value="something" v-on:input="something = $event.target.value">

非父子组件通信：简单的场景下，使用一个空的Vue实例作为中央事件总线。

使用Slot分发内容

编译作用域：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

单个Slot：

除非子组件模板至少包含一个<slot>，否则父组件的内容将会被丢弃。

<slot>标签内的任何内容都是备用内容。备用内容在子组件的作用域内被编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

具名Slot:

<slot>可以用一个特殊属性name来配置如何分发内容。

作用域插槽：（没看懂）

动态组件：
使用保留的<component>元素，动态的绑定到他的is特性，让多个组件使用同一挂载点，并动态切换。

keep-alive参数：把切换出去的组件保存再内存中，避免重新渲染。

杂项：

编写可复用组件：

Vue组件的api来自三部分，Props, Events, Slots.
Props允许外部环境传递数据给组件。
Events允许组件触发外部环境的副作用。
Slots允许外部环境将额外的内容组合到组件中。
子组件索引：使用ref为子组件指定一个索引ID。
异步组件：Vue允许将组件定义为一个工厂函数，动态的解析组件的定义，在组件需要渲染时触发工厂函数。
组件命名规约：在注册组件时，可以使用 kebab-case ，camelCase ，或 TitleCase 。
在HTML模板中，使用kebab-case。
在字符串模板中，三种都可以。

如果组件未经slot传递内容，可以在组件名后使用/自闭合。<my-component/>

递归组件：
组件在有name属性时，可以在自己的模板内递归的调用自己。
组件间的循环引用：？？
内联模板：如果组件有inline-template特性，组件将把他的内容作为他的模板，而不是作为分发内容。
X-Templates：另一种定义模板的方式是在js标签内使用text/x-template类型，并指定一个ID。
对低开销的静态组件使用v-once：当组价中很有大量的静态内容，可以使用v-once将渲染结果缓存起来。




############进阶################
####深入响应式原理
变化检测问题：vue在初始化实例时对属性执行getter/setter转化过程，所以属性必须在data对象上存在才能转化他，这样才能让他是响应式的。
可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上，vm.$set方法是全局方法Vue.set的别名。
声明响应式属性：vue不允许动态添加根级响应属性，所以必须在初始化实例前声明根级响应式属性。

异步更新队列：？？

####过渡效果：
单元素／组件的过渡：Vue提供了transition的封装组件。
过渡的CSS类名：v-enter, v-enter-active, v-leave, v-leave-active。
CSS过渡：
CSS动画：
自定义过渡类名：<transition name="..." enter-active-class="..." leave-active-class="..."></transition>

同时使用Transitions和Animations:

JavaScript钩子：
初始渲染的过渡：<transition appear></transition>
多个元素的过渡：当有相同标签名的元素进行切换时，最好设置key属性加以区分。
过渡模式：<transition name="fade" mode="out-in"></transition>
多个组件的过渡：不需要key特性，只需要使用动态组件（:is）。
列表过渡：<transition-group></transition-group>
可复用的过渡：将<transition>或者<transition-group>作为根组件，将任何子组件放置其中就可以了。

动态过渡：最基本的是通过name属性来绑定动态值。<transition :name="transitionName"></transition>

####过渡状态
####render函数
####自定义指令
####混合
####插件：
插件通常会为Vue添加全局功能
开发插件：
1、添加全局方法或者属性
2、添加全局资源：指令、过滤器、过渡
3、通过全局mixin方法添加一些组件选项，如vuex。
4、添加Vue实例方法，通过把他们添加到Vue.prototype上实现。
5、一个库，提供自己的api，同时提供上面提到的一个或多个功能，如vue-router。
使用插件：
Vue.use(MyPlugin)
Vue.use(MyPlugin, { someOption: true })
####单文件组件
####生产环境部署
####路由：vue-router
####状态管理
####单元测试
####服务端渲染（SSR）