以下是Vue.js入门教程的核心内容，帮助你快速上手：
1. 什么是Vue.js
Vue.js是一个用于构建用户界面的渐进式JavaScript框架，由尤雨溪开发。它采用组件化架构，使代码可复用、易维护。
2. 第一个Vue应用
创建index.html文件，引入Vue并创建简单应用：
<!DOCTYPE html>
<html>
<head>
<title>Vue.js入门</title>
<!-- 引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<!-- 视图层模板 -->
<div id="app">
{{ message }}
</div>
<script>// 创建Vue实例
new Vue({
el: '#app', // 挂载点
data: { // 数据
message: 'Hello Vue.js!'
}
});</script>
</body>
</html>
3. 核心概念
3.1 数据绑定
Vue使用{{ }}语法进行文本插值，也支持双向数据绑定：
<div id="app">
<p>{{ message }}</p>
<input v-model="message" type="text">
</div>
<script>new Vue({
el: '#app',
data: {
message: 'Type something...'
}
});</script>
3.2 指令
指令是带有v-前缀的特殊属性，用于实现特殊功能：
<div id="app">
<!-- 条件渲染 -->
<p v-if="show">显示内容</p>
<!-- 列表渲染 -->
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
<!-- 事件绑定 -->
<button v-on:click="increment">+1</button>
<p>计数: {{ count }}</p>
</div>
<script>new Vue({
el: '#app',
data: {
show: true,
items: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' }
],
count: 0
},
methods: {
increment() {
this.count++;
}
}
});</script>
3.3 组件系统
组件是Vue.js最强大的功能之一，允许将UI拆分为独立的可复用片段：
<div id="app">
<todo-list :todos="todos"></todo-list>
</div>
<script>// 定义组件
Vue.component('todo-list', {
props: ['todos'],
template: `
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
`
});
// 创建根实例
new Vue({
el: '#app',
data: {
todos: [
{ id: 1, text: '学习Vue' },
{ id: 2, text: '创建组件' }
]
}
});</script>
4. 单文件组件(SFC)
在实际项目中，更推荐使用.vue文件组织代码：
<!-- TodoList.vue -->
<template>
<div class="todo-list">
<ul>
<li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
<input v-model="newTodo" @keyup.enter="addTodo">
<button @click="addTodo">添加</button>
</div>
</template>
<script>
export default {
data() {
return {
todos: [
{ id: 1, text: '学习Vue' },
{ id: 2, text: '创建组件' }
],
newTodo: ''
}
},
methods: {
addTodo() {
if (this.newTodo.trim()) {
this.todos.push({
id: Date.now(),
text: this.newTodo
});
this.newTodo = '';
}
}
}
}
</script>
<style scoped>
.todo-list {
max-width: 400px;
margin: 0 auto;
}
</style>
5. 路由与状态管理
大型应用通常需要Vue Router和Vuex：
// router.js - Vue Router配置
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
});
// store.js - Vuex配置
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(context) {
context.commit('increment');
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
});
6. 项目搭建
使用Vue CLI快速创建项目：
# 安装Vue CLI
npm install -g @vue/cli
# 创建新项目
vue create my-project
# 启动开发服务器
cd my-project
npm run serve
7. 学习资源
- 官方文档：https://vuejs.org/v2/guide/
- Vue.js权威指南（书籍）
- Vue.js实战（书籍）
- 官方教程：https://vuejs.org/v2/tutorial/index.html
以上是Vue.js的入门基础，建议通过官方文档深入学习，并动手实践构建小型应用。
本文来自投稿，不代表本站立场，如若转载，请注明出处：https://typecho.firshare.cn/archives/6124.html
免责声明：文章内容不代表本站立场，本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺，仅供读者参考，文章版权归原作者所有。避免网络欺诈，本站不倡导任何交易行为。如您私自与本站转载自公开互联网中的资讯内容中提及到的个人或平台产生交易，则需自行承担后果。本站在注明来源的前提下推荐原文至此，仅作为优良公众、公开信息分享阅读，不进行商业发布、发表及从事营利性活动。如本文内容影响到您的合法权益（内容、图片等），请及时联系本站，我们会及时删除处理。
