Vue常用指令

最新推荐文章于 2024-02-26 10:04:43 发布

原创最新推荐文章于 2024-02-26 10:04:43 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

你好呀Vue 专栏收录该内容

14 篇文章

订阅专栏

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>