Vue基础-Vue指令与原生JS

最新推荐文章于 2024-04-26 23:24:15 发布

王赤脚

最新推荐文章于 2024-04-26 23:24:15 发布

阅读量478

点赞数 11

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_45992725/article/details/135706975

版权

本文详细介绍了Vue中的基础指令，如文本渲染(v-text)、HTML内容渲染(v-html)，以及条件渲染(v-show,v-if)和v-else/v-else-if的用法。还涵盖了事件绑定(v-on)和属性绑定(v-bind)的概念，以及列表渲染(v-for)的应用。通过实例对比，展示了Vue与原生JS在DOM操作上的区别。

摘要由CSDN通过智能技术生成

Vue基础复习

vue中常用的指令

内容渲染指令

v-text：渲染dom元素中的文本内容

原生JS中的innerText

v-html：渲染文本内容外还可以渲染标签样式

原生JS中的innerHTML

条件渲染指令

v-show：控制元素的显示和隐藏

语法：v-show = “表达式”，值为true显示，值为false隐藏

原理：通过控制display的值来显示和隐藏，元素节点一直存在

// 显示
<div id="myElement" v-show="true">Hello, World!</div>
// 隐藏
<div id="myElement" v-show="false">Hello, World!</div>

原生JS中的有两种方式来实现：

使用css的display属性来实现

<div id="myElement" style="display: none;">Hello, World!</div>
<script>
  // 通过获取元素并设置其样式来显示或隐藏
  var myElement = document.getElementById("myElement");
  // 显示元素
  myElement.style.display = "block";
  // 隐藏元素
  myElement.style.display = "none";
</script>

使用clssList添加或移除类

<style>
  .hidden {
    display: none;
  }
</style>
<div id="myElement">Hello, World!</div>
<script>
  // 获取元素
  var myElement = document.getElementById("myElement");
  // 隐藏元素
  myElement.classList.add("hidden");
  // 显示元素
  myElement.classList.remove("hidden");
</script>

v-if：控制元素的显示和隐藏（条件渲染）

语法：v-if = “表达式”，值为true显示，值为false隐藏

原理：基于条件判断，是否创建或者移除元素节点

// 显示
<div id="myElement" v-if="true">Hello, World!</div>
// 隐藏
<div id="myElement" v-if="false">Hello, World!</div>

v-if 和 v-show 的区别：

v-if：要么显示，要么不显示，显示就一直存在于页面中，不显示同理

v-show：需要频繁切换显示隐藏的场景

v-else 和 v-else-if：辅助 v-if 进行判断渲染，需要紧接着 v-if 使用

  <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>

事件绑定指令

v-on：可以为dom注册事件，例如点击事件，有三种写法

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

v-on 可以简写成@，例如注册一个点击事件

<button @click="count--">-</button>

原生JS绑定点击事件

<button id="myButton">点击我</button>
<script>
  // 获取按钮元素
  var myButton = document.getElementById("myButton");
  // 添加点击事件处理程序
  myButton.addEventListener("click", function() {
    alert("按钮被点击了！");
    // 在这里可以添加更多的逻辑
  });
</script>

事件处理函数

上面 v-on 的示例用的是内联语句的写法，这是只有简单需求时，如果需求比较复杂就要通过函数来处理，这时就需要事件处理函数，它应该写到一个跟data同级的配置项（methods）中，注意methods中的函数内部的this都指向Vue实例

<button id="myButton" @click="fn">点击我</button>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
  el: '#myButton',
  data: {},
  methods: {
      fn(){
          alert("按钮被点击了！")
      }
  }
})
</script>

上面是直接使用事件处理函数，同样的也可以给事件处理函数传递参数

<button id="myButton" @click="fn(10)">点击我</button>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
  el: '#myButton',
  data: {
      a: 100,
  },
  methods: {
      fn(b){
          alert(this.a - b)
      }
  }
})
</script>

下面通过一个小例子，来看一下Vuejs和原生JS的区别

Vuejs实现一个简单的贩卖机

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div class="box">
      <h3>自动贩卖机</h3>
      <button @click="buy(19)">黄鹤楼19元</button>
      <button @click="buy(16)">蓝利群16元</button>
      <button @click="buy(16)">好猫16元</button>
    </div>
    <p>余额：{{ money }}元</p>
  </div>


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

</html>

原生JS实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button data-id="19">黄鹤楼19</button>
  <button data-id="16">利群16</button>
  <button data-id="16">好猫16</button>
  <p>余额：100元</p>

  <script>
    let money = 100;

document.querySelectorAll('button').forEach(function(button) {
  button.addEventListener('click', function(e) {
    const price = parseInt(e.target.dataset.id, 10);
    money -= price;
    document.querySelector('p').innerHTML = `余额：${money}元`
  });
});
  </script>
</body>
</html>

这样一对比，Vuejs和原生JS的差别就出来了

属性绑定指令

v-bind：动态设置html的标签属性，比如：src，url，title

语法：v-bind:属性名 = “表达式”

完整写法
<img v-bind:src="url" />
简写
<img :src="url" />

列表渲染指令

v-for：用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组

此语法也可以遍历对象和数字

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始