正文

从零开始：Vue.js MVVM框架快速搭建教程及实战案例

/0 浏览量
0609

简介

Vue.js 是一个流行的前端JavaScript框架，它以简洁的API和响应式数据绑定为核心，旨在构建用户界面和单页应用程序。MVVM（Model-View-ViewModel）是一种软件架构模式，Vue.js 正是遵循这种模式设计的。本文将带领你从零开始，学习如何使用Vue.js搭建一个基本的MVVM框架，并展示一个实战案例。

环境准备

在开始之前，请确保你的开发环境已经安装了Node.js和npm（Node.js包管理器）。Vue.js 的官方推荐使用Vue CLI来创建项目，因此我们也将使用它。

  1. 安装Node.js和npm。
  2. 使用npm全局安装Vue CLI：npm install -g @vue/cli。

创建Vue项目

  1. 打开终端或命令提示符。
  2. 运行以下命令创建一个新的Vue项目：vue create my-vue-app。
  3. 选择预设或手动选择项目配置，然后继续。
  4. 等待项目创建完成。

项目结构

Vue CLI 创建的项目结构如下：

my-vue-app/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── ...
├── package.json
├── ...

其中，src 目录包含项目的源代码，包括组件、资产文件和入口文件。

编写组件

组件是Vue.js的核心概念之一。下面我们将创建一个简单的组件来展示如何使用Vue.js。

  1. 在src/components目录下创建一个名为MyComponent.vue的文件。
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      title: 'Hello Vue!',
      message: 'Welcome to the world of Vue.js.'
    }
  }
}
</script>

<style scoped>
/* 组件样式 */
</style>
  1. 在src/App.vue中引入并使用MyComponent组件。
<template>
  <div id="app">
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue'

export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</script>

<style>
/* 应用样式 */
</style>

实战案例：待办事项列表

现在，我们将使用Vue.js创建一个简单的待办事项列表应用。

  1. 在src/components目录下创建一个名为TodoList.vue的文件。
<template>
  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" placeholder="Add a new todo" @keyup.enter="addTodo" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <span>{{ todo }}</span>
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TodoList',
  data() {
    return {
      todos: [],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push(this.newTodo.trim())
        this.newTodo = ''
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1)
    }
  }
}
</script>

<style scoped>
/* 组件样式 */
</style>
  1. 在src/App.vue中引入并使用TodoList组件。
<template>
  <div id="app">
    <TodoList />
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'

export default {
  name: 'App',
  components: {
    TodoList
  }
}
</script>

<style>
/* 应用样式 */
</style>

运行项目

  1. 在终端中进入项目目录：cd my-vue-app。
  2. 运行以下命令启动开发服务器：npm run serve。
  3. 打开浏览器并访问http://localhost:8080。

现在你应该能看到一个包含待办事项列表的应用。你可以添加新的待办事项，删除已有的待办事项，并通过键盘上的Enter键添加待办事项。

总结

通过本文，你学习了如何使用Vue.js从零开始搭建一个基本的MVVM框架，并创建了一个简单的待办事项列表应用。这只是Vue.js的冰山一角，你可以继续深入学习Vue.js的其他高级功能和最佳实践。

-- 展开阅读全文 --