以下是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文件组织代码：
- {{ todo.text }}
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://blog.firsource.cn/news/1343.html