Vue.js的常用指令

Vue.js提供了一些常用的内置指令：

• v-if指令
• v-show指令
• v-else指令
• v-for指令
• v-bind指令
• v-on指令

Vue.js具有良好的扩展性，可以开发一些自定义的指令。

 

v-if 是条件渲染指令，它根据表达式的真假来执行元素的插入或者删除行为。例：

<div id="app">
		<h1 v-if="yes">Yes!</h1>
		<h1 v-if="no">No!</h1>
		<h1 v-if="age >= 25">Age: {{age}}</h1>
		<h1 v-if="name.indexOf('jack') >= 0">Name:{{name}}</h1>
</div>

	<script>	
		new Vue({
			el:'#app',
			data:{
				yes:true,
				no:false,
				age:28,
				name:'keepfool',
				message:'hello'
			}
		})		
	</script>

这段代码使用了4个表达式：

• 数据的yes属性为true，所以"Yes!"会被输出；
• 数据的no属性为false，所以"No!"不会被输出；
• 运算式age >= 25返回true，所以"Age: 28"会被输出；
• 运算式name.indexOf('jack') >= 0返回false，所以"Name: keepfool"不会被输出。

 

v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。

<div id="app">
		<h1 v-show="yes">Yes!</h1>
		<h1 v-show="no">No!</h1>
		<h1 v-show="age >= 25">Age: {{age}}</h1>
		<h1 v-show="name.indexOf('jack') >= 0">Name:{{name}}</h1>
</div>

<h1 style="display:none"> No! </h1>

 

 

v-else指令可以用v-else指令为v-if或v-show添加一个“else块”。

v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。

        <div id="app">
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-else>Name: {{ name }}</h1>
            <h1>---------------------分割线---------------------</h1>
            <h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1>
            <h1 v-else>Sex: {{ sex }}</h1>
        </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                age: 28,
                name: 'keepfool',
                sex: 'Male'
            }
        })
    </script>

 

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：

v-for="item in items"

items是一个数组，item是当前被遍历的数组元素。

<div id="app">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Sex</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="person in people">
                        <td>{{ person.name  }}</td>
                        <td>{{ person.age  }}</td>
                        <td>{{ person.sex  }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

<script>
        var vm = new Vue({
            el: '#app',
            data: {
                people: [{
                    name: 'Jack',
                    age: 30,
                    sex: 'Male'
                }, {
                    name: 'Bill',
                    age: 26,
                    sex: 'Male'
                }, {
                    name: 'Tracy',
                    age: 22,
                    sex: 'Female'
                }, {
                    name: 'Chris',
                    age: 36,
                    sex: 'Male'
                }]
            }
        })
    </script>

在选项对象的data属性中定义了一个people数组，然后在#app元素内使用v-for遍历people数组（v-for="person in people"），输出每个person对象的姓名、年龄和性别。

 

 

v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class

v-bind:argument="expression"

<div id="app">
            <ul class="pagination">
                <li v-for="n in pageCount">
                    <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
                </li>
            </ul>
        </div>

<script>
        var vm = new Vue({
            el: '#app',
            data: {
                activeNumber: 1,
                pageCount: 10
            }
        })
    </script>

.pagination .active {
	color: #fff;
	background-color: #009a61;
	border-left: none;
	border-right: none;
}

v-bind指令作用于元素的class特性上，将active绑定到点击当前页后高亮。

 

 

v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：

<a v-on:click="doSomething">

有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。

        <div id="app">
            <p><input type="text" v-model="message"></p>
            <p>
                <!--click事件直接绑定一个方法-->
                <button v-on:click="greet">Greet</button>
            </p>
            <p>
                <!--click事件使用内联语句-->
                <button v-on:click="say('Hi')">Hi</button>
            </p>
        </div>

 <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue.js!'
            },
            // 在 `methods` 对象中定义方法
            methods: {
                greet: function() {
                    // // 方法内 `this` 指向 vm
                    alert(this.message)
                },
                say: function(msg) {
                    alert(msg)
                }
            }
        })
    </script>

Greet按钮将它的单击事件直接绑定到greet()方法，而Hi按钮则是调用say()方法。

 

 

Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。

<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>

<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>