Vue——内置指令

时间:2020-04-12
本文章向大家介绍Vue——内置指令,主要包括Vue——内置指令使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1.基本指令

(1)v-cloak

v-cloak不需要表达式,他会在Vue实例结束编译时从绑定的HTML元素上移除。
经常和CSS的display:none搭配使用。

如果网速很慢,vue.js文件还没有加载完成,那么页面上就会显示{{message}}的变量名,这样不利于用户体验。
这是加上一个css的display:none就解决问题了。
在变量没有加载完成时页面会一直闪动,这是解决页面初始化的一个不错的解决方案。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        {{ message }}
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: '测试文本'
            }
        })
    </script>
</body>
</html>

(2)v-once

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-once>{{ message }}</div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: '测试文本001'
            }
        })
    </script>

</body>
</html>

2.条件渲染指令

(1)v-if/v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <p v-if="statu === 1">当statu为1时显示</p>
        <p v-else-if="statu === 2">当statu为2时显示</p>
        <p v-else>否则什么都不显示</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                statu: 1
            }
        })
    </script>

</body>
</html>

(2)v-show

v-show和v-if在功能上有些类似,
v-if会根据表达式适当的销毁或者重建元素,而v-show只是简单的CSS属性切换,无论是否显示都会被编译。
v-if适合条件不经常改变的场景,因为开销较大,而v-show适合频繁切换的场景。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <p v-show="status === 1">为1的时候显示该行</p>
        <!--<p style="display: none;">为1的时候显示该行</p>-->
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                status: 2
            }
        })
    </script>
</body>
</html>

3.列表渲染

(1)基本用法

实例一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>体验vue</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="book in books">{{book.name}}</li>
        </ul>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue ({
            el: '#app',
            data: {
                books: [
                    { name: '《碧血剑》'},
                    { name: '《天龙八部》'},
                    { name: '《圆月弯刀》'},
                    { name: '《武动乾坤》'}
                ]
            }
        })
    </script>
</body>
</html>

效果:

实例二:

v-for支持一个可选参数作为当前项的索引,类似于枚举的效果.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>体验vue</title>
</head>
<body>
    <div id="app">
        <ul>
            <!--v-for支持一个可选参数作为当前项的索引,类似于枚举的效果-->
            <li v-for="(book,index) in books">{{ index }}-{{ book.name }}</li>
                    <!--列表渲染还可以使用of来代替in作为分隔符-->
                    <li v-for="(book,index) of books">{{ index }}-{{ book.name }}</li>
        </ul>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue ({
            el: '#app',
            data: {
                books: [
                    { name: '《碧血剑》'},
                    { name: '《天龙八部》'},
                    { name: '《圆月弯刀》'},
                    { name: '《武动乾坤》'}
                ]
            }
        })
    </script>
</body>
</html>

效果:

实例三:

v-for可以在内置标签template上将多个元素进行渲染.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <template v-for="book in books">
                <li>书名: {{ book.name }}</li>
                <li>作者: {{ book.author }}</li>
            </template>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                books: [
                    {
                        name: '《天龙八部》',
                        author: '金庸'
                    },
                    {
                        name: '《圆月弯刀》',
                        author: '古龙'
                    },
                    {
                        name: '《云海玉弓缘》',
                        author: '梁羽生'
                    }
                ]
            }
        })
    </script>
</body>
</html>

效果:

实例四:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <span v-for="value in user">{{ value }}</span>
    </div>
    <!--对象的属性也是可以遍历的-->
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                user: {
                    name: 'kebi',
                    sex: 'boy',
                    age: 26
                }
            }
        })
    </script>
</body>
</html>

效果:

实例五:

遍历对象属性时有两个可选参数,分别是键名和索引.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(value,key,index) in user">{{ index + 1 }}.{{ key }}:{{ value }}</li>
        </ul>
    </div>
    <!--遍历对象的时候还有可选参数key,index-->
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                user: {
                    name: 'kebi',
                    sex: 'boy',
                    age: 26
                }
            }
        })
    </script>
</body>
</html>

效果:

