深入理解Vue2中的核心指令：v-bind,v-on,v-if,v-show,v-for,v-model等-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62981580/article/details/136194823

在 Vue2 中，指令是一种特殊的属性，用于在模板中动态地改变 DOM 元素的行为。Vue2 提供了许多内置指令，使得我们可以更加方便地对 DOM 进行操作。在这篇博客中，我们将深入了解 Vue2 中的一些常用指令。

v-bind 指令：

v-bind指令用于动态地绑定属性值。通过使用v-bind，我们可以将组件中的数据绑定到 DOM 元素的属性上。例如，如果我们有一个名为myData的属性，那么可以使用v-bind指令将其绑定到一个元素的class属性上，如下所示：

v-bind用来响应的更新html属
v-bind:href 可以简写成 :href

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

绑定属性

<!-- target="_blank" 让跳转的窗口新建打开而不是在原页面跳转 -->
<!-- <a v-bind:href="linkAddress" v-text="title" target="_blank"></a> -->
<!-- <a :href="linkAddress" v-text="title" target="_blank"></a> -->
<a :href="isFlag?bd:qq" v-text="isFlag?'百度':'腾讯'" target="_blank"></a>
<a :href="isFlag?bd:qq" v-text="isFlag?'百度':'腾讯'" target="_blank"></a>
<input type="button" @click="updateLink" value="点我会变喔">

const app = new Vue({
        el: '.app',
        data: {
            // linkAddress: 'http://www.baidu.com',
            // title: '百度'
            isFlag: true,
            bd: 'http://www.baidu.com',
            qq: 'http://www.qq.com',
        },
        methods: {
            updateLink() {
                // this.linkAddress = 'http://www.qq.com'
                // this.title = '腾讯'
                this.isFlag = !this.isFlag
            }
        }
    })

绑定对象

切换类名：我们可以给v-bind:class 一个对象，以动态地切换class
注意：v-bind:class指令可以与普通的class特性共存
v-bind 中支持绑定一个对象
如果绑定的是一个对象，则键为对应的类名；值为对应data中的数据

<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
    <li>Vue</li>
    <li>Node</li>
    <li>React</li>
</ul>

绑定数组（class）

v-bind中支持绑定一个数组：数组中classA和classB对应为data中的数据

<ul class="box" :class="[classA, classB]">
    <li>Vue</li>
    <li>Node</li>
    <li>React</li>
</ul>

绑定样式（style）

给style行内添加对象样式

<div :style="styleObj1">绑定样式对象</div>

data:{
    styleObj1:{
        color: 'pink',
        fonstSize: '30px',
        background: 'black'
    }
}

<div :style="{ color: activeColor, fontSize: fontSize, background: 'red' }">内联样式</div>

<!-- 数组语法可以将多个样式对象应用到同一个元素 -->
<div :style="[styleObj1, styleObj2]"></div>

v-on 指令：

v-on指令用于绑定事件监听器。使用v-on指令，我们可以在元素上监听特定的事件，并在事件被触发时执行相应的函数。例如，我们可以使用v-on:click来监听元素的点击事件：

   <button v-on:click="handleClick"></button>


methods: {
       handleClick() {
          console.log(213);
       },
     },

//这里是简写方式

 <button @click="handleClick"></button>

然后，在组件中定义一个名为handleClick的方法来处理点击事件。

v-if 和 v-show 指令：

v-if指令用于根据条件来渲染元素。如果条件为真，则渲染元素；否则，该元素将被隐藏。v-show指令也用于根据条件来显示或隐藏元素，但它只是简单地切换元素的显示状态，而不会添加或删除元素。

   <div v-if="isVisible"></div>
   <div v-show="isVisible"></div>


  data() {
    return {
      isVisible: true,
    };
  },

其中，isVisible是一个布尔类型的属性，用于控制元素的显示。

v-for 指令：

v-for指令用于循环遍历数组或对象，并根据每个元素或属性生成相应的元素。例如，我们可以使用v-for指令来生成一个列表：

   <ul>
       <li v-for="item in items">{{ item }}</li>
   </ul>


  data() {
    return {
      items: "[1,2,3, 4,5,65,6],
    };
  },

其中，items是一个数组，item是数组中的每个元素。

v-model 指令：

v-model指令用于实现双向数据绑定。通过使用v-model，我们可以将表单元素的值与组件中的属性进行双向绑定，当表单元素的值发生变化时，组件中的属性也会相应地更新；反之亦然。

   <input v-model="myValue">
   <span>{{msg}}</span>
    //这样就可以实现vue的双向数据绑定


  data() {
    return {
      msg: "hjhdh",
    };
  },

其中，myValue是一个属性，它的值将与输入框的值保持同步。

1.v-text

更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

不可以解析标签，可以直接放文字 、

  <span v-text='msg'>}</span>

data() {
    return {
      msg: "123",
    };
  },

1、v-html

v-html 指令类似于 v-text 指令;
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
v-html 指令应尽量避免使用，否则会带来危险(XSS攻击跨站脚本攻击),一般只在可信任内容上使用 v-html，永不用在用户提交的内容上;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-html指令</title>
</head>

<body>
    <div id="app">
        <p>{{ msg }}</p>
		<p v-text="msg"></p>
		<p v-html="msg"></p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"<span>html标签在渲染的时候被源码输出</span>"
            }
        })
    </script>
</body>

</html>

1、v-slot

子组件声明<slot></slot>，然后父组件使用子组件时，传入对应的 slot 内容。也就是子组件使用<slot>插槽标签，父组件使用v-slot指令，需要两者结合使用，若父组件没声明v-slot内容，子组件slot对应位置则无内容。
当子组件slot内声明有默认内容时，那父组件不声明v-slot，子组件则会使用默认内容，例如：<slot>默认值</slot>
插槽可以包含任何内容，例如：模板代码、 HTML、组件、普通文本

默认插槽

定义

<template>
  <div class="hello">
    <h3>title</h3>
    <!-- 定义一个插槽，将使用组件标签时传递的内容（innerText/innerHtml）填充到此处 -->
    <slot>默认值，使用组件标签时没有传内容则显示这个</slot>
  </div>
</template>

使用

<template>
  <div class="container">
    <HelloWorld>
      123
    </HelloWorld>
    <HelloWorld>
      <button>456</button>
    </HelloWorld>
    <HelloWorld/>
  </div>
</template>