Vue学习笔记二

观察者

在数据变化响应，执行异步操作或者开销比较大的时候，我们可以采用watch

绑定class数组

方法一：

<div id="app">
        <div v-bind:class="classObject">hello xiaoD</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                classObject: {
                    active: true,
                    right_bar: true
                }
            }
        })
    </script>

方法二：

<div id="app">
        <div v-bind:class="[active_class,right_bar_class]">hello xiaoD</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                active_class: 'active',
                right_bar_class: 'right_bar'
            }
        })
    </script>

class绑定在组件上

在主键已经有class属性的时候，再添加不会被覆盖，而是累加
注意：注册主键的时候一定要实例化，否则无效

<div id="app">
        <my-component class="three">14</my-component>
    </div>
    <script type="text/javascript">
        Vue.component('my-component',{
            template: '<p class="one two">xiaoD</p>'
        })
        var app = new Vue({
            el: "#app",
        })
    </script>

可以复用的元素

Vue会尽可能的高效率的渲染元素，经常会复用已经有的元素而不是重新开始渲染
默认不重新渲染

<div id="app">
        <template v-if="login === true">
            <label>username</label>
            <input placeholder="please input your username" >
        </template>
        <template v-else>
            <label>email</label>
            <input placeholder="please input your email" >
        </template>
        <button @click="transfer">变换</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                login: true,
            },
            methods: {
                transfer: function(){
                    this.login = !this.login
                }
            }
        })
    </script>

需要重新渲染

<div id="app">
        <template v-if="login === true">
            <label>username</label>
            <input placeholder="please input your username" key="username">
        </template>
        <template v-else>
            <label>email</label>
            <input placeholder="please input your email" key="email">
        </template>
        <button @click="transfer">变换</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                login: true,
            },
            methods: {
                transfer: function(){
                    this.login = !this.login
                }
            }
        })
    </script>

v-show

注意:v-show不支持template，不会报错，只是无效

v-show VS v-if

v-if有更高的切换开销，v-show有更高的初始渲染开销。如果需要切换比较频繁，那么久使用v-show。如果运行时条件不太可能改变，则使用v-if较好

v-for中使用三个参数

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>