Vue 3 基础: 事件监听

v-on 指令用于添加事件监听器
v-html 解析HTML
v-bind 属性绑定
{{ a_property}} 插值

HTML 中不要放入太多逻辑,否则就是不好的做法。

不带参数的情况下,add可以写成 add(), 也可以写成 add,调用或者指向,Vue 两者语法都接受

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basicstitle>
    <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@next" defer>script>
    <script src="app.js" defer>script>
  head>
  <body>
    <header>
      <h1>Vue Eventsh1>
    header>
    <section id="events">
      <h2>Events in Actionh2>
      <button v-on:click="add(5)">Addbutton>
      <button v-on:click="reduce(10)">Removebutton>
      <p>Result: {{ counter }}p>
      <input type="text" v-on:input="setName($event,'asdf')" />
      <p>Your Name: {{name}}p>
    section>
  body>
html>

input 元素最好的监听事件是 input 事件,此事件为 vanilla JS 事件,使用vue指令v-on指定需要监听的事件, 如果需要额外的参数,第一个参数使用 $event.

const app = Vue.createApp({
  data() {
    return {
      counter: 0,
      name: "",
    };
  },
  methods: {
    add(num) {
      this.counter += num;
    },
    reduce(num) {
      this.counter -= num;
    },
    setName(event, l) {
      this.name=event.target.value + " " + l;
    }
  }
});

app.mount('#events');

你可能感兴趣的:(vue.js)