vue总结
构建用户界面的渐进式框架
渐进式：用到什么功能即可使用转么的框架子模块。
两个核心点
向应的数据绑定
当时图发生改变->自动跟新视图，利用Object.defindProperty中的setter/getter代理数据，监控对数据的操作。(IE8不兼容)
组合的视图组件
ui页面映射位组件树
划分组件可维护，可重用，可测试
虚拟DOM
利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构。
当数据发生变化时，能够只能低级选出重新渲染组建的最小代价并应用到DOM操作上。
MVVM模式
M: Model 数据模型
V: view 视图模板
vm: view-Model 视图模板
V:
<div id="demo">
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
vm:
let data = {
message: "hello world!"
}
M:
var vm = new Vue({
el: "#demo",
data: data
})
Vue实例
每一个应用都是通过Vue这个构造函数创建根实例(root instance)启动newVue
需要传入选项对象，对象包含挂载元素，数据，模板，方法等。
el:挂载元素选择器
data:代理数据
methods:定义方法
vue代理data数据
每个Vue实例都会代理data对象里的所有的属性，这些被代理的属性是响应的。新添加的属性不具备响应功能，改变后不会跟新视图。
实例自身属性和方法
暴露自身的属性和方法，以$开头为例：$el,$data
var vm = new Vue({
el: "#demo",
data: obj,
methods: {
clickHandle() {
alert(0);
}
}
});
//vm是一个对象，其中里面的为内置成员和属性，以$开头
声明式渲染
声明式：
只需声明在哪里做什么，而无需关心如何让实现,调用一些方法，类库实现。
命令式
需要以剧吐代码表达在哪里做什么，如何让实现。需求让自己实现的过程细节。
vue申明式渲染
初始化根实例，vue自动将数据绑定在DOM模板上
<div id="demo">
<input type="text" v-model="message">
<p>{{message}}</p>
</div>
let data = {
message: "hello world!"
}
var vm = new Vue({
el: "#demo",
data: data,
methods: {
//...
}
})
指令
是一种特殊的自定义行间属性，他的职责是当其表达式的值改变时相应地将某些行为应用到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 }
html模板
模板：基于DOM的模板，模板都是可解析的有效的HTML
插值：
文本：使用Mustache语法(双打括弧){{value}}
作用：替换实例上的属性值，当值改变时，插值内容处会自动更新
原生的html:双打括弧输出的是文本，不会解析html
<div id="demo">
<div v-html="html"></div>
</div>
let obj = {
html:"<div>hello vue</div>"
}
var vm = new Vue({
el:"#demo",
data: obj
});
属性：使用v-bind进行绑定，可以响应变化
<div id="demo">
<div v-html="html" :costom="abc"></div>
</div>
let obj = {
html:"<div>hello vue</div>",
abc: 1
}
var vm = new Vue({
el:"#demo",
data: obj
});
使用JavaScript表达式：写简单的表达式
<div>{{true?"yes":"no"}}</div>
字符串模板
template选项对象属性
模板将会替换挂载元素的内容都将被忽略
<div id="demo">
<div v-html="html" :costom="abc"></div>
</div>
let obj = {
html:"<div>hello vue</div>",
abc: 1
}
var str = "<div>assassin{{abc}}</div>"//根节点只有一个,不能同级出现，嵌套是可以的
var vm = new Vue({
el:"#demo",
data: obj,
template: str
});
//上述视图将会被新模板替换掉
根节点只有一个，支持es6的超级模板
将HTML结构卸载一对script 标签中，设置type=“x-templete”。
//html
<script id="temp" type="x-templete">
<div>
{{abc}}
<span>assassin</span>
</div>
</script>
//js
let obj = {
html:"<div>hello vue</div>",
abc: 1
}
var vm = new Vue({
el:"#demo",
data: obj,
template: "#temp"//对应的挂载点
});
//有局限性，跨文件等有问题
模板-rander函数
自己创建模板
绑定自己的样式：
.rad{color: red;}
<div id="demo">
<span v-bind:class="{red:addClass}"></span>
</div>
let obj = {
addClass: false
};
var vm = new Vue({
el: "#demo",
data: obj
});
//会根据obj数据修改span中的class
render 选项对象属性
createElement(标签名，[数据对象]，子元素)；
.fl{float:left;}
.bgR{background: red;}
<div id="demo"></div>
let obj = {
html: "<div>hello vue.js</div>",
abc: 2
};
var vm = new Vue({
el: "demo",
data: obj,
render(createElement) {
return createElement(
"ul",{
class: {
bgr: true,
fl: true
},
style: {
font-size: "50"
},
attrs: {
abc: "assassin"
},
domProps: {//自身的一些属性
innnerHTML: "<li>html</li>"//会覆盖后面的标签
}
},[
createElement("li",1);
createElement("li",2);
createElement("li",3);
createElement("li",4);
]
)
}
});
列表渲染
v-for根据一组数组的选项列表进行渲染
语法：
value,key in items
value,key of items
变异方法：
vue提供一组方法，对数组进行操作的时候，会触发试图跟新,并不是原生的js方法。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
事件处理器
v-on指令，用来监听DOM事件出发代码
语法：
v-on:eventName="eventHandle" 或者 @
事件处理函数写在methods中统一管理
时间对象：
在处理时间函数中获取
内联事件按处理函数执行，传入时间对象 $event
事件修饰符：
事件处理函数只有纯粹的逻辑判断，不处理DOM世间安得细节，如：阻止冒泡，取消默认行为，判断按键
修饰符的位置：
v-on:eventName.修饰符
修饰符：
.stop .prevent .capture .self .once
案件修饰符：
.enter .tab .delete .esc .space .up .down .left .right .ctrl .alt .shit .meta .键值
条件渲染
v-show指令
根据表达式的值，用来显示/隐藏元素
语法：v-show="表达式"
元素会被渲染在页面中，指针局的表达式的值进行css切换
动态class
动态绑定class
class也为元素的属性，可以使用v-bind:class
语法：
:class="{className:表达式}"
//表达式为true表示添加此className
//..
:class="[className1,className2]"
自定义指令
除了vue内置的指令，可以自己设置指令
选项对象的directives属性
{
directives:{}
}
钩子函数：
update被绑定元素所在的模板更新时调用
钩子函数中的参数：
el:指令所绑定的元素，可以用来直接操作DOM
binging:一个对象
binding对象下的value:指令的绑定值
directives: {
"focus": {//自定义指令
update(el,binding) {
if(binding.value) {
el.foucs();
}
}
}
}
<input v-foucs="edtorTodos === item" />
计算属性
模板是为了描述视图属性的结构，模板中放入太多逻辑，导致模板过重且难以维护。
在计算一个计算属性时，Vue.js更新它的依赖列表并缓存结果，中有当其中一个依赖发生了变化，缓存的结果才无效。
语法：
在选项对象中
{
...
computed: {}
}
深度监控watch
浅监控：
watch: {
list: function() {
//监控list这个属性，当这个属性发生变化就会执行函数，list对象下的属性不能监控。
}
}
深监控：
watch: {
list: {
handler: function() {
store.save("xxxx",this.list);
},
deep: true
}
}