Vue 核心知识点探究（二）：助你攻克 Vue 项目开发难关

2023-10-06 04:38:20

Vue 学习笔记（二）

作为一名前端工程师，我深刻地体会到拥有扎实的技术功底是多么重要。随着 Vue.js 框架的日益普及，掌握其核心概念已成为前端开发人员的必备技能。在前一篇学习笔记中，我们已经对 Vue.js 有了一个初步的了解。在本文中，我们将继续深入探究 Vue.js 的核心概念，帮助您进一步提升 Vue 项目开发能力。

2.9 计算属性

计算属性是一种缓存的函数，它依赖于其他属性的值。当这些属性的值发生变化时，计算属性的值也会随之更新。计算属性非常适合用来处理复杂的逻辑或对数据进行转换。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    message() {
      return `The count is ${this.count}`
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

2.10 监视属性（侦听器）

侦听器是一种特殊的属性，它允许您在属性值发生变化时执行一些操作。侦听器通常用于在数据发生变化时更新视图或触发其他操作。

<template>
  <div>
    <input type="text" v-model="username">
    <p>Hello, {{ username }}!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  watch: {
    username(newVal, oldVal) {
      console.log(`Username changed from ${oldVal} to ${newVal}`)
    }
  }
}
</script>

2.11 绑定样式

样式绑定允许您使用 JavaScript 表达式来动态地改变元素的样式。这非常适合用来创建交互式的用户界面。

<template>
  <div :style="{ color: favoriteColor }">
    <h1>Hello, world!</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      favoriteColor: 'blue'
    }
  }
}
</script>

2.12 条件渲染器

条件渲染器允许您根据某个条件来决定是否渲染一个元素。这非常适合用来创建动态的用户界面。

<template>
  <div>
    <h1 v-if="isLoggedIn">Hello, {{ username }}!</h1>
    <h1 v-else>Please log in.</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      username: ''
    }
  }
}
</script>

2.13 收集表单数据-v-model详解

v-model 指令允许您将表单元素与 Vue.js 数据模型绑定在一起。这使得收集表单数据变得非常简单。

<template>
  <form>
    <input type="text" v-model="username">
    <input type="password" v-model="password">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submitForm(e) {
      e.preventDefault()

      console.log(`Username: ${this.username}`)
      console.log(`Password: ${this.password}`)
    }
  }
}
</script>

2.14 过滤器（filter）

过滤器是一种特殊的方法，它允许您对数据进行转换。过滤器通常用于在数据显示在视图之前对其进行格式化。

<template>
  <div>
    <h1>{{ message | uppercase }}</h1>
    <h1>{{ message | lowercase }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  filters: {
    uppercase(value) {
      return value.toUpperCase()
    },
    lowercase(value) {
      return value.toLowerCase()
    }
  }
}
</script>