Vue基础-Vue指令与原生JS

发布时间:2024年01月20日

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中的有两种方式来实现:

  1. 使用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>
  1. 使用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 开始
文章来源:https://blog.csdn.net/weixin_45992725/article/details/135706975
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。