Vuejs学习中组件的重要选项

组件的重要选项
data
html:

<template>
    <div>{{ a }}</div>
</template>
js:


<script>
    newVue({
        data: {
            a:1,
            b: []
        }
    })
</script>

vue的所有数据都是放在data里面，data是个对象，而且必须是函数，这是官方特意交代的。

所以这个对象a在页面中就可以进行双向绑定，在这个vue里面也可以通过this.a和this.b来取数据。

methods
js:

<script>
    newVue({
        data: {
            a:1,
            b: []
        },
        methods: {
             doSomething:function() {
                console.log(this.a)
            }
        },
    })
</script>

methods就是方法，这个方法就是打印出来的data里面的一个a，所有的方法，包括其他的一些选项里都可以去到data里面的数据

watch
js:

<script>
    newVue({
        data: {
            a:1,
            b: []
        },
        methods: {
            doSomething:function() {
                this.a ++
            }
        },
        watch: {
            'a':function(val,oldVal){
                console.log(val,oldVal)
            }
        }
    })
</script>

watch其实就是监听，从上面的例子我们可以看出watch里面的a其实就是数据data里面的a，监听数据a里面的变化，在methods中的doSomething中执行了+1的操作，watch指定的方法就会自动去执行这个方法，然后我们打印出来了a的值的变化：val等于2，oldVal等于1。所以watch是对数据进行了监听，改变后的操作

模板指令(写在HTML中)
数据渲染：v-html、v-text、{{}}

{{ a }}

上面的三个例子是不等价的

v-text是格式处理了html

v-html是保存了html结构

但是无论如何a永远对应的是数据里面的a

条件渲染：v-if、v-show
html:

<p v-if="monkeyShow"></p>
<p v-show="monkeyShow"></p>
js:


<script>
    newVue({
        data: {
            monkeyShow:true
        }
    })
</script>

v-if、v-show就是控制元素的显示和隐藏，他们的区别就是v-if是不渲染DOM元素，v-show是根据css里面的display:none来对它进行隐藏，在代码是能看到DOM元素的。

列表渲染：v-for
html:

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


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

v-for 是根据一组数组的选项列表进行渲染

上面的例子中v-for=“item in items”，第一个是循环体里中的一个变量，就是每一项，in后面的这个变量是vue对象数据原理的列表，然后我们在指定的循环体里的变量之后就可以通过循环体的这个对象的属性来取得，最后通过v-text渲染到p的html中，所以得出来的结果是第一行apple，第二行banana

事件绑定：v-on
html:

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


methods: {
    doThis:function(someThing) {
         
    }
},

v-on 是监听 DOM 事件来触发一些 JavaScript 代码。v-on有个简写的方法v-on:click，指的是这个click这个button的时候去执行doThis方法，可以简写成@click。

这里的doThis就不是数据原理的东西了，而是methods里取方法

属性绑定：v-bind
html:

<a v-bind:href="url"></a>
<a :href="url"></a>
js:

data: {
    url:'www.monkeyblog.cn'
},

v-bind是指对DOM元素的属性绑定的一些操作

上面的 href 是参数，它告诉 v-bind 指令将元素的 href 特性跟表达式 url 的值绑定