Vue2从基础到实战（指令篇）

元气满满的热码式

已于 2024-07-28 13:25:37 修改

阅读量281

点赞数 6

文章标签： vue.js javascript 前端

于 2024-07-28 13:07:04 首次发布

本文链接：https://blog.csdn.net/m0_66011019/article/details/140749178

版权

Vue中的常用指令

概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的特殊标签属性。

vue 中的指令按照不同的用途可以分为如下 6 大类：

内容渲染指令（v-html、v-text）
条件渲染指令（v-show、v-if、v-else、v-else-if）
事件绑定指令（v-on）
属性绑定指令（v-bind）
双向绑定指令（v-model）
列表渲染指令（v-for）

v-else 和 v-else-if

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

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 示例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            margin: 10px 0;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <P v-if="gender === 1">性别：男</P>
        <p v-else>性别:女</p>
        <hr>
        <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
        <p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p>
        <p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
        <p v-else>成绩评定D：奖励一周不玩手机</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                gender: 1,
                score: 80
            }
             
        });
    </script>
</body>
</html>

v-on

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

<button v-on:事件名="内联语句">按钮</button>
<button v-on:事件名="处理函数">按钮</button>
<button v-on:事件名="处理函数(实参)">按钮</button>
v-on: 简写为 @

内联语句

<body>
    <div id="app">
        <button @click="count--">-</button>
        <span>{{ count }}</span>
        <button v-on:click="count++">+</button>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script>
        const app = new Vue({
          el: '#app',
          data: {
            count: 100
          }
        })
    </script>

事件处理函数

注意：

事件处理函数应该写到一个跟data同级的配置项（methods）中
methods中的函数内部的this都指向Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 示例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            margin: 10px 0;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="toggleShow">切换显示隐藏</button>
        <h1 v-show="isShow">杜小帅</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
          el: '#app',
          data: {
            isShow: true
          },
          methods: {
            toggleShow() {
              this.isShow = !this.isShow;
            }
          }
        })
    </script>
</body>
</html>

在 Vue 实例的 methods 选项中添加了 toggleShow 方法，用于切换 isShow 的值。

给事件处理函数传参

如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象

如果传递了参数，则实参 $event 表示事件对象，固定用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 示例</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>

 <div id="app">
    <div class="box">
      <h3>小黑自动售货机</h3>
      <button v-on:click="buy(5)">可乐5元</button>
      <button v-on:click="buy(10)">咖啡10元</button>
      <button v-on: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>

v-bind

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

<body>
    <div id="app">
        <div class="box">
            <img v-bind:src="imgUrl" alt="">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                imgUrl: './imgs/1.png' // 假设图片在 imgs 文件夹中
            }
        })
    </script>
</body>
</html>

元气满满的热码式

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue2从基础到实战（指令篇）

指令（Directives）是 Vue 提供的带有的特殊标签。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令（v-bind）双向绑定指令（v-model）列表渲染指令（v-for）
复制链接

扫一扫