Vue.js 入门教程

一、引言

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。与其他重量级框架不同，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易上手，同时也很容易与其他库或已有项目整合。本文将引导你逐步了解 Vue.js 的基本概念和用法。

二、安装 Vue.js

1. 直接下载并引入

   你可以直接在 HTML 文件中通过 CDN 引入 Vue.js：

   html复制代码

   <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2. 使用 npm 安装

   如果你在使用 Node.js，推荐使用 npm 安装 Vue：

   bash复制代码

   npm install vue

3. 使用 Vue CLI 创建项目

   Vue CLI 是一个官方提供的标准工具，用于快速搭建 Vue.js 项目。你可以通过以下命令全局安装 Vue CLI：

   bash复制代码

   npm install -g @vue/cli

   然后，通过以下命令创建一个新项目：

   bash复制代码

   	vue create my-project
   	cd my-project
   	npm run serve

三、基础概念

1. 实例

   Vue 实例是 Vue 应用的起点。每个 Vue 应用都是通过创建一个 Vue 实例开始的：

   javascript复制代码

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

   在 HTML 中，你需要有一个与 el 属性对应的 DOM 元素：

   html复制代码

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

2. 模板语法

   Vue 使用基于 HTML 的模板语法，允许你声明式地将 DOM 绑定到底层 Vue 实例的数据上。Vue 的模板语法非常简单，主要有两种：

   • 插值：{{ }} 用于文本插值。
   • 指令：v-bind、v-model、v-if 等，用于在模板中声明式地绑定或控制 DOM 元素。

3. 计算属性

   计算属性用于声明式地描述基于响应式依赖的复杂逻辑。当依赖变化时，计算属性会重新计算，并且缓存结果，只有在相关依赖再次变化时才会重新计算。

   javascript复制代码

   	var vm = new Vue({
   	el: '#app',
   	data: {
   	message: 'Hello'
   	},
   	computed: {
   	reversedMessage: function () {
   	return this.message.split('').reverse().join('');
   	}
   	}
   	});

   在模板中使用计算属性：

   html复制代码

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

4. 事件处理

   使用 v-on 指令（简写为 @）来监听 DOM 事件：

   html复制代码

   	<div id="app">
   	<button @click="greet">Greet</button>
   	</div>

   在 Vue 实例中定义方法：

   javascript复制代码

   	var vm = new Vue({
   	el: '#app',
   	data: {
   	name: 'Vue.js'
   	},
   	methods: {
   	greet: function (event) {
   	alert('Hello ' + this.name + '!')
   	}
   	}
   	});

四、组件

组件系统是 Vue 的另一个重要概念，它允许我们将 UI 拆分成可复用的独立部分。

1. 注册组件

   全局注册组件：

   javascript复制代码

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

   局部注册组件：

   javascript复制代码

   	var Child = {
   	template: '<div>A custom component!</div>'
   	};
   	new Vue({
   	el: '#app',
   	components: {
   	'child-component': Child
   	}
   	});

2. 使用组件

   html复制代码

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

3. 组件间的通信

   • 父组件向子组件传递数据：通过 props。
   • 子组件向父组件发送消息：通过 $emit 触发事件。
   • 非父子组件间的通信：通过 Vuex（状态管理模式）或 Event Bus。

五、Vue CLI 深入

使用 Vue CLI 创建的项目结构相对复杂，但提供了很多开箱即用的功能，比如路由、状态管理、构建工具等。

1. 路由

   Vue Router 是 Vue.js 官方的路由管理器。在项目根目录下安装 Vue Router：

   bash复制代码

   npm install vue-router

   配置路由：

   javascript复制代码

   	import Vue from 'vue';
   	import Router from 'vue-router';
   	import Home from './components/Home.vue';
   	import About from './components/About.vue';
   	Vue.use(Router);
   	export default new Router({
   	routes: [
   	{
   	path: '/',
   	name: 'Home',
   	component: Home
   	},
   	{
   	path: '/about',
   	name: 'About',
   	component: About
   	}
   	]
   	});

   在 Vue 实例中使用路由：

   javascript复制代码

   	import Vue from 'vue';
   	import App from './App.vue';
   	import router from './router';
   	new Vue({
   	router,
   	render: h => h(App)
   	}).$mount('#app');

2. 状态管理

   Vuex 是专为 Vue.js 应用程序开发的状态管理模式。安装 Vuex：

   bash复制代码

   npm install vuex

   配置 Vuex：

   javascript复制代码

   	import Vue from 'vue';
   	import Vuex from 'vuex';
   	Vue.use(Vuex);
   	export default new Vuex.Store({
   	state: {
   	count: 0
   	},
   	mutations: {
   	increment (state) {
   	state.count++;
   	}
   	},
   	actions: {
   	increment ({ commit }) {
   	commit('increment');
   	}
   	},
   	getters: {
   	count: state => state.count
   	}
   	});

   在 Vue 实例中使用 Vuex：

   javascript复制代码

   	import Vue from 'vue';
   	import App from './App.vue';
   	import store from './store';
   	new Vue({
   	store,
   	render: h => h(App)
   	}).$mount('#app');

六、总结

Vue.js 是一个强大且易于上手的 JavaScript 框架，适用于构建单页面应用（SPA）。通过本文，你应该已经了解了 Vue.js 的基础概念，包括实例、模板语法、计算属性、事件处理以及组件系统。此外，你还学习了如何使用 Vue CLI 创建和管理复杂的 Vue.js 项目，包括路由和状态管理。希望这篇入门教程能帮助你快速上手 Vue.js 开发。