【vue2基础教程】vue指令

文章目录

前言
一、内容渲染指令
- [1.1 v-text](#1.1 v-text)
- [1.2 v-html](#1.2 v-html)
- [1.3 v-show](#1.3 v-show)
- [1.4 v-if](#1.4 v-if)
- [1.5 v-else 与 v-else-if](#1.5 v-else 与 v-else-if)
二、事件绑定指令
三、属性绑定指令
总结

前言

Vue.js 是一款流行的 JavaScript 框架，广泛应用于构建交互性强、响应速度快的现代 Web 应用程序。Vue 指令是 Vue.js 中的一项重要特性，它们允许开发者将特定的行为应用到 HTML 元素上，从而使得 DOM 操作更加便捷和灵活。在本篇文章中，我们将介绍 Vue 指令的基础知识，帮助读者快速入门 Vue.js 开发。

一、内容渲染指令

内容渲染指令有两种：v-text和v-html

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容

1.1 v-text

v-text（类似innerText）
- 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中
- 类似 innerText，使用该语法，会覆盖 p 标签原有内容

c 复制代码

<template>
  <div class="hello">
    <p v-text="uname">Hello</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      count: 0,
      uname:"张三"
    };
  },
}

1.2 v-html

v-html（类似 innerHTML）
- 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
- 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
- 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-html Example</title>
  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

<div id="app">
  <!-- 使用 v-html 指令将 message 的值作为 HTML 渲染 -->
  <div v-html="message"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    // 假设 message 中包含一些 HTML 标记
    message: '<h1>Hello, <span style="color: red;">Vue.js</span>!</h1>'
  }
})
</script>

</body>
</html>

1.3 v-show

v-show

作用：控制元素显示隐藏
语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
原理：切换 display:none 控制显示隐藏
场景：频繁切换显示隐藏的场景

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-show Example</title>
  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

<div id="app">
  <!-- 使用 v-show 指令根据 isDisplayed 的值来显示或隐藏元素 -->
  <p v-show="isDisplayed">This paragraph is shown using v-show.</p>
  <p v-show="!isDisplayed">This paragraph is hidden using v-show.</p>

  <!-- 使用按钮切换 isDisplayed 的值 -->
  <button @click="toggleDisplay">Toggle Display</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    // 控制显示和隐藏的变量
    isDisplayed: true
  },
  methods: {
    // 切换 isDisplayed 的值
    toggleDisplay: function() {
      this.isDisplayed = !this.isDisplayed;
    }
  }
})
</script>

</body>
</html>

1.4 v-if

v-if

作用：控制元素显示隐藏（条件渲染）
语法： v-if= "表达式" 表达式值 true显示， false 隐藏
原理：基于条件判断，是否创建或移除元素节点
场景：要么显示，要么隐藏，不频繁切换的场景

html 复制代码

<div v-if="flag" class="box">我是v-if控制的盒子</div>

1.5 v-else 与 v-else-if

v-else 和 v-else-if

作用：辅助v-if进行判断渲染
语法：v-else v-else-if="表达式"
需要紧接着v-if使用

二、事件绑定指令

我们可以使用v-事件进行绑定事件

或者我们可以简写成@事件=xxx

我们既可以写成内联语句，也可以在下面这个图片加上method:{}

，里面写上我们的函数

我们可以进行参数的传递，可以像函数调用一个写小括号，如果没有参数则不需要写任何参数。

html 复制代码

<!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>Document</title>
  <style>
    .box {
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 200px;
    }
    h3 {
      margin: 10px 0 20px 0;
    }
    p {
      margin: 20px;
    }
  </style>
</head>
<body>

  <div id="app">
    <div class="box">
      <h3>小黑自动售货机</h3>
      <button @click="buy(5)">可乐5元</button>
      <button @click="buy(10)">咖啡10元</button>
      <button @click="buy(8)">牛奶8元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        money: 100
      },
      methods: {
        buy (price) {
          this.money -= price
        }
      }
    })
  </script>
</body>
</html>

三、属性绑定指令

作用：\动态设置html的标签属性比如：src、url、title
语法：**v-bind:**属性名="表达式"
v-bind:\可以简写成 => ** : **

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

<img v-bind:src="url" />
<img :src="url" /> （v-bind可以省略）

总结

本文介绍了 Vue.js 中的指令，它们是 Vue.js 框架中的重要特性之一。通过指令，我们可以直接操作 DOM，实现数据的双向绑定、条件渲染、循环渲染等功能，极大地提高了开发效率。在 Vue.js 中，指令以 v- 开头，后跟指令名称，如 v-model、v-if、v-for 等。每个指令都有特定的功能和用法，开发者可以根据需求灵活运用。通过学习和掌握 Vue 指令，可以更加高效地构建 Vue.js 应用程序，提升开发体验和用户体验。

在你开始学习和应用 Vue.js 中的指令时，建议先理解指令的基本概念和常用指令的用法，然后通过实践来加深理解。随着对 Vue.js 的熟练程度提升，你会发现指令的强大之处，并能够运用它们解决更复杂的业务需求。希望本文能够对你学习 Vue.js 提供帮助，祝愿你在 Vue.js 的学习和应用过程中取得成功！