Vue.js学习笔记--2.基础v-指令

整理自官网教程 -- https://cn.vuejs.org/

　　1. v-bind绑定Class与Style

　　　　a. 绑定Class

　　　　　　语法：v-bind:class="{classname:boolParam} | object"

　　　　　　其中，classname为类名，boolParam为data中声明的bool变量，object为类对象。

　　　　　　也可将class绑定到数组，数组内可为class变量名或带bool的class。以下例子渲染结果均为<div class="active"></div>。　　

<div  v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<div  v-bind:class="classObject"></div>
<div  v-bind:class="computedClass"></div>
<div  v-bind:class="[activeClass, {'text-danger':hasError}]"></div>

var app = new Vue({
    el:'#app',
    data:{
    　　isActive: true,
        hasError: false,
        error: null,
        classObject: {
            active: true,
            'text-danger': false
        },
        activeClass: 'active',
    },
　　computed: {
        computedClass: function() {
            return {
                active: this.isActive && !this.hasError,
                'text-danger': this.hasError && this.error
            }
        }
    }　　　　
})　　

　　　　b. 绑定style

　　　　　　语法：v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' } | object"

　　　　　　其中，activeColor和fontSize为在data内声明的变量,object为style对象，绑定style的用法与class类似。

　　

　　2. v-if 条件渲染

　　　　语法： v-if=boolParam | JS表达式

　　　　相关指令： v-else-if 、v-else

　　　　Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染，除非为元素添加唯一标识属性"key"。

　　　　如下例中，切换username时，input框会重新渲染，label不会。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

　　　　对比v-show:

　　　　带有 v-show 的元素始终会被渲染并保留在 DOM 中，v-show 只是简单地切换元素的 CSS 属性 display。v-show 不支持 <template> 元素，也不支持 v-else。

　　

　　3. v-for 列表渲染

　　　　语法：v-for="item in/of items"

　　　　items为data中声明的数组或对象，item为每项的别名。为了提升v-for的复用效率，也应为每项元素绑定"key"。用例如下。　　

<ul id="example-2">
  <!--遍历数组，index为索引，可只写item-->
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
  <br/>
  <!--遍历对象，key为键名，可只写value，添加了绑定的key属性-->
  <li v-for="(value, key, index) in person" :key="index">
    {{ index }}. {{ key }}: {{ value }}
  </li>
</ul>

var app = new Vue({
    el: '#example-2',
    data: {
        parentMessage: 'Parent',
        items: [
            { message: 'Foo' },
            { message: 'Bar' }
        ],
        person: {
            firstName: 'John',
            lastName: 'Doe',
            age: 30
        }
    }　　　
})

　　　　数组更新检测：

　　　　a) 使用Vue提供的变异方法会改变原始数组，如push()、pop()等。

　　　　b) 使用非变异方法会得到一个新数组，如filter()、concat()、slice()等。

　　　　c) 以上两项会触发视图更新，但直接利用索引设置一个项的值或修改数组长度时，不会触发。需要用Vue.set()、vm.items.splice()等方法代替。

　　　　显示过滤/排序结果：

　　　　可以通过computed属性或methods，返回需要的结果数组。

　　　　备注：

　　　　a) 当 v-for 和 v-if 处于同一节点时， v-for的优先级比 v-if 更高，即v-if会在每个循环中运行。若要先执行v-if，则可将其置于v-for的父元素或<template>上。

　　　　b) 2.2.0+的vue版本里，在组件中使用v-for时，key是必须的。

　　4. v-on 监听事件

　　　　语法： v-on:eventName="methodsName"

　　　　其中eventName为事件名，methodsName为实例中声明的方法。v-on:可缩写为@，使用如下。　　　　

<div id="app">
<button v-on:click="greet">Greet</button>
<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>
</div>

var app = new Vue({
    el: '#app',
    data: {
        name: 'Vue.js'
    },
    // 在 `methods` 对象中定义方法
    methods: {
        greet: function (event) {
            // `this` 在方法里指向当前 Vue 实例
            alert('Hello ' + this.name + '!')
            // `event` 是原生 DOM 事件
            if (event) {
                alert(event.target.tagName)
            }
        },
        say: function (message) {
            alert(message)
        }
    }　　
})

　　　　修饰符：　　

　　　　a. 事件修饰符：.stop、.prevent、.self等，可串联添加在事件后，如@click.stop等，可处理DOM事件细节。

　　　　b. 按键修饰符：按键别名如.enter、.tab等，可用@keyup.enter=""监听回车按键事件。