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的简写方式，