Vue 3.0教程（for beginner）：基础（下篇）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

鼠标事件

vue3中绑定鼠标事件，默认会传入鼠标事件对象参数，下面例子绑定了三个鼠标事件：

<div id="app">
  <div class="box" @mouseover="handleEvent">mouseover (enter)</div>
  <div class="box" @mouseleave="handleEvent">mouseleave</div>
  <div class="box" @dblclick="handleEvent">dbclick</div>
</div>

const app = Vue.createApp({
  methods: {
    handleEvent(evt) {
      console.log(evt, evt.type)
    },
  },
})

app.mount('#app')

如何在获取MouseEvent对象数据的同时传自定义参数呢？

<div id="app">
  <div class="box" @mouseover="handleEvent('mouseover...')">
    mouseover (enter)
  </div>
  <div class="box" @mousemove="handleMove($event, 'mousemove')">position: {{ x }} - {{ y }}</div>
</div>

我们使用了一个叫$event的变量，这是vue内置的变量，可以直接使用。

const app = Vue.createApp({
  data() {
    return {
      x: 0,
      y: 0,
    }
  },
  methods: {
    handleEvent(type) {
      console.log(type)
    },
    handleMove(evt, type) {
      const { clientX, clientY } = evt
      this.x = clientX
      this.y = clientY
      console.log(type)
    },
  },
})

app.mount('#app')

渲染列表

使用v-for指令渲染一个列表：

<ul>
  <li v-for="book in books">
    <h3>{{ book.title }}</h3>
    <p>{{ book.author }}</p>
  </li>
</ul>

const app = Vue.createApp({
  data() {
    return {
      books: [
        { title: '红楼梦', author: '曹雪芹' },
        { title: '西游记', author: '吴承恩' },
        { title: '水浒传', author: '施耐庵' },
        { title: '三国志', author: '罗贯中' },
      ],
    }
  },
  methods: {},
})

属性绑定

vue中使用v-bind:xxx或者:xxx简写形式给dom绑定属性：

<img v-bind:src="book.img" v-bind:alt="book.title" />
<!-- 或者 -->
<img :src="book.img" :alt="book.title" />

动态Classes

给dom元素绑定一个class属性，其值为JavaScript表达式：

<li v-for="book in books" :class="{ fav: book.isFav }">
  <img :src="book.img" :alt="book.title" />
  <h3>{{ book.title }}</h3>
  <p>{{ book.author }}</p>
</li>

const app = Vue.createApp({
  data() {
    return {
      books: [
        { title: '红楼梦', author: '曹雪芹', img: './assets/hongloumeng.jpeg', isFav: true },
        { title: '西游记', author: '吴承恩', img: './assets/xiyouji.jpeg', isFav: false },
        { title: '水浒传', author: '施耐庵', img: './assets/shuihuzhuan.jpeg', isFav: false },
        { title: '三国志', author: '罗贯中', img: './assets/sanguozhi.jpeg', isFav: true },
      ],
    }
  },
})

计算属性Computed

首先给每个item项li绑定click事件toggleNav，实现取消/收藏功能：

<li v-for="book in books" :class="{ fav: book.isFav }" @click="toggleNav(book)">
  <img :src="book.img" :alt="book.title" />
  <h3>{{ book.title }}</h3>
  <p>{{ book.author }}</p>
</li>

const app = Vue.createApp({
  data() {
    // ...
  },
  methods: {
    toggleNav(book) {
      book.isFav = !book.isFav
    },
  },
})

添加计算属性：favTotal

<h1>收藏总量：{{ favTotal }}</h1>

vue提供了computed属性基于data中的数据重新计算返回值，每一个计算属性定义为函数：

const app = Vue.createApp({
  data() {
    // ...
  },
  computed: { // 存放每一个计算属性
    favTotal() {
      return this.books.filter((b) => b.isFav).length
    },
  },
  methods: {
    toggleNav(book) {
      book.isFav = !book.isFav
    },
  },
})

未完待续：Vue 3.0教程（for beginner）：使用vue cli构建项目