Vue学习笔记二

快来打我* 2022-06-09 11:12 186阅读 0赞

#### 观察者 ####

在数据变化响应，执行异步操作或者开销比较大的时候，我们可以采用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>