JavaScript 第25章：Vue 基础

在学习JavaScript的第25章关于Vue的基础知识时，我们将从以下几个方面来了解Vue框架，并通过一个实战案例来巩固所学的知识。

Vue概述

Vue.js是一个用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，易于上手，同时也非常灵活。结合现代化的工具链和各种支持类库，Vue可以为复杂的单页应用提供驱动。

指令与表达式

Vue提供了多种内置指令来绑定DOM属性到Vue实例的数据。最常用的指令是v-bind用于动态绑定属性，v-on用于监听DOM事件，还有v-if用于条件渲染等。表达式则可以在双大括号{{ }}中使用，用来展示数据模型中的值。

示例代码：

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

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

组件与插槽

Vue中的组件是用来创建可复用的UI代码块。每个组件都可以被看作是一个自包含的单元，有自己的选项和生命周期。Vue还允许使用<slot>标签来实现内容分发，这样父组件可以向子组件中插入内容。

示例代码：

<!-- 子组件 -->
<template>
  <div class="child">
    <slot>默认插槽内容</slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child>
      <!-- 插入的内容 -->
      <span>这是来自父组件的内容</span>
    </child>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

计算属性与侦听器

计算属性是一种依赖于其他数据属性而变化的属性。它们在模板中使用时会自动触发重新计算。当依赖项改变时，计算属性也会重新计算。侦听器则用于监听数据的变化并执行一些副作用。

示例代码：

data() {
  return {
    fullName: 'John Doe',
    firstName: 'John',
    lastName: 'Doe'
  };
},
computed: {
  reversedName() {
    return this.fullName.split('').reverse().join('');
  }
},
watch: {
  firstName(newVal, oldVal) {
    console.log(`First name changed from ${oldVal} to ${newVal}`);
  },
  lastName(newVal, oldVal) {
    console.log(`Last name changed from ${oldVal} to ${newVal}`);
  }
}

实战案例：简单的Vue应用

假设我们要创建一个简单的待办事项列表应用。这个应用将包括添加待办事项的功能，以及删除待办事项的功能。

源码示例：

<div id="app">
  <h1>我的待办事项</h1>
  <input v-model="newItem" @keyup.enter="addTodo">
  <button @click="addTodo">添加</button>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.text }}
      <button @click="removeTodo(index)">删除</button>
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    newItem: '',
    items: []
  },
  methods: {
    addTodo() {
      if (this.newItem.trim()) {
        this.items.push({ text: this.newItem });
        this.newItem = '';
      }
    },
    removeTodo(index) {
      this.items.splice(index, 1);
    }
  }
});
</script>

在这个例子中，我们使用了v-model双向绑定输入框的值，并且在回车或点击按钮时调用addTodo方法将新的待办事项添加到列表中。同时，每个列表项都有一个删除按钮，点击后调用removeTodo方法移除对应的项。这个简单的应用展示了Vue的基本功能，如数据绑定、事件处理以及数组操作。

当然，我们可以进一步扩展这个简单的待办事项应用，增加更多的功能，比如完成状态切换、过滤显示（仅显示未完成的或已完成的任务）等等。下面是一个更完整的版本：

扩展功能：完成状态切换与过滤

在这个扩展的应用中，我们将添加一个复选框来标记任务是否已完成，并且添加一个过滤器来选择性地显示任务。

源码示例：

<div id="app">
  <h1>我的待办事项</h1>
  <input v-model="newItem" placeholder="输入新任务">
  <button @click="addTodo">添加</button>
  <label>
    <input type="checkbox" v-model="showCompleted">
    显示已完成
  </label>
  <ul>
    <li v-for="(item, index) in filteredItems" :key="index">
      <input type="checkbox" v-model="item.completed">
      <span :class="{ completed: item.completed }">{{ item.text }}</span>
      <button @click="removeTodo(index)">删除</button>
    </li>
  </ul>
</div>

<style scoped>
.completed {
  text-decoration: line-through;
}
</style>

<script>
new Vue({
  el: '#app',
  data: {
    newItem: '',
    items: [],
    showCompleted: false,
  },
  computed: {
    // 过滤未完成/已完成的任务
    filteredItems() {
      if (this.showCompleted) {
        return this.items;
      } else {
        return this.items.filter(item => !item.completed);
      }
    }
  },
  methods: {
    addTodo() {
      if (this.newItem.trim()) {
        this.items.push({ text: this.newItem, completed: false });
        this.newItem = '';
      }
    },
    removeTodo(index) {
      this.items.splice(index, 1);
    }
  }
});
</script>

在这个扩展版中，我们添加了一个复选框showCompleted，当它被选中时，所有任务都会显示；否则，只有未完成的任务会被显示出来。我们还给每个任务添加了一个复选框来标记任务是否已完成，并且根据item.completed的状态来调整文本样式。

这个应用展示了如何使用Vue的计算属性进行条件筛选、使用v-model进行双向数据绑定以及如何根据数据动态更改元素的CSS类。

以上就是对Vue基础知识的一个总结和一个实战案例的介绍。这些概念是构建更复杂Vue应用程序的基础。随着你对Vue的理解加深，你可以开始探索更高级的主题，例如路由管理、状态管理（如Vuex）、服务端渲染等。

接下来，让我们继续深入探讨Vue的一些更高级特性，以及如何将这些特性应用到我们的待办事项应用中以增强其功能性和可维护性。

更高级特性：路由管理与状态管理

路由管理（Vue Router）

对于稍微复杂一点的应用，可能需要多个视图页面。Vue Router 是一个官方路由管理器，它和Vue.js的核心深度集成，让构建单页面应用变得简单。

