vuejs组件的重要选项

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