【Vue】事件绑定和计算属性

Jerry_ww

于 2024-03-28 21:40:54 发布

阅读量519

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Jerryqjr/article/details/137118833

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Event-binding

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script src="app.js" defer></script>
  </head>

  <body>
    <header>
      <h1>Vue Events</h1>
    </header>
    <section id="events">
      <h2>Events in Action</h2>
      <button @click="addCounter(10)">Add 10</button>
      <button @click.right="reduceCounter(5)">Reduce 5</button>
      <p v-once>Starting Counter: {{ counter }}</p>
      <p>Result: {{ counter }}</p>
      <input
        type="text"
        @:input="setName($event, 'Qiu')"
        @:keyup.enter="confirmInput"
      />
      <p>Your Name: {{ confirmedName }}</p>
      <hr />
      <form @:submit.prevent="submitForm">
        <input type="text" />
        <button>Sign Up</button>
      </form>
    </section>
  </body>
</html>

JS

const app = Vue.createApp({
  data() {
    return {
      counter: 10,
      userName: "",
      confirmedName: "",
    }
  },
  methods: {
    addCounter(num) {
      this.counter += num
    },
    reduceCounter(num) {
      this.counter >= 1 ? (this.counter -= num) : 0
    },
    setName(event, lastName) {
      this.userName = `${event.target.value}${lastName}`
    },
    submitForm() {
      // event.preventDefault();
      alert("Submitted!")
    },
    confirmInput() {
      this.confirmedName = this.userName
    },
  },
})

app.mount("#events")

效果

展示效果
two way binding:v-model==v-bind:value v-on:input

计算属性

之前学了data binding和event binding。
methods并不是有关动态值计算的最佳方法,每当页面上的任何内容被改动时,因为vue并不知道methods是否需要渲染,也许methods包含改动的内容,所以任何非事件绑定方法都会被vue重新执行,因此引入第三个功能:计算属性(computed properties)。

计算属性原理类似于methods,但是vue能够知道他们的依赖关系

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js" defer></script>
    <script src="app.js" defer></script>
  </head>

  <body>
    <header>
      <h1>Vue Events</h1>
    </header>
    <section id="events">
      <h2>Events in Action</h2>
      <button v-on:click="add(10)">Add 10</button>
      <button v-on:click="reduce(5)">Subtract 5</button>
      <p>Result: {{ counter }}</p>
      <input type="text" v-model="name" />
      <button @click="ResetInput">Reset Input</button>
      <p>Your Name: {{ fullname }}</p>
    </section>
  </body>
</html>

const app = Vue.createApp({
  data() {
    return {
      counter: 0,
      name: "",
      fullname: "",
    }
  },
  watch: {
    counter(value) {
      if (value > 50) {
        this.counter = 0
      }
    },
    name(value) {
      if (value === "") {
        return (this.fullname = "")
      } else {
        this.fullname = value + " " + "Qiu"
      }
    },
  },
  computed: {
    fullnameFunction() {
      console.log("Running again...")
      if (this.name === "") return ""
      return this.name + " " + "Jerry"
    },
  },
  methods: {
    setName(event, lastName) {
      this.name = event.target.value + " " + lastName
    },
    add(num) {
      this.counter = this.counter + num
    },
    reduce(num) {
      this.counter = this.counter - num
      // this.counter--;
    },
    resetInput() {
      this.name = ""
    },
  },
})

app.mount("#events")