Vue 技术要点: 实用指南

2023-10-16 06:32:52

Vue.js 知识点总结

Vue.js 是一个构建用户界面的 JavaScript 框架。它提供了简洁的 API，可用于构建复杂的单页面应用程序。Vue.js 拥有众多功能，包括：

响应式数据绑定
组件化开发
路由
动画
状态管理

绑定属性值

Vue.js 中的属性绑定可以让我们通过在 HTML 中使用 v-bind 指令将 Vue 实例中的数据绑定到 HTML 元素的属性。例如，我们可以使用 v-bind 指令将 Vue 实例中的 message 数据绑定到 HTML 元素的 id 属性。

<div id="app">
  <p v-bind:id="message"></p>
</div>

绑定 class

Vue.js 中的 class 绑定可以让我们通过在 HTML 中使用 v-bind:class 指令将 Vue 实例中的数据绑定到 HTML 元素的 class 属性。例如，我们可以使用 v-bind:class 指令将 Vue 实例中的 isActive 数据绑定到 HTML 元素的 class 属性。

<div id="app">
  <p v-bind:class="{ 'active': isActive }"></p>
</div>

绑定内联样式

Vue.js 中的内联样式绑定可以让我们通过在 HTML 中使用 v-bind:style 指令将 Vue 实例中的数据绑定到 HTML 元素的 style 属性。例如，我们可以使用 v-bind:style 指令将 Vue 实例中的 fontSize 数据绑定到 HTML 元素的 style 属性。

<div id="app">
  <p v-bind:style="{ fontSize: fontSize + 'px' }"></p>
</div>

给图片添加 URL 地址

在 Vue.js 中，我们可以使用 v-bind:src 指令给图片添加 URL 地址。例如，我们可以使用 v-bind:src 指令将 Vue 实例中的 imageUrl 数据绑定到 HTML 元素的 src 属性。

<div id="app">
  <img v-bind:src="imageUrl">
</div>

父组件向子组件传递数据

在 Vue.js 中，我们可以通过 props 属性将数据从父组件传递给子组件。例如，我们可以使用 props 属性将 Vue 实例中的 message 数据传递给子组件。

// 父组件
<div id="app">
  <child-component :message="message"></child-component>
</div>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>

子组件向父组件传递数据

在 Vue.js 中，我们可以通过 emit 事件将数据从子组件传递给父组件。例如，我们可以使用 emit 事件将 Vue 实例中的 message 数据传递给父组件。

// 子组件
<template>
  <button @click="emitMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    emitMessage() {
      this.$emit('message', 'Hello from child component')
    }
  }
}
</script>

// 父组件
<div id="app">
  <child-component @message="receiveMessage"></child-component>
</div>

<script>
export default {
  methods: {
    receiveMessage(message) {
      console.log(message)
    }
  }
}
</script>

Vue.js 生命周期钩子

Vue.js 的生命周期钩子允许我们可以在组件的不同阶段执行特定的代码。例如，我们可以使用 created 钩子在组件创建时执行代码，mounted 钩子在组件挂载到 DOM 时执行代码。

export default {
  created() {
    console.log('Component created')
  },
  mounted() {
    console.log('Component mounted')
  }
}

Vue.js 路由

Vue.js 路由允许我们在应用程序中创建不同的页面。例如，我们可以创建一个关于我们、联系我们和产品页面。

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    },
    {
      path: '/products',
      component: Products
    }
  ]
})

Vue.js 动画

Vue.js 动画允许我们在应用程序中创建不同的动画效果。例如，我们可以创建一个淡入、淡出和缩放动画。

<transition name="fade">
  <p v-if="show">Hello World!</p>
</transition>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>