vue.js
是一套用于构建用户界面的渐进式框架
ps：如果要引用vue的实例需要在顶部引入vue的库
<script src='./vue.js'></script>
<body>
<div id="app">{{content}}</div>
<script>
var app = new Vue({
el: '#app',
data: {
content: 'hello world'
})
</script>
</body>
data中放的是什么，页面展示的也是什么；data改变则页面随之改变。
v-for(标签指定)可以帮助循环数据
<li v-for="item in list">{{item}}</li>
data:{
list:['课一'，'课二']
}
}
v-on(绑定事件)
<button v-on:click="handleBtnClick"></button>
methods:{
handleBtnClick:function(){
alert('click')
}
}
v-model(数据双向绑定)
<input type="text" v-model="inputValue"/>
data:{
inputValue:''
}
input中的value值与data中的inputValue绑定，两者相互影响。
v-bind(样式绑定)设置样式属性
v-bind:class 设置一个对象，动态切换 class
<div v-bind:class="{ active: isActive }"></div>
v-bind:style 直接设置样式
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</div>
v-if（条件渲染）指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<div v-if="awesome">Vue is awesome!</div>
可以使用 v-else 指令来表示 v-if 的“else 块”,v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if，顾名思义，充当v-if的“else-if 块”，可以连续使用，类似于 v-else，v-else-if也必须紧跟在带v-if或者v-else-if的元素之后。
用key管理可复用的元素Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
v-show(根据条件展示元素的选项)
<div v-show="ok">Hello!</div>
ps:不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
v-show不支持<template>元素，也不支持v-else
vue实现TodoList
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
list:[]
inputValue:''
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
}
})
</script>
</body>
MVVM模式（Model-View-ViewModel）
当数据变更时，vue中底层自动根据数据的不同帮助我们重新渲染页面
前端组件化
可将一个整体页面切割成一个个部分，每部分即组件。合理拆分组件可以把一个大型项目拼接出来，每个组件的维护性会提高。总而言之，每一个组件就是页面上的区域。
简单的组件间传值
父组件向子组件传值：
父组件通过v-bind绑定值
父组件通过v-for遍历list,获得每一个item，:content未v-bind:content的简写，把item的值绑定到content字段传给子组件。
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
在子组件中通过props接收从父组件传过来的值。
var TodoItem = {
props:['content'],
template:"<li>{{content}}</li>"
}
在子组件中通过插值表达式{{}}的方式可以将接收到的content值绑定到<li>标签上。
methods:{
handleItemClick:function(){
this.$emit("delete")
}
}
}
在父组件中监听delete事件，如果监听到就根据当前的index把item从list中删除
<todo-item v-bind:content="item"
v-for="item in list"
@delete="handleItemDelete>
</todo-item>
methods:{
handleItemClick:function(){
this.$emit("delete",this.index);
}
vue的计算属性，方法，侦听器
计算属性
计算属性——通过计算得来的属性
PS：计算属性的缓存机制：当计算属性依赖的变量不发生任何改变的时候，计算属性将沿用上一次计算的结果，不会再重新计算。
计算方法
每当触发重新渲染时，调用方法将总会再次执行函数
侦听器
watch，为一个对象，内部可以添加data中的变量作为监听对象，如果监听对象发生变化（值必须变成另一个），则触发对应的侦听器中的函数
计算属性的setter和getter
<script>
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell",
lastName:"Lee"
},
computed:{
fullName:{
get:function(){
return this.firstName +" "+this.
lastName
},
set:function(value){
console.log(value);
}
}
}
})
</script>
set：通过设置一个值来改变它相关联的值，而改变了它相关联的值之后，又会引起fullName值的重新计算，页面也就跟着变化了
computed:当它依赖的值发生变化的时候，他就会重新的计算、更新。
即：当你set fullName的时候，this.firstName的值发生变化，恰好这个值又是fullName所依赖的一个值，所以就会引起fullName的重新计算，重新计算后，fullName变了，页面上显示的fullName也发生变化了
