（9）vue.js 指令（1）

泽哥ins

已于 2022-01-31 10:00:12 修改

阅读量329

点赞数 1

分类专栏： Vue 文章标签： vue.js

于 2022-01-25 23:56:29 首次发布

本文链接：https://blog.csdn.net/qq_36213140/article/details/122694069

版权

Vue 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

一、vue.js指令介绍

指令的本质就是 HTML 自定义属性，Vue.js 的指令就是以 v- 开头的自定义属性。我们HTML元素非为固有属性和自定义属性，固有属性就是自己元素本身就有的，比如id,title等等。自定义属性是为了我们去识别框架，所以我们的vue.js的指令就是通过v-开头进行自定义的，所以将来我们再HTML元素的中看到v-开头的属性都是vue.js的自定义属性。

二、内容处理指令v-once

• v-once指令使元素内部的插值表达式只生效一次。

<body>
  <div id="app">
    <p>此内容会随数据变化自动更改:{{ content }}</p>
    <p v-once>此内容不会随数据变化自动更改:{{ content }}</p>
  </div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        content: '内容文本'
      }
    })
  </script>
</body>

三、内容处理指令v-text

• v-text元素内容整体替换为指定纯文本数据。

将来我们再对data选项中的属性重新赋值后，加了v-text指令的元素也会进行数据驱动视图效果。

我们可以通过v-text指令直接书写值，但是这样写并没有什么意义，因为我们要动态再逻辑层进行修改设置。

我们通过示例发现，v-text指令展示的是我们整个的书写的内容，并不是获取到的标签内部的内容，而是连带标签一起读取的，把标签当成了普通文本。

四、内容处理指令v-html

• 元素内容整体替换为指定的 HTML 文本。该指令也可以实现替换HTML元素内部的文本内容。

v-html和v-text的区别如下图演示，刚刚我们上边讲解的v-text指令它是把属性值当作纯文本进行展示，包括标签名。而接下来我们演示的这个v-html指令是不包括标签名的，并且能够生成这样一个HTML的元素。

五、属性绑定指令v-bind

• v-bind 指令用于动态绑定 HTML 属性。

• Vue.js 还为 v-bind 指令提供了简写方式。通过一个冒号就可以啦！

• 如果需要一次绑定多个属性，还可以绑定对象。

• 与插值表达式类似，v-bind 中也允许使用表达式。

• 与插值表达式一样，不可以直接书写js脚本代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>12.v-bind</title>
</head>
<body>
  <div id="app">
    <p v-bind:title='myTitle'>标签内容</p>
    <p :title='myTitle'>标签内容</p>
    <p :class='attrObj'></p>
    <p :class='"demo" + 3 '></p>
    <p :class='prefix + num '></p>
    <p :class='var a = 0'></p>
  </div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        myTitle: '这是title属性内容',
        attrObj: {
          id: 'p1',
          class: 'clearFix',
          title: '这是p元素',
          'data-title': '这是data-title的内容'
        },
        prefix: 'demo',
        num: 10
      }
    })
  </script>
</body>
</html>

六、属性绑定—class绑定

• class 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与class 属性共存。

如下演示是错误写法，我们通过v-bind绑定的class属性不可以直接使用空格书写多个类名

我们可以通过再data选项中定义的属性使用空格当成字符串的方式定义多个类名，但是将来我们修改的时候很不灵活。所以我们再日常开发的时候不会使用该方法进行书写。

通过三元运算符方式选择类名

通过对象的方式，通过直接赋予结果方式，指定类名为boolean类型

通过对象的方式，通过data选项指定类名为boolean类型

通过数组的方式

