new Vue({
el:'#demo',
data:{
message:'Hello vue.js!'
}
})我们看到这个括号里面包含了很多中间的选项，小括号里面其实是一些参数，这些参数指定了实例化vue的一些特性
第一个选项data
new Vue({
data:{
a:1,
b:[]
}
})<p>{{ a }}</p>vue的所有数据都是放在data里面的，data里面也是一个对象，对象里面的a可以对页面进行进行双向绑定，这两个是关联的
第二个选项method
new Vue({
data:{
a:1,
b:[]
},
methods:{
doSomething:function(){
console.log(this.a)
}
}
})methods就是方法，这个方法里面打印了a
第三个选项watch
new Vue({
data:{
a:1,
b:[]
},
methods:{
doSomething:function(){
this.a++
}
},
watch:{
'a':function(val, oldVal){
console.log(val,oldVal)
}
}
})watch字母上理解就是一个监听，这里面我们监听了a，这个a就是数据里面的a,比如doSomething里面进行了+1的变化，watch里面对应的监听方法就会自动的去执行，这里打印了新的值和旧的值，如果+1后，val就是2,oldVal就是1
介绍了上面三个选项，我们会想，这些要怎么跟页面进行联系，他们之间有一个粘合剂，就是模板指令，模板指令是写在html里面的，比如最常用的就是
数据渲染：v-text,v-html,{{}}
new Vue({
data:{
a:1,
b:[]
}
})<p>{{ a }}</p>
<p v-text='a'></p>
<p v-html='a'></p>这三个其实不能说是等价的，因为v-text是格式处理了html,v-html保存了html结构，但是无论如何这个a都是对应到数据源里面的a,当这个a通过doSomething这个方法进行自增的话，模板上的a会自动进行更新，所以这其实是运用模板的一个优势
控制模板隐藏:v-if,v-show
new Vue({
data:{
isShow:true
}
})<p v-if='isShow'></p>
<p v-show='isShow'></p>
v-if,v-show就是控制这个元素的显示和隐藏，他们的差别是v-if直接不渲染这个dom元素，而v-show是通过css的display来进行隐藏，在代码里是可以看到这个dom元素的
渲染循环列表:v-for
new Vue({
items:[
{
label:'apple'
},{
label:'banana'
}
]
})<ul>
<li v-for='item in items'>
<p v-text='item.label'></p>
</li>
</ul>
我们使用其他的框架大多都有列表多渲染方法，就是循环渲染，我们的数据源是上面的一个数组
事件绑定:v-on
new Vue({
methods:{
doThis:function(sth){
}
}
})<button v-on:click='doThis'></button>
<button @click='doThis'></button>
时间绑定是很常用的一个东西，@click是v-on:click的简写模式，点击的时候去执行doThis这个方法，这个doThis是选项methods里面的东西，而不是data里面的，data主要一些固定的数据，操作数据的这个概念，method是页面中会使用到的一些方法
属性绑定: v-bind
<img v-bind:src='imageSrc'>
<div :class='{red:isRed}'></div>
<div :class='[classA,classB]'></div>
<div :class='[classA,{classB:isB,classC:isC}]'></div>v－bind是只对dom元素属性的一些操作，v-bind:src指的是src属性，给赋值imageSrc,v-bind最常用的是:class，:class是v-bind:class的简写方式，