简介
Vue.js 是一个流行的前端JavaScript框架,它以简洁的API和响应式数据绑定为核心,旨在构建用户界面和单页应用程序。MVVM(Model-View-ViewModel)是一种软件架构模式,Vue.js 正是遵循这种模式设计的。本文将带领你从零开始,学习如何使用Vue.js搭建一个基本的MVVM框架,并展示一个实战案例。
环境准备
在开始之前,请确保你的开发环境已经安装了Node.js和npm(Node.js包管理器)。Vue.js 的官方推荐使用Vue CLI来创建项目,因此我们也将使用它。
- 安装Node.js和npm。
- 使用npm全局安装Vue CLI:
npm install -g @vue/cli。
创建Vue项目
- 打开终端或命令提示符。
- 运行以下命令创建一个新的Vue项目:
vue create my-vue-app。 - 选择预设或手动选择项目配置,然后继续。
- 等待项目创建完成。
项目结构
Vue CLI 创建的项目结构如下:
my-vue-app/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ ├── main.js
│ └── ...
├── package.json
├── ...
其中,src 目录包含项目的源代码,包括组件、资产文件和入口文件。
编写组件
组件是Vue.js的核心概念之一。下面我们将创建一个简单的组件来展示如何使用Vue.js。
- 在
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>
- 在
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创建一个简单的待办事项列表应用。
- 在
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>
- 在
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>
运行项目
- 在终端中进入项目目录:
cd my-vue-app。 - 运行以下命令启动开发服务器:
npm run serve。 - 打开浏览器并访问
http://localhost:8080。
现在你应该能看到一个包含待办事项列表的应用。你可以添加新的待办事项,删除已有的待办事项,并通过键盘上的Enter键添加待办事项。
总结
通过本文,你学习了如何使用Vue.js从零开始搭建一个基本的MVVM框架,并创建了一个简单的待办事项列表应用。这只是Vue.js的冰山一角,你可以继续深入学习Vue.js的其他高级功能和最佳实践。