<body>
  <div id="app">
    <!-- 普通class和绑定的class可以同时定义 -->
    <!-- <p v-bind:class="cls1"></p> -->
    <!-- <p class="a" :class="cls1"></p> -->

    <!-- 如下是错误写法，绑定的class不可以使用空格书写定义多个类名 -->
    <!-- <p class="a" :class="b c d"></p> -->

    <!-- 可以通过再data选项中定义一个多个属性值空格分隔的属性。不灵活 -->
    <!-- <p class="a" :class="cls"></p> -->

    <!-- 三元运算符 -->
    <!-- <p :class="bool?cls1:cls2"></p> -->

    <!-- 通过对象的方式，通过直接赋予结果方式，指定类名为boolean类型 -->
    <!-- <p :class="{x:true, y:false, z:true}"></p> -->

    <!-- 通过对象的方式，通过data选项指定类名为boolean类型 -->
    <!-- <p :class='{x:isX, y:isY, z:isZ}'></p> -->

    <!-- 通过数组的方式 -->
    <p :class="['a',classB,{c: isC}]"></p>
  </div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        classB: 'b',
        isC: true
        // isX: true,
        // isY: false,
        // isZ: true
        // cls:'b c d',
        // cls1: 'x',
        // cls2: 'y',
        // cls3: 'z',
        // bool: true,
      } 
    })
  </script>
</body>

七、属性绑定—style绑定

• style 是 HTML 属性，可以通过 v-bind 进行绑定，并且可以与 style 属性共存。

通过如下示例我们需要注意：我们的css属性值带有px像素单位的，一定要写单位，否则属性就等于没有设置成功，不会生效。

注意：我们如果出现2个单词用连字符连接的，可以使用驼峰命名法，例如background-color属性可以写成：backgroundColor，将c大写即可，也可以将background-color使用引号引起来，就不需要驼峰命名法了，这样也可以，2种方式均可。推荐使用驼峰写法，它是我们的传统写法。

如下是普通style设置样式和绑定style属性设置样式一起书写的示例，通过示例我们需要注意：我们如果再普通的style书写了一个属性，将来我们在绑定的属性中也写了普通style设置的属性，那么后写的会覆盖先写的，新的覆盖旧的，如下图所示，如果绑定的属性中没有设置相同属性，那就以普通style中的属性效果展示。

<body>
  <div id="app">
    <!-- <p v-bind:style='styleObj'></p> -->
    <p style="width: 100px;" :style="styleObj">这是p标签</p>
  </div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        styleObj:{
          width: '200px',
          height: '200px',
          backgroundColor: 'red',
          'font-size': '30px'
        }
      }
    })
  </script>
</body>

我们也可以通过如下这种方式书写，但是这种写法不美观，不容易维护，所以推荐写到data选项中的属性中去。

<p :style="{width: '200px',height: '200px',backgroundColor: 'red'}"></p>

• 当我们希望给元素绑定多个样式对象时，可以设置为数组。

我们通过如下示例可以看到，我们有重复的代码写了2遍，这还算是少的，将来如果我们有5个盒子，10个盒子，甚至更多的盒子都设置同样的宽高度，要设置很多遍，然后我们后期维护的时候，比如公司经理或者老板要求我们更改下宽高度，那么我们还要把所有的盒子都修改一遍，是不是太麻烦了，所以我们可以将公共样式单独写一个对象中，然后不一样的属性呢，我们单独去书写一个对象，然后通过数组的方式，将元素设置多个对象的样式对象。是不是非常nice呢！

通过数组的方式，我们给元素绑定多个样式对象这样是不是好多啦！将来我们老板或者是经理让我们去修改宽高度的公共样式时，我们只需要改一处即可实现多出变化。

修改公共样式方式1：

修改公共样式方式2：

<body>
  <div id="app">
    <p :style='[baseStyle,styleObj1]'>这是p元素</p>
    <p :style='[baseStyle,styleObj2]'>这是p元素</p>
  </div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        baseStyle: {
          width: '100px',
          height: '200px'
        },
        styleObj1: {
          backgroundColor: 'red'
        },
        styleObj2: {
          backgroundColor: 'yellow'
        }
      }
    })
  </script>
</body>