Vue.js 实例

Vue.js 实例

Vue.js 是一种流行的前端JavaScript框架，以其简洁、灵活和高效的特点而受到开发者的喜爱。本文将通过一系列实例，深入探讨Vue.js的核心概念和应用，帮助读者更好地理解和掌握这一强大的工具。

1. Vue.js 基础

1.1 Vue实例的创建

Vue实例是Vue.js应用的核心。创建Vue实例的基本步骤如下：

var vm = new Vue({
  el: '#app',
  {
    message: 'Hello Vue!'
  }
});

在这个例子中，我们创建了一个新的Vue实例，并将其挂载到id为app的DOM元素上。data属性定义了Vue实例的数据对象，可以在模板中通过{{ message }}插值表达式来访问。

1.2 模板语法

Vue.js使用基于HTML的模板语法，允许开发者声明式地绑定数据到DOM上。以下是一些基本示例：

<!-- 文本插值 -->
<span>{{ message }}</span>

<!-- 属性绑定 -->
<div v-bind:id="dynamicId"></div>

<!-- 条件渲染 -->
<p v-if="seen">Now you see me</p>

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

1.3 计算属性和侦听器

计算属性和侦听器是Vue.js中处理数据变化的高级功能。

var vm = new Vue({
  el: '#example',
  {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  },
  watch: {
    message: function (newVal, oldVal) {
      // 响应数据变化
    }
  }
});

2. Vue.js 组件

2.1 组件定义

Vue.js组件是可复用的Vue实例。组件可以扩展HTML元素，封装可重用的代码。定义组件的基本方式如下：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

2.2 组件传递数据

组件之间可以通过props传递数据。父组件通过属性向子组件传递数据，子组件通过事件向父组件发送消息。

Vue.component('child', {
  props: ['message'],
  template: '<span>{{ message }}</span>'
});

new Vue({
  el: '#app',
  {
    parentMessage: 'Message from parent'
  }
});

2.3 单文件组件

在实际应用中，通常使用单文件组件（.vue文件）来组织代码，每个组件都有自己的模板、逻辑和样式。

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello from component!'
    }
  }
}
</script>

<style>
.example {
  font-weight: bold;
}
</style>

3. Vue.js 实战案例

3.1 TODO应用

创建一个简单的TODO应用，展示Vue.js的数据绑定和事件处理能力。

<template>
  <div id="todo-app">
    <input v-model="newTodo" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="removeTodo(todo)">X</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ text: this.newTodo, id: Date.now() });
      this.newTodo = '';
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(t => t.id !== todo.id);
    }
  }
}
</script>

3.2 购物车应用

创建一个购物车应用，展示Vue.js的状态管理和组件通信能力。

<template>
  <div id="shopping-cart">
    <product-list :products="products" @add-to-cart="addToCart"></product-list>
    <cart :cart="cart" @remove-from-cart="removeFromCart"></cart>
  </div>
</template>

<script>
import ProductList from './ProductList.vue';
import Cart from './Cart.vue';

export default {
  components: {
    ProductList,
    Cart
  },
  data() {
    return {
      products: [
        // 产品列表
      ],
      cart: []
    }
  },
  methods: {
    addToCart(product) {
      this.cart