Vue基础系列——Vue中的指令(上)

Posted houjiao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue基础系列——Vue中的指令(上)相关的知识,希望对你有一定的参考价值。


 

写在前面的话:


文章是个人学习过程中的总结,为方便以后回头在学习。


文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流。

 


 

VUE基础系列目录

《VUE基础系列(一)——VUE入坑第一篇》

《VUE基础系列(二)——VUE中的methods属性》

《VUE基础系列(三)——VUE模板中的数据绑定语法》

《VUE基础系列(四)——VUE中的指令(上)》

 


 

一.前言

vue中的指令是指以“v-”开头的一个语法,它主要是将vue中data数据和数据的变化作用到DOM元素中。

二.指令的基本语法

<tag v-指令ID="单个的javascript表达式">

</tag

三.v-html

  v-html指令在《VUE基础系列(三)——VUE模板中的数据绑定语法》中有使用过,但是是以模板数据绑定的使用总结的,而实际上v-html被称为vue中的指令,它的作用我们之前也总结过:v-html会将数据中的html片段解析成DOM节点插入到元素子节点中。

  在这里我们写一个跟以前不一样的示例,学习一下v-html的另外一个特性:v-html指令会以innerHTML的方式更新元素的内容

#示例

<!DOCTYPE html>
<html>
<head>
  <title>vue中的指令(上)</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css">
    .content{
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id=‘box‘>
    <div class="content" v-html=‘msg‘>
      <h1>这是一段测试文本</h1>
    </div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: #box,
      data: {
        msg: <h1>我也是一段测试文本,我可能会覆盖div.content中的节点内容</h1>,
      }
    });
  </script>
</body>
</html>

 

 

#结果

技术图片

 

#总结

  • v-html会将数据中的html片段解析成DOM节点插入到元素子节点中。
  • v-html指令会以innerHTML的方式更新元素的内容(即如果v-html指令所在的DOM元素存在子节点,那子节点就会被指令绑定的数据所覆盖)。

四.v-text

  v-text指令会将数据数据解析成文本在更新到元素中,并且是以innerText的方式更新的。

#示例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <title>vue中的指令(上)</title>
 5   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 6   <style type="text/css">
 7     .content{
 8       font-size: 16px;
 9     }
10 
11   </style>
12 </head>
13 <body>
14   <div id=‘box‘>
15     <div class="content" v-text=‘msg‘>
16       <h1>这是一段测试文本</h1>
17     </div>
18   </div>
19   <script type="text/javascript">
20     var vm = new Vue({
21       el: #box,
22       data: {
23         msg: <h1>我也是一段测试文本,我可能会覆盖div.content中的节点内容</h1>,
24       }
25     });
26   </script>
27 </body>
28 </html>

 

#结果

技术图片

 

 

#总结

  • v-text会将数据中的html片段以文本的形式插入到元素子节点中(不解析html片段,将html片段以字符串的形式原封不动的显示在模板中)。
  • v-text指令会以innerText的方式更新元素的内容(即如果v-text指令所在的DOM元素存在子节点,那子节点就会被指令绑定的数据所覆盖

五.v-bind

v-bind这个指令我们在《VUE基础系列(三)——VUE模板中的数据绑定语法》中也有过总结:v-bind可以将数据绑定到元素的属性上,在这里我们不在演示这个特性。

在浏览vue官方文档时,可以看到v-bind指令对元素的class属性和style属性有一些增强的特性(官网链接传送门 biubiubiu !!!)。

1.v-bind绑定元素的class属性

  v-bind:class可指定javascript表达式有两种数据类型:对象类型和数组类型。下面我们写一个示例,分别看一下这两个数据类型的用法和效果。

#对象类型

<!DOCTYPE html>
<html>
<head>
  <title>vue中的指令(上)</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css">
    .red{
      color: red;
    }
    .green{
      color: green;
    }
  </style>
</head>
<body>
  <div id=‘box‘>
    <!-- 给v-bind:class指定对象类型的javascript表达式-->
    <h1 v-bind:class=‘{red: redActive}‘>这是一段测试文本</h1>
    <h1 v-bind:class=‘{green: greenActive}‘>这也是一段测试文本</h1>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: #box,
      data: {
        redActive: false,
        greenActive :true
      }
    });
  </script>
</body>
</html>

技术图片

 

   从上面的代码示例中可以看出,当v-bind绑定的对象的键值为true时,键会作为字符串添加到元素的类名中,相应的css规则就会生效

  同时对象类型的javascript表达式支持多个键值对。

<!DOCTYPE html>
<html>
<head>
  <title>vue中的指令(上)</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css">
    .red{
      color: red;
    }
    .green{
      color: green;
    }
    .small{
      font-size: 20px;
    }
  </style>
