vue学习

vue2.0

对数据的处理，应该放在那一层？

模板引擎

为了让动态页面渲染的时候，可以简化字符串的拼接操作。

每次页面上有交互改变了数据，都需要手动的重新更新视图。

标准的web应用有以下三部分组成：
1. 数据
2. 模板
3. 交互

在以上例子中有以下痛点：

1. 更新视图，都将重新渲染DOM元素，使渲染性能降低。
2. 当数据发生变化，开发者需要手动更新到视图；当页面中有用户操作产生了数据，开发者需要手动同步数据变化。这样很繁琐，而且也难以维护复杂多变的数据状态。

jq只是为了更加简化的操作DOM而设计的。

MVVM

M-Model

数据模型 提供并管理数据

V-View

UI布局，展示数据

VM

同步V和M的一个对象

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM,不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

VM层做了两件事情：
1. M到V的映射，当数据有变化时，会自动更新到视图
2. V到M的事件监听，数据会随着视图触发事件而改变。

M到V的映射

当初始化渲染数据或更新数据时候，VM层将数据通过指令，插值、自定义标签这样的方式绑定到视图上。

V到M事件监听

DOM事件监听有两类：一类是开发者自定义监听器；另一类是自动监听表单控件上的事件。
开发者自定义监听器,当触发该事件时，可访问到Model，就可以改变Model，重新更新视图。
自动监听表单控件上的事件，当有值发生变化时，会自动更新model，重新更新视图。

vue实例

通过Vue实例开启应用。

每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例。
这个根实例，就是MVVM中的VM。

// vue 根实例
var vm = new Vue({
  // 选项
})

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项.
其中：

//选项对象
{
    el: 挂载点
    data: 数据
}

数据绑定

Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。
数据绑定最基础的形式是文本插值，使用 “Mustache” 语法（双大括号）。放在 Mustache 标签内的文本称为绑定表达式。

表达式：是由运算元和运算符(可选)构成，并产生运算结果的语法结构。

表达式可以是：
1. 变量
2. 运算
3. 字面量
4. 函数调用
.....

写入表达时候，Vue会对其进行求值，然后替换双大括号位置。

<span>Message: {{ msg }}</span>
<span>Message: {{ 1+2 }}</span>

指令

指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。
在vue中的指令是以v-开头定义在行间中的自定义属性
v-bind v-on

Vue中的内置指令
>
v-bind 动态的绑定数据。简写为 :
v-on 绑定事件监听器。简写为 @
v-text 更新数据，会覆盖已有结构
v-html 可以解析数据中的html结构
v-show 根据值得真假，切换元素的display属性
v-if 根据值得真假，切换元素会被销毁、重建
v-else-if 多条件判断，为真则渲染
v-else 条件都不符合渲染
v-for 基于源数据多次渲染元素或模板块
v-model 在表单控件元素上创建双向数据绑定
v-pre 跳过元素和子元素的编译过程
v-once 只渲染一次，随后数据更新不重新渲染
v-cloak 隐藏未编译的 Mustache语法，css中设置[v-cloak] { display: none }

组件

组件可以扩展 HTML 元素，封装可重用的代码。组件是自定义元素， Vue.js 的编译器为它添加特殊功能。

组件是Vue中的核心概念，讲UI视图看作是组件树构成。这样每一块抽象为独立的模块，方便复用，维护和测试。

一个组件同样包含三个部分：
1. 模板
2. 数据
3. 交互行为

要使用组件，先定义组件。

注册全局组件

Vue.component(tagName, options)

使用：

Vue.component('my-component', {
  // 选项
})

定义了自定义标签后，就可以在模板中以标签使用< my-component><\/ my-component>

注册局部组件

选项对象中的components属性

{
    ...
    compoennts：{}
}

受限制元素

Vue 只有在浏览器解析和标准化HTML 后才能获取模版内容。有些标签中限制了被包裹的元素，例如table，ul，select等。

解决方式：

<table>
<tr is="my-row"></tr>
</table>


### data必须是函数
组件之间可以共享data，一旦一个组件将data改变了，其他组件都会改变。每个组件应该是独立的，不受其他组件的影响。

### 组件间的通信
组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。
在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

使用props传递数据

1. 组件上自定义属性
2. 动态绑定数据

单向数据流

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。

props验证

组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。

自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！

非父子间通信

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线

使用 Slot 分发内容

单个slot

具名slot

动态组件