# new Vue({ vue所有的数据都是放到data里面的

#     data:{ vue对象的数据

#         a:1,对象

#         b:[]  ，

#     }

#     methods:{vue对象的方法

#     dosomthing: function()

#     {

#       this.a ++

#       console.log(this.a)

#     }

#

#     }

#     watch: { vue对象的监听

#         'a': function(val, oldVal) {

#         console.log(val, oldVal)

#

#     }

#     }

#

# })

 

# 数据渲染 v-text, v-html, {

{}}

# <

p

>{

{a}}</

p

> 双向绑定了a

# <

p 

v-text="a"></

p

>

# <

p 

v-html="a"></

p

> html保存了html结构

#这里的a都是对应到了Vue数据源中的a

 

# 控制模块隐藏 v-if,v-show,

# <

p 

v-if="isShow"></

p

>

# <

p 

v-show="isShow"></

p

>

# new Vue({

#     data:{

#         isShow:true,

#     }

# })

#区别if 不渲染这个dom元素 show 是通过css的display:none对元素进行隐藏

 

#渲染循环列表v-for

# <

ul

>

# <

li 

v-for="item in items">

# <

p 

v-text="item.label"></

p

>

# </

li

>

# </

ul

>

# data:{

#     items:[

#         {label:'apple'},

#         {label:'banana'},

#     ]

# }

 

 

#事件绑定 v-on

#<

button 

v-on:click="doThis" > </

button

>

#<

button 

@click="doThis" > </

button

>

# methods:{

#     doThis:function(something){

#

# }

# }

 

#属性绑定:v-bind

# <

img 

v-bind:src="imgSrc">

# <

div 

:class="{red:isRed}"></

div

>

# <

div 

:class="[classA,classB]"></

div

>

# <

div 

:class="[classA,{classB:isB,classC:isC]"></

div

>