全栈之路Vue.js系列（二）之Vue.js指令-CSDN博客

本文链接：https://blog.csdn.net/QStack/article/details/109369521

前言

在上一篇文章我们大致介绍了以下Vue.js的基本情况，其中我们简单介绍了一些Vue.js的指令，而这些指令是Vue.js的基础，今天我们就来详细了解一下Vue.js的指令。

v-once

我们之前说过Vue支持双向绑定，当我们更改数据时视图也会发生变化，v-once是用于一次性绑定，当数据第一绑定之后再更改数据视图不会变化。代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-once>{{message}}</span>
</div>
</body>
<script>
    const app = new Vue({
        el : "#app",
        data : {
           message : "从此无心爱良夜，任他明月下西樓"
        }
    });
</script>
</html>

这时打开控制台更改message数据时视图不会发生变化。

v-html

v-html是用来插入html片段，代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-html="message"></span>
</div>
</body>
<script>
    const app = new Vue({
        el : "#app",
        data : {
           message : "<h6>长恨人心不如水，等闲平地起波澜</h6>"
        }
    });
</script>
</html>

v-bind

我们可以通过v-bind绑定html的属性。代码如下通过v-bind绑定href属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <a v-bind:href="url">百度</a>
</div>
</body>
<script>
    const app = new Vue({
        el : "#app",
        data : {
           url : "http://www.baidu.com"
        }
    });
</script>
</html>

v-bind可以简写为:,效果是一样的。 <a v-bind:href="url">百度</a>可以简写为 <a :href="url">百度</a>

动态绑定class

我们可以通过v-bind动态绑定class，代码如下，当isActive为true时使用就active。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Title</title>
    <style>
        .active{
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
   <p v-bind:class="{active: isActive}">纵豆蔻词工，青楼梦好，难赋深情</p>
</div>
</body>
<script>
    const app = new Vue({
        el : "#app",
        data : {
           isActive: true
        }
    });
</script>
</html>

动态绑定style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
   <p v-bind:style="objectStyle">一场寂寞凭谁诉，算前言，总轻负</p>
</div>
</body>
<script>
    const app = new Vue({
        el : "#app",
        data : {
           objectStyle :{
               fontSize: '20px',
                color: 'red',
           }
        }
    });
</script>
</html>

v-if ,v-else,v-else-if

我们可以用这三个指令进行有条件的渲染。代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
  <div v-if="poet === '柳永'">衣带渐宽终不悔，为伊消得人憔悴</div>
    <div v-else-if="poet === '司马光'">相见争如不见，多情何似无情</div>
    <div v-else> 似此星辰非昨夜，为谁风露立中宵</div>
</div>
</body>
<script>
    const app = new Vue({
        el : "#app",
        data : {
           poet: "tiger"
        }
    });
</script>
</html>

v-show

v-show与v-if类似，都是控制控件显示与否，用法也类似，不同的是v-if的渲染时惰性的，当条件为false时，控件根本不会渲染，而v-show条件为false还是会渲染只是没有显示出来，如果需要频繁切换，推荐使用v-show。

v-for

我们可以用v-for来渲染一个列表，就像其他语言中的for循环。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
  <ol>
      <li v-for="poet in poets" :key="poet.name">{{poet.name}}</li>
  </ol>
</div>
</body>
<script>
    const app = new Vue({
        el : "#app",
        data : {
           poets: [
               {name: "王勃"},
               {name: "骆宾王"},
               {name: "杨炯"}
           ]
        }
    });
</script>
</html>

使用V-for遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-for="item in poem">{{item}}</p>
</div>
</body>
<script>
    const app = new Vue({
        el : "#app",
        data : {
           poem: {
               title: "题龙阳县青草湖",
               author: "唐珙",
               content: "西风吹老洞庭波，一夜湘君白发多。醉后不知天在水，满船清梦压清河"
           }
        }
    });
</script>
</html>

v-on

我们可以使用v-on来进行监听，响应的函数写在vue的methods中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
   <button v-on:click="say('李商隐')">李商隐</button>
    <button v-on:click="say('晏几道')">晏几道</button>
</div>
</body>
<script>
    const app = new Vue({
        el : "#app",
        methods: {
            say: function (poet) {
                if(poet === "李商隐") {
                    alert("直道相思了无益，未妨惆怅是轻狂")
                } else if(poet === "晏几道") {
                    alert("从别后，忆相逢，几回魂梦与君同")
                } else{
                    alert("输入错误")
                }
            }
        }
    });
</script>
</html>

v-model

你可以用 v-model 指令在表单 <input>、<textarea>及<select>元素上创建双向数据绑定。

文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
</div>
</body>
<script>
    const app = new Vue({
        el : "#app",
        data : {
            message: ""
        }
    });
</script>
</html>

复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>杜牧</option>
            <option>李商隐</option>
            <option>韦庄</option>
        </select>
        <span>Selected: {{ selected }}</span>
</div>
</body>
<script>
    const app = new Vue({
        el : "#app",
        data : {
           selected: ""
        }
    });
</script>
</html>