vue基础

数据渲染：v-text、v-html、{{}}
例子：

<p>{{a}}</p>
<p v-text="a"></p>
<p v-html="a"></p>

三者对应同一个a

new Vue({
    data: {
        a: 1,
        b: []
    }
})

控制模板隐藏：v-if、v-show
例子：

<p v-if="isShow"></p>
<p v-show="isShow"></p>//通过css中的display：none来控制的，在代码里能看到元素

new Vue({
    data: {
        isShow: true;
    }
})

渲染循环列表：v-for
例子：

<ul>
    <li v-for='item in items'>
        <p v-text='item.label'></p>
    </li>
</ul>

data: {
    item: [
        {
            label: 'apple'
        },
        {
            label: 'banana'
        }
    ]
},

事件绑定：v-on

<button v-on:click="doThis"></button>
<button @click="doThis"></button>//简写

methods: {
    dothis: function(someThing){
        }
    }

属性绑定：v-bind

小结

vue对象有三个常用的属性：
data：vue对象的数据
methods：vue对象的方法
watch：设置对象监听的方法
vue对象里的设置通过html指令进行关联