vue起步

从现在起博主会整理一套vue的学习笔记（不定时更新）。

一、MVVM设计模式

传统MVP设计模式：

MVVM设计模式：

相比之下，MVVM设计模式的优点：

1.低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

2.可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

3.独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。

4.可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

二、实例

每一个应用都是通过vue这个构造函数创建根实例（root instance）启动

1	new vue (选项对象)

需要传入选项对象，对象包括挂载元素、数据、模板、方法等。


`el`	挂载元素选择器	string/Html Element
`data`	代理数据	object/Function
`methods`	定义方法	object

vue代理的data数据：每个vue实例都会代理其data对象里所有属性，这些被代理的属性是响应的。新添加的属性不具备响应功能，改变后不会改变视图。

vue实例自身属性和方法以 $ 开头，如： $el、$data。

三、指令

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


`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}