如果你的应用需要多个页面，可以考虑引入Vue Router来管理不同的视图。这里不会具体实现路由管理，但是可以简要说明一下它的用法：

1. 安装Vue Router：

   npm install vue-router
   

2. 创建一个路由配置文件，定义你的路由规则：

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   
   Vue.use(VueRouter);
   
   const routes = [
     { path: '/', component: Home },
     { path: '/todos', component: Todos },
     // 可以添加更多路径
   ];
   
   export default new VueRouter({ routes });
   

3. 在主应用文件中引入路由配置，并使用路由配置：

   import router from './router'; // 引入路由配置
   
   new Vue({
     el: '#app',
     router, // 使用路由配置
     render: h => h(App)
   });
   

状态管理（Vuex）

对于共享状态的应用，状态管理变得尤为重要。Vuex 是Vue官方的状态管理模式，它可以帮助我们更好地管理全局状态。

同样地，这里不具体实现Vuex，但可以给出基本的步骤：

1. 安装Vuex：

   npm install vuex
   

2. 创建一个Vuex store文件，定义state、mutations、actions等：

   import Vue from 'vue';
   import Vuex from 'vuex';
   
   Vue.use(Vuex);
   
   const store = new Vuex.Store({
     state: {
       todos: [] // 初始化状态
     },
     mutations: {
       addTodo(state, todo) {
         state.todos.push(todo);
       },
       removeTodo(state, index) {
         state.todos.splice(index, 1);
       }
     },
     actions: {
       addTodo({ commit }, todo) {
         commit('addTodo', todo);
       },
       removeTodo({ commit }, index) {
         commit('removeTodo', index);
       }
     }
   });
   
   export default store;
   

3. 在Vue组件中使用store：

   export default {
     methods: {
       addTodo(todo) {
         this.$store.dispatch('addTodo', todo);
       },
       removeTodo(index) {
         this.$store.dispatch('removeTodo', index);
       }
     }
   };
   

总结

通过上述介绍，你应该对Vue.js及其周边生态有了更深的认识。对于一个实际项目而言，通常会结合Vue Router来管理多页面的导航逻辑，以及使用Vuex来集中管理应用的状态。这不仅有助于提高代码的可维护性，还能使应用更加健壮和易于扩展。

如果你有兴趣深入了解这些高级特性，建议阅读官方文档并尝试自己动手实践。官方文档通常是最全面且准确的信息来源。

既然我们已经讨论了Vue.js的一些基础特性和高级特性，现在让我们进一步扩展我们的待办事项应用，以便更好地演示这些高级特性的使用方式。

使用Vue Router实现多页面应用

为了使我们的待办事项应用更具实用性，我们可以添加一个新的页面来展示用户的个人信息或者设置选项。这里我们将创建一个简单的设置页面，并使用Vue Router来管理这两个页面之间的导航。

设置页面：

<!-- settings.html -->
<div>
  <h2>设置</h2>
  <p>这里是设置页面。</p>
</div>

更新主应用文件以使用Vue Router：

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由配置

new Vue({
  router, // 使用路由配置
  render: h => h(App)
}).$mount('#app');

配置路由：

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Todos from './components/Todos.vue'; // 待办事项页面
import Settings from './components/Settings.vue'; // 设置页面

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Todos },
  { path: '/settings', component: Settings }
];

export default new VueRouter({ routes });

更新待办事项页面以包含导航链接：

<!-- App.vue -->
<div id="app">
  <nav>
    <router-link to="/">待办事项</router-link>
    <router-link to="/settings">设置</router-link>
  </nav>
  <router-view></router-view>
</div>

通过这种方式，用户可以方便地在待办事项页面和设置页面之间进行导航。

使用Vuex管理应用状态

现在，让我们改进待办事项应用的状态管理，使其更加模块化并且易于维护。我们将使用Vuex来管理待办事项列表。

创建Vuex Store：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo);
    },
    removeTodo(state, index) {
      state.todos.splice(index, 1);
    },
    toggleTodo(state, index) {
      state.todos[index].completed = !state.todos[index].completed;
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('addTodo', todo);
    },
    removeTodo({ commit }, index) {
      commit('removeTodo', index);
    },
    toggleTodo({ commit }, index) {
      commit('toggleTodo', index);
    }
  },
  getters: {
    todos(state) {
      return state.todos;
    }
  }
});

更新待办事项组件以使用Vuex Store：

// Todos.vue
import { mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['todos'])
  },
  methods: {
    ...mapActions(['addTodo', 'removeTodo', 'toggleTodo']),
    submitNewTodo(e) {
      e.preventDefault();
      if (!this.newTodoText.trim()) return;
      this.addTodo({ text: this.newTodoText, completed: false });
      this.newTodoText = '';
    }
  },
  template: `
    <form @submit.prevent="submitNewTodo">
      <input v-model="newTodoText" placeholder="输入新任务">
      <button type="submit">添加</button>
      <ul>
        <li v-for="(todo, index) in todos" :key="index">
          <input type="checkbox" :checked="todo.completed" @change="toggleTodo(index)">
          <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
          <button @click="removeTodo(index)">删除</button>
        </li>
      </ul>
    </form>
  `
};

通过使用Vuex，我们现在可以更容易地管理待办事项的状态，并且使得组件间的通信更加简洁明了。

结语

通过以上步骤，我们不仅增强了待办事项应用的功能，还引入了Vue Router和Vuex，使得应用结构更加清晰且易于扩展。希望这些示例能帮助你更好地理解Vue.js以及如何使用其生态系统中的工具来构建复杂的应用程序。如果你有任何疑问或想要深入了解某个特定主题，请随时提问！