Vue 中两个核心点
1.响应的数据绑定
- 当数据发生改变，自动更新视图
- 利用
Object.definedProperty中的setter/getter代理数据，监控对数据的操作；
2.组合的视图组件
- ui 页面映射为组件树
- 划分组件可维护、可复用、可测试
虚拟DOM：
1.运行js的速度是很快的，但大量的操作DOM就会很慢。市场在更新数据后重新渲染页面，这样照成在没有改变数据的地方也重新渲染DOM节点，造成很大程度上的资源浪费。
2.利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构均称之为虚拟DOM。
3.当数据发生改变是，能够智能计算出重新渲染组件的最小代价并应用到DOM操作上。
MVVM模式：
M：Model数据结构
V：View视图模板
vm：view-Model视图模型
Vue实例
每一个应用都是通过 Vue 这个构造函数创建根实例(root instance)启动；
new Vue(选项对象)需要传入选项对象，对象包含挂载元素、数据、模板、方法等；el:挂载元素选择器String|HtmlElementdata:代理数据Object|Functionmethods:定义方法Object
Vue 代理 data 数据
每个 Vue 实例都会代理其 data 对象里所有的属性，这些被代理的属性是响应的；
新添加的属性不具备响应功能，改变后不会更新视图；
VUe 实例自身属性和方法
暴露自身的属性和方法，以 $ 开头，例如： $el $data
声明式渲染
-
声明式
只需要声明在哪里(where)做什么(what)，而无需关心如何实现(how) -
命令式
需要以具体代码表达在哪里(where)做什么(what)，如何实现(how)； -
案例
求数组中每一项的倍数命令式：使用 for 循环拿出每一项，然后求值完成后，再放入到另一数组中；
var arr = [1,2,3,4,5]; var newArr = []; for(var i=0; i<arr.length; i++) { newArr.push(arr[i]*2); }- 1
- 2
- 3
- 4
- 5
- 6
声明式：使用 map 方法，关注如何求值；
var newArr = arr.map(function(item){ return item * 2; });- 1
- 2
- 3
Vue声明式渲染
初始化根实例，Vue 自动将数据绑定在 DOM 模板上。
指令
- 是一种特殊的自定义行间属性；
- 指令的职责就是当其表达式的值改变时，相应地将某些行为应用到 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}
模板
1、 Html模板
基于DOM的模板，模板都是可解析的有效的HTML
插值
文本：使用“Mustache”语法(双大括号){{value}}
作用：替换实例上的属性值，当值改变时，插值内容处会自动更新
原生的html：双大括号输出的是文本，不会解析html
属性：使用v-bind进行绑定，可以响应变化
使用javascript表达式：写简单的表达式
2、 字符串模板
template
- 一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素，
- 匹配元素的 innerHTML
<script type="x-template">
- 挂载元素的内容都将被忽略
- 根节点只能有一个
3、 模板-render函数
Render函数
Render 选项对象的属性
createElement(标签名,[数据对象],子元素);
子元素为文本或数组
1. v-cloak
作用是取消数据绑定时出现的代码闪烁。在angular里面则是用ng-cloak指令。
example1:
<span>{{price}}</span>
example2:
<span v-bind="price"></span>
example3:
<span v-cloak>{{price}}</span>
例子1在vuejs解析{{price}}之前，用户是可以看到"{{price}}"这个字符串的。而例子2和例子3不会有这种闪烁的情况，实现的效果是一样的。
v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以，
<div class="#app" v-cloak>
<p>{{value.name}}</p>
</div>
而且，在css里面要添加
[v-cloak] {
display: none;
}
这样就可以防止页面闪烁了。
但是有的时候会不起作用，可能的原因有二：
1、v-cloak的display属性被层级更高的给覆盖掉了，所以要提高层级
[v-cloak] {
display: none !important;
}
2、样式放在了@import引入的css文件中
导入方式指的是使用 CSS 规则引入外部 CSS 文件。
示例：
<style>
@import url(style.css);
</style>两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中
2.hover效果
使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令（简写为：@）来完成。为标签绑定mouseenter以及mouseleave事件即可。
HTML代码：
<div id="app">
<p @mouseenter="enter" @mouseleave="leave">{{ message }}</p>
</div>
Vue代码：
var vm = new Vue({
el: '#app',
data: {
message: '默认值'
},
methods: {
enter: function(){
this.message = '修改值';
},
leave: function(){
this.message = '默认值';
}
}
});
