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>