Vue常用指令

2020-02-04 本文已影响0人 wenmingxing

1. v-cloak

v-cloak不需要表达式，其会在Vue实例结束编译时从绑定的HTML元素上移除，常与CSS中的display:none配合使用，其目的是为了解决在未加载代码导致的闪烁现象：

<html>
    <head>
        <meta charset="utf-8">
        <title>Vue-05</title>
        
        <!-- 增加v-cloak的CSS样式 -->
        <style scoped>
            [v-cloak] {
                    display:none;
                }
        </style>
    </head>
    
    <!-- v-cloak -->
    <body>
        <div id="app" v-cloak>
            {{message}}
        </div>
    
        <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'This is a message'
                },
            })
        </script>
    </body>
</html>

如果不使用v-cloak ，当网速较慢、Vue.js文件还没被加载完时，在页面上会显示{{message}}的字样，直到Vue创建实例、编译模板后，DOM才会被替换，所以会出现闪动。

2. v-once

v-once 也不需要表达式，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。

3. v-if、 v-else-if、 v-else

注意事项：通过Vue.js所提供的key属性，解决元素复用问题。

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

4. v-if 与 v-show

5. v-for

6. 数组更新

Vue的核心是数据与视图的双向绑定，当我们修改数组时，Vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。

Vue包含了一组数组变异的方法，使用它们改变数组也会触发视图更新：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

此外，Vue还提供了非变异的方法，这些方法不会改变原数组，而是返回一个新数组：

filter()
concat()
slice()

7. 过滤与排序

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

<!-- 过滤与排序-不改变原数组 -->
<body>
    <div id="app" v-cloak>
        <ul>
            <template v-for="book in books">
                <li>book's name: {{book.name}}</li>
                <li>book's author: {{book.author}}</li>
            </template>
        </ul>

        <ul>
            <template v-for="book in filterBooks">
                <li>book's name: {{book.name}}</li>
                <li>book's author: {{book.author}}</li>
            </template>
        </ul>

        <ul>
            <template v-for="book in sortedBooks">
                <li>book's name: {{book.name}}</li>
                <li>book's author: {{book.author}}</li>
            </template>
        </ul>
    </div>

    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                books: [
                    {
                        name: 'Vue.js',
                        author: 'Liang'
                    },
                    {
                        name: 'JavaScript',
                        author: 'Douglas Crockford'
                    }
                ]
            },

            computed: {
                filterBooks: function() {
                    return this.books.filter(function(book) {
                        return book.name.match(/JavaScript/);
                    });
                },

                //todo 不知道为什么无效
                sortedBooks: function() {
                    return this.books.sort(function(a, b) {
                        return a.name.length > b.name.length;
                    });
                }
            },
        })
    </script>
</body>

执行结果

8. 修饰符

修饰符是由点开头的指令后缀来表示的。

8.1 事件修饰符

Vue.js 为 v-on 提供了事件修饰符:

.stop
.prevent
.capture
.self
.once
.passive

各个修饰符的用途可以在使用时查阅。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

8.2 按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

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

8.3 系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器：

.ctrl
.alt
.shift
.meta

8.4 鼠标修饰符

.left
.right
.middle

参考

《Vue.js实战》