(2)过滤与更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <template v-for="book in books">
                <li>书名: {{ book.name }}</li>
                <li>作者: {{ book.author }}</li>
            </template>
        </ul>
    </div>
    <!--v-for可以在内置标签template上将多个元素进行渲染-->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                books: [
                    {
                        name: '《天龙八部》',
                        author: '金庸'
                    },
                    {
                        name: '《圆月弯刀》',
                        author: '古龙'
                    },
                    {
                        name: '《云海玉弓缘》',
                        author: '梁羽生'
                    }
                ]
            }
        });

        //添加过滤
        // app.books = app.books.filter(function (item) {
        //     return item.name.match(/龙/);
        // })
        //Vue在检测到数据变化的时候,并不是重新渲染整个列表,而是最大化的复用DOM元素
        //替换的数组中含有相同元素的项不会被重新渲染,因此可以打断用新的数据来替换旧的数据,不用太过于担心性能的问题

        //如果你要添加一个新的项,下面有两种方法

        //vue内置的set方法
        Vue.set(app.books, 3, {
            name: '雪山飞狐',
            author: '金庸'
        });

        app.books.splice(4,1,{
            name: '七剑下天山',
            author: '梁羽生'
        })
    </script>
</body>
</html>

(3)过滤与排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <template v-for="book in sortBooks">
                <li>书名: {{ book.name }}</li>
                <li>作者: {{ book.author }}</li>
            </template>
        </ul>
    </div>
    <!--v-for可以在内置标签template上将多个元素进行渲染-->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                books: [
                    {
                        name: '《天龙八部》',
                        author: '金庸'
                    },
                    {
                        name: '《圆月弯刀》',
                        author: '古龙'
                    },
                    {
                        name: '《云海玉弓缘》',
                        author: '梁羽生'
                    }
                ]
            },
            //如果你不想改变原数组,想通过过滤或排序的显示时,可以使用计算属性来返回过滤或排序后的结果
            computed:{
                //过滤
                // filterBooks:function () {
                //     return this.books.filter(function (book) {
                //         return book.name.match(/龙/)
                //     })
                // }
                // 按照书名长度排序
                sortBooks: function () {
                    return this.books.sort(function (a,b) {
                        return a.name.length < b.name.length;
                    })
                }
            }
        })
    </script>
</body>
</html>

4.方法与事件

(1)基本用法

可以在vue实例对象的methods选项中定义方法,然后就可以进行调用。
用方法只是为了让达到复用的效果。不使用方法其实也是可以达到相同的效果的。
下面就没有定义方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        点击次数: {{ counts }}
        <button @click="counts++">点击加一</button>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                counts: 0
            }
        })
    </script>
</body>
</html>

如果定义方法我们可以这样写:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        点击次数: {{ counts }}
        <button @click="handleAdd()">点击加一</button>
        <button @click="handleAdd(10)">点击加十</button>
        <!--如果handleAdd不添加()那么会出现[object MouseEvent]-->
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                counts: 0
            },
            methods: {
                handleAdd: function (count) {
                    count = count || 1;
                    this.counts += count
                }
            }
        })
    </script>
</body>
</html>

需要注意的是:
@click后面的方法名可以不跟括号。前提是不需要传入参数.
如果该方法有参数,默认会将原生事件对象event传入。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <a href="http://www.baidu.com" @click="handleClick('禁止打开', $event)">打开链接</a>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                handleClick: function (message,event) {
                    event.preventDefault();  //取消事件的默认行为
                    window.alert(message);
                }
            }
        })
    </script>

</body>
</html>

效果:

(2)修饰符

<!--上例中使用的event.preventDefault()也可以用Vue事件的修饰符来实现,在@绑定的事件后面加小圆点’.‘,再跟一个后缀来使用修饰符-->

<!--阻止单机事件冒泡-->
<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 @keyCode.13 = 'submit'>

<!--也可以自己配置具体键-->
Vue.config.keyCode.f1 = 112

<!--Vue支持一下修饰符-->
.stop
.prevent
.capture
.self
.once
<!--Vue支持的快捷键-->
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

原文地址:https://www.cnblogs.com/yangmingxianshen/p/12687622.html