Vue指令（一）

小白学习日记

已于 2022-02-13 12:06:09 修改

阅读量521

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-02-10 14:34:14 首次发布

本文链接：https://blog.youkuaiyun.com/m0_46533814/article/details/122858848

版权

vue 专栏收录该内容

10 篇文章

订阅专栏

文章目录

Vue指令

Vue指令

指令（Directives）是Vue.js模板中最常用的一种功能，它带有前缀v-，有点类似与thymeleaf中的语法，在属性之前添加th：，想了解thymeleaf的同学可以看我之前的文章
thymeleaf语法
Vue内置指令：指令可以帮助我们快速完成常见的DOM操作，比如循环渲染、显示与隐藏等
在这里插入图片描述
条件渲染指令：v-if、v-else-if、v-else
vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件。
先看一条简单的指令

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>显示数据</p>
    <!--这里的show就是data中的show-->
    <button v-if="show">显示</button>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            show: true
        }
    })
</script>
</body>
</html>

当数据show的值为true时，button会显示：
在这里插入图片描述
反之则会隐藏button

v-else

v-else要紧跟v-else-if或v-if，表达式的值为真时，当前元素及所有子节点将被渲染，为假时被移除。
下面是一个简单的例子，如果ok为true就显示Yes，反之则为NO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if-else</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            ok: true
        }
    });
</script>
</body>
</html>

v-else-if

v-else-if要紧跟v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if-else</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
	<!--显而易见结局输出一定是C
	js中用的===意为全等于，类型和值都必须相等 
-->
	<h1 v-if="type==='A'">A</h1>
	<h1 v-else-if="type==='B'">B</h1>
	<h1 v-else-if="type==='C'">C</h1>
	<h1 v-else>D</h1>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            type: 'C'
        }
    });
</script>
</body>
</html>

v-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
	<!--v-text = {{}}
	{{}}是vue中的插值语法，使用双大括号(Mustache语法)“{{}}”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来
	-->
    <p v-text="person"></p>
    <p>{{person}}</p>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            person: '张三'
        }
    })
</script>
</body>
</html>

v-bind

v-bind的基本用途是动态更新HTML元素上的属性，比如id、class、style等，之所以将这两个指令放在一起，是因为语法糖。

语法糖

语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。
Vue.js的v-bind和v-on指令都提供了语法糖，也可以说是缩写
v-bind可以省略v-bind，用“：”冒号代替
v-on可以使用“@”符号代替

v-on

用法：绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <a v-bind:href="url">链接</a>
    <img v-bind:src="imgUrl">
	<!--因为v-on是绑定函数指令，所以
	当点击button时会执行methods中的handleClose，
	handleClose只调用了close函数，close函数改变了
	show的值为false，v-if接收到show的值为false，即隐藏此button-->
    <button v-if="show" v-on:click="handleClose">点击隐藏</button>
    <!--语法糖-->
    <a :href="url">链接</a>
    <img :src="imgUrl">
    <button v-if="show" @click="handleClose">点击隐藏</button>
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            url: 'http://www.baidu.com',
            imgUrl: 'img/1.png',
            show: true
        },
        methods: {
            handleClose: function (){
            //this指代app对象，调用了下面的close函数，close函数改变了data中的show属性，
                this.close();
            },
            close: function (){
                this.show = false;
            }
        }
    })
</script>
</body>
</html>

测试：可以看到不管是原生的指令写法还是使用了语法糖，效果是一样的，因此要牢记语法糖，便于快速开发程序
在这里插入图片描述
事件修饰符：

<!--这里不用stop会调用两次show方法-->
<div @click="show(1)">
    <button @click.stop="show(2)">
        点击
    </button>
     <!--once只调用一次-->
    <button v-on:click.once="info(2)">点击</button>
    <!--prevent阻止默认事件-->
    <a href="https://www.baidu.com" v-on:click.prevent="info(2)">不去百度</a>

</div>