</head>
<body>
  <!-- v-bind:class -->
  <div id=‘box‘>
    <h1 v-bind:class=‘{red: redActive }‘>这是一段测试文本</h1>
    <!-- 对象类型的javascript表达式支持多个键值对,只要满足值为true,对应的键都会以字符串的形式添加到class类名中 -->
    <h1 v-bind:class=‘{green: blackActive, small: smallActive}‘>这也是一段测试文本</h1>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: #box,
      data: {
        redActive: false,
        blackActive :true,
        smallActive :true,
      }
    });
  </script>
</body>
</html>

 

技术图片

 

   可以看到,多个键值对时,只有对应键的值为true,元素就会存在多个类名。

#数组类型

  接下来我们写一个数组类型的javascript表达式

<!DOCTYPE html>
<html>
<head>
    <title>vue中的指令(上)</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        .red{
            color: red;
        }
        .small{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id=‘box‘>
        <h1 v-bind:class=‘[redActive,smallActive]‘>这是一段测试文本</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: #box,
            data: {
                redActive: red,
                smallActive :small,
            }
        });
    </script>
</body>
</html>

 

技术图片

 

 

  可以看到数组表达式的语法和对象表达式的语法是完全不一样的,是直接将数组的值作为元素的类名。

2.v-bind绑定元素的style属性

   v-bind绑定数据到style属性,同样可以指定数组类型和对象类型的javascript表达式。

#对象类型

为style绑定的对象类型的基本语法如下:

<tag v-bind:style="{ css属性:vue中的数据或者css属性值  }"> </tag>

或者

<tag v-bind:style="vue中的某个对象类型数据"> </tag>

css的属性值可以直接是css的属性值,也可以是vue中的data数据,或者直接使用vue中的某个对象数据。

注意:这里需要注意的是当css属性是类似于font-size这样中间带横线的属性,有两种方式书写,一种是驼峰命名方式fontSize,一种是使用单引号括起来‘font-size‘。

 

我们先写一个例子

<!DOCTYPE html>
<html>
<head>
    <title>vue中的指令(上)</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        .red{
            color: red;
        }
        .small{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id=‘box‘>
        <!-- css的属性值可以直接是css的属性值,也可以是vue中的data数据 -->
        <h1 v-bind:style="{color: ‘red‘,fontSize: fontSize}">这是一段测试文本</h1>

        <!-- 直接使用vue中某个对象类型的数据 -->
        <h1 v-bind:style="styleObj">这是一段测试文本</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: #box,
            data: {
                fontSize: 20px,
          // styleObj 对象类型的数据 styleObj: { color:
green, fontSize: 30px } } }); </script> </body> </html>

 

技术图片

 

   这个结果也是显而易见,我们也就不多说了。

#数组类型

  数组类型的javascript表达式可以是单个或者多个的vue对象数据。

 

<!DOCTYPE html>
<html>
<head>
    <title>vue中的指令(上)</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css">
        .red{
            color: red;
        }
        .small{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id=‘box‘>
        <!-- v-bind:style绑定数组类型的javascript表达式,其中styleObject和borderStyle均为对象类型的数据-->
        <h1 v-bind:style="[styleObj, borderStyle]">这是一段测试文本</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: #box,
            data: {
                fontSize: 20px,
                styleObj: {
                    color: green,
                    fontSize: 30px
                },
                borderStyle: {
                    border: 1px solid
                }
            }
        });
    </script>
</body>
</html>

 

技术图片

 

 

  可以看到,多个对象的数据以内联样式成功的作用到了元素上。

七.总结

1.v-html指令

  • v-html会将数据中的html片段解析成DOM节点插入到元素子节点中。
  • v-html指令会以innerHTML的方式更新元素的内容(即如果v-html指令所在的DOM元素存在子节点,那子节点就会被指令绑定的数据所覆盖)。

2.v-text指令

  • v-text会将数据中的html片段以文本的形式插入到元素子节点中。
  • v-text指令会以innerText的方式更新元素的内容(即如果v-text指令所在的DOM元素存在子节点,那子节点就会被指令绑定的数据所覆盖)。

3.v-bind指令

v-bind可以将数据绑定到元素的属性上

v-bind绑定元素的class属性

  • 可指定的javascript表达式有两种数据类型:对象和数组。
  • 对象:对象的键值为true时,键会作为字符串添加到元素的类名。
  • 数组:直接将数组的值作为元素的类名。

v-bind绑定元素的style属性

  • 可指定的javascript表达式有两种数据类型:对象和数组。
  • 对象:可指定的对象值有三种,css的属性值,vue中的data数据,vue中的某个对象数据。
  • 数组:数组元素为单个或者多个的vue对象数据

 

要加油鸭

 


以上是关于Vue基础系列——Vue中的指令(上)的主要内容,如果未能解决你的问题,请参考以下文章

Vue基础系列Vue模板语法-插值语法-指令语法

Vue基础系列(十六)自定义指令-生命周期详解-更新流程

vue3.2 基础及常用方法

Vue学习系列——基本指令

Vue_(基础)Vue中的指令

Vue基础系列(十五)vue指令的使用-v-text,v-html,v-cloak,v-once详解