正文

Vue基础2核心知识点解析及实战练习题详解

/0 浏览量
0804

一、Vue核心概念

1.1 Vue实例

Vue实例是Vue应用的核心，它是所有Vue组件的起点。一个Vue实例可以创建一个DOM元素，并在这个DOM元素上挂载Vue应用。

// 创建Vue实例
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

1.2 数据绑定

Vue提供了双向数据绑定机制，使得数据与视图保持同步。当数据发生变化时，视图会自动更新；反之亦然。

<div id="app">
  <p>{{ message }}</p>
</div>

1.3 指令

Vue指令是带有v-前缀的特殊属性，用于绑定数据到DOM元素上。常见的指令有v-text、v-html、v-model等。

<div id="app">
  <p v-text="message"></p>
  <input v-model="message">
</div>

二、组件

2.1 组件定义

组件是Vue应用的基本构建块，它是一个可复用的Vue实例。组件可以包含自己的模板、数据、逻辑等。

// 定义一个组件
Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function() {
    return {
      message: 'Hello Component!'
    }
  }
});

2.2 组件注册

组件可以通过全局注册或局部注册的方式使用。

// 全局注册
Vue.component('my-component', MyComponent);

// 局部注册
new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  }
});

2.3 组件通信

组件之间可以通过自定义事件进行通信。

// 父组件
this.$emit('custom-event', 'Hello from parent!');

// 子组件
this.$on('custom-event', function(message) {
  console.log(message);
});

三、生命周期钩子

Vue实例在不同阶段会执行生命周期钩子函数，用于执行一些初始化或清理工作。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created: function() {
    console.log('Component is created!');
  },
  mounted: function() {
    console.log('Component is mounted!');
  },
  beforeDestroy: function() {
    console.log('Component is about to be destroyed!');
  }
});

四、实战练习题详解

4.1 练习题1：数据绑定

题目描述：创建一个Vue实例，绑定一个数据message，并在页面上显示这个数据。

解答：

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>

4.2 练习题2：组件通信

题目描述：创建一个父组件和一个子组件，父组件向子组件发送消息，子组件接收消息并显示。

解答：

<!-- 父组件 -->
<div id="app">
  <my-component :message="message"></my-component>
  <button @click="sendMessage">Send Message</button>
</div>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

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

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello from parent!'
  },
  methods: {
    sendMessage() {
      this.$emit('custom-event', 'Hello from parent!');
    }
  }
});

通过以上解析和实战练习题详解，相信你已经对Vue基础2的核心知识点有了更深入的理解。祝你在Vue的学习道路上越走越远！

-- 展开阅读全文 --