vue.js实战学习——内置指令（三）

注：此内容摘抄自：梁灏的《Vue.js实战》

注：记得要引入vue.js才能运行哦，文章中贴出的代码直接复制是不行的，html css js 都放在了一起，而且也没有引用vue.js。

7.过滤与排序

当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组。

<div class="app1">
    <ul>
        <template v-for="book in filterBooks">
            <li>书名：{{book.name}}</li>
            <li>作者：{{book.author}}</li>
        </template> 
    </ul>
</div>

var app1=new Vue({
    el:'.app1',
    data:{
        books:[
            {name:'《Vue.js实战》',author:'梁灏'},
            {name:'《JavaScript语言精粹》',author:'Douglas Crockford'},
            {name:'《JavaScript高级程序设计》',author:'Nicholas C.Zakas'}
        ]
    },
    computed:{
        filterBooks:function(){
            return this.books.filter(function(book){
                return book.name.match(/JavaScript/); 
            });
        }
    }
});

上例是把书名包含JavaScript关键词的数据过滤出来，计算属性filterBooks依赖books，但不会修改books。

8.方法与事件

<div class="app2">
    点击次数：{{counter}}
    <button @click="counter++"> +1</button>
    <button @click="counter>0?counter--:counter"> -1</button>
    <button @click="handleAdd()"> +1</button>
    <button @click="handleAdd(10)"> +10</button>
</div>

var app2=new Vue({
    el:'.app2',
    data:{
        counter:0
    },
    methods:{
        handleAdd:function(count){
            count=count||1;
            this.counter+=count;
        }
    }
});

这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违背分离的原理，实则刚好相反。因为通过HTML就可以知道调用的哪个方法，将逻辑与DOM解耦，便于维护。最重要的是，当ViewModel销毁时，所有的事件处理器都会自动删除，无需自己清理。

Vue提供了一个特殊变量$event，用于访问原生DOM事件。

9.修饰符

 在@绑定的事件后加小圆点“.”，再跟一个后缀来使用修饰符。Vue支持以下修饰符：

• .stop
• .prevent
• .capture
• .self
• .once

具体用法：

<!-- 阻止单击事件冒泡 -->
<a @click.stop="handle"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="handle"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="handle"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<div @click.capture="handle">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div @click.self="handle">...</div>
<!-- 只触发一次，组件同样适用 -->
<div @click.once="handle">...</div>

在表单元素上监听键盘事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法：

<!-- 只有在keyCode是13时调用 vm.submit() -->
<input @keyup.13 ="submit">

也可以自己配置具体按键：

Vue.config.keyCodes.f1=112;
//全局定义后，就可以使用@keyup.f1

除了具体的某个keyCode外，Vue还提供了一些快捷键名称，以下是全部的别名：

• .enter
• .tab
• .delete(捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

（用法同上上个：<input @keyup.up ="submit">）

这些按键修饰符也可以组合使用，或和鼠标一起配合使用：

• .ctrl
• .alt
• .shift
• .meta(Mac下是Command键，Windows下是窗口键)

例如：

<!-- Shift + S -->
<input @keyup.shift.83="handleSave">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>