03 Vue.js 的一些核心概念

让我们更深入地了解 Vue.js 的一些核心概念，并通过代码示例来进一步解释它们。

1. Vue 实例和模板语法

Vue 应用从一个 Vue 实例开始，这个实例是 Vue 应用的入口点。模板语法允许我们声明性地将 DOM 绑定到 Vue 实例的数据上。

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

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

2. 响应式数据绑定

Vue 的数据绑定是双向的，这意味着当你更改数据时，视图会自动更新，反之亦然。

<input v-model="username">

<script>
  var app = new Vue({
    el: '#app',
    data: {
      username: 'Vue.js Lover'
    }
  });
</script>

3. 指令

Vue 提供了一系列指令，用于在模板中声明 DOM 行为。以下是一些常用的指令：

• v-bind：用于绑定一个或多个属性，或一个组件 prop 到表达式。
• v-on：用于监听 DOM 事件。
• v-if、v-else-if、v-else：用于条件渲染。
• v-for：用于列表渲染。

<!-- 绑定属性 -->
<img v-bind:src="imageUrl" alt="Vue logo">

<!-- 监听点击事件 -->
<button v-on:click="sayHello">Say Hello</button>

<!-- 条件渲染 -->
<p v-if="ok">Yes</p>
<p v-else>No</p>

<!-- 列表渲染 -->
<ul>
  <li v-for="item in items">{{ item.text }}</li>
</ul>

4. 组件化

组件是 Vue 的一个核心概念，它允许你将界面拆分成独立、可复用的组件。

// 定义一个名为 "my-component" 的新组件
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

// 创建一个 Vue 实例或组件实例
new Vue({
  el: '#app'
});

HTML:

<div id="app">
  <my-component></my-component>
</div>

5. 组件 Props

组件可以接受外部传入的数据，这些数据被称为 props。

Vue.component('child-component', {
  props: ['greeting'],
  template: '<div>{{ greeting }}</div>'
});

new Vue({
  el: '#app',
  data: {
    message: 'Hello from parent!'
  }
});

HTML:

<div id="app">
  <child-component :greeting="message"></child-component>
</div>

6. 事件

组件可以触发事件，这些事件可以被父组件监听。

Vue.component('child-component', {
  template: `
    <button @click="notifyParent">Click me</button>
  `,
  methods: {
    notifyParent: function() {
      this.$emit('notify', 'Message from child');
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    onNotify: function(message) {
      alert(message);
    }
  }
});

HTML:

<div id="app">
  <child-component @notify="onNotify"></child-component>
</div>

7. 生命周期钩子

Vue 实例和组件都有一系列的生命周期钩子，允许你在实例的不同阶段执行代码。

new Vue({
  el: '#app',
  data: {
    newMessage: ''
  },
  created: function() {
    // 实例创建后调用
    console.log('Vue instance created');
  },
  mounted: function() {
    // 模板编译完成，挂载到 DOM 后调用
    this.newMessage = 'Hello from mounted hook!';
  }
});

8. 计算属性和侦听器

计算属性是基于它们的依赖进行缓存的计算属性。侦听器是一个当数据变化时调用的函数。

new Vue({
  el: '#app',
  data: {
    firstName: 'Jane',
    lastName: 'Doe'
  },
  computed: {
    // 计算属性
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  watch: {
    // 侦听器
    firstName: function(newValue) {
      console.log('First name changed to: ' + newValue);
    }
  }
});

这些示例涵盖了 Vue.js 的一些核心概念，包括实例化、模板语法、响应式数据绑定、指令、组件化、事件系统、生命周期钩子、计算属性和侦听器。通过这些概念，你可以构建复杂的用户界面和应用程序。