Javascript
Vue资料入门教程：快速掌握Vue.js基础
Vue.js是一个渐进式的JavaScript框架，专注于构建高效、可维护的用户界面。通过本文，你将全面了解Vue.js的基础知识，包括环境搭建、基础语法、组件、路由和状态管理等。本文不仅提供了详细讲解和示例代码，还附加了更多复杂示例，帮助你快速上手Vue.js开发。适合不同层次的开发者学习和参考。
Vue.js 是一个渐进式的JavaScript框架，专注于构建用户界面。Vue.js的设计目标是提供灵活高效的工具来构建可维护的单页应用（SPA）。它可以用于开发SPA或混合移动应用。Vue.js的核心库只关注视图层，具有轻量级的特点，容易被集成到任何项目中。
响应式视图
Vue.js的核心特性之一是其响应式系统，能够自动追踪数据的变化并更新视图，无需手动操作DOM。
轻量级
Vue.js的体积小巧，压缩后的生产版本只有约20KB，这对于需要快速加载的应用来说是一个很大的优势。
双向数据绑定
Vue.js提供了双向数据绑定功能，可以自动同步视图与数据模型，开发者无需手动处理数据同步问题。
易于学习和集成
Vue.js的文档详细且易于理解，易于集成到现有项目中，无论是新的项目还是已有的项目，Vue.js都能很好地适应。
Vue.js可以用于开发以下类型的项目：
- 单页面应用（SPA）：Vue.js的渲染能力使得它非常适合用于构建单页面应用，可以实现复杂的应用界面和交互。
- 混合移动应用：Vue.js可以与诸如Cordova或Electron之类的工具结合使用，开发跨平台的混合移动应用。
- 动态站点：Vue.js的响应式系统使其非常适合用于构建需要动态更新的站点。
- 桌面应用：Vue.js可以与Electron结合使用，构建跨平台的桌面应用。
Vue.js使用Node.js和npm来创建和管理项目。首先需要确保你的计算机上安装了Node.js和npm。可以通过以下命令检查是否已安装：
node -v npm -v
如果没有安装，可以从Node.js官网下载最新版本的安装包进行安装。
可以通过Vue CLI（Vue命令行工具）快速创建一个新的Vue.js项目。首先需要安装Vue CLI，使用以下命令：
npm install -g @vue/cli
创建项目时，可以选择使用Vue CLI提供的默认配置，或者根据需要自定义配置。创建一个新的Vue应用，可以使用以下命令：
```bash.
vue create my-vue-app
这将打开一个交互式界面，帮助你选择Vue.js版本和其他配置选项。创建完成后，可以通过以下命令进入项目目录并运行应用： ```bash cd my-vue-app npm run serve
一个典型的Vue.js项目结构如下：
my-vue-app/ ├── node_modules/ ├── public/ │ ├── index.html │ └── favicon.ico ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.js ├── .gitignore ├── babel.config.js ├── package.json └── README.md
- node_modules/：存放项目依赖库。
- public/：存放静态文件，如HTML模板、静态图片等。
- src/：存放项目核心代码，包括组件、路由、视图等。
- App.vue：项目的主组件，是整个应用的入口。
- main.js：项目入口文件，负责创建Vue实例并挂载到DOM中。
- package.json：存放项目依赖、脚本等信息。
Vue.js的数据绑定功能允许你将应用的数据与DOM直接绑定。数据绑定可以通过插值表达式或指令来实现。
模板语法
在Vue中，可以使用{{}}插值表达式来绑定数据到DOM元素上。例如：
<div id="app">
{{ message }}
</div>
在Vue实例中定义message属性：
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
v-bind指令
v-bind指令可以用来绑定DOM元素的属性到Vue实例的数据上。例如：
<div id="app"> <img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imageSrc"> </div>
在Vue实例中定义imageSrc属性：
var app = new Vue({
el: '#app',
data: {
imageSrc: 'https://example.com/image.png'
}
});
Vue.js的模板语法提供了丰富的功能来构建动态用户界面。模板语法包括插值表达式、指令、类和样式的绑定等。
插值表达式
插值表达式用于显示数据。例如：
<div id="app">
<p>{{ message }}</p>
</div>
在Vue实例中定义message属性：
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
指令
Vue.js提供了许多指令，如v-if、v-else、v-for等。例如：
<div id="app"> <p v-if="seen">Now you see me</p> <p v-else>Now you don't</p> </div>
在Vue实例中定义seen属性：
var app = new Vue({
el: '#app',
data: {
seen: false
}
});
v-for指令
v-for指令用于循环渲染一个数组。例如：
<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
在Vue实例中定义items属性：
var app = new Vue({
el: '#app',
data: {
items: ['Apple', 'Banana', 'Cherry']
}
});
Vue.js提供了计算属性和方法来处理复杂的数据逻辑。
计算属性
计算属性是基于数据变化而进行计算的属性。它们是基于getter和setter实现的，当数据变化时，计算属性也会自动更新。例如：
<div id="app">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
在Vue实例中定义计算属性：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
}
});
方法
方法是用于处理更复杂逻辑的功能。它们不是基于数据变化自动更新的，需要手动调用。例如：
<div id="app">
<button v-on:click="reverseMessage">Reverse Message</button>
<p>{{ message }}</p>
</div>
在Vue实例中定义方法：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('');
}
}
});
Vue.js的组件系统允许你将UI拆分为独立可复用的组件，每个组件都封装了自己内部的数据和逻辑。组件是Vue.js的一个核心特性，可以让你的代码更模块化、更易于维护。
组件是Vue.js中最小的可重用代码块，它封装了HTML模板、CSS样式和JavaScript逻辑。每个组件可以有自己的数据、计算属性、方法和生命周期钩子。
创建组件有两种方式：全局注册和局部注册。
全局注册
全局注册的组件可以在任何Vue实例中使用。例如：
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
new Vue({
el: '#app',
components: {
'my-component': Vue.component('my-component')
}
});
<div id="app"> <my-component></my-component> </div>
局部注册
局部注册的组件只能在注册的Vue实例中使用。例如：
<template>
<div id="app">
<my-component></my-component>
</div>
</template>
<script>
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
new Vue({
el: '#app',
components: {
'my-component': Vue.component('my-component')
}
});
</script>
组件的属性和事件
组件可以有属性（props）和事件（emits）。属性是从父组件传递给子组件的数据，事件是子组件向父组件传递的数据。
属性（Props）
Props是单向数据流，从父组件传递给子组件。例如：
<template>
<div id="app">
<parent-component message="Hello from parent"></parent-component>
</div>
</template>
<script>
Vue.component('parent-component', {
template: '<div><child-component :message="message"></child-component></div>',
props: ['message']
});
Vue.component('child-component', {
template: '<div>{{ message }}</div>',
props: ['message']
});
new Vue({
el: '#app'
});
</script>
事件（Emits）
事件是子组件向父组件传递数据的方式。例如：
<template>
<div id="app">
<parent-component @child-event="handleChildEvent"></parent-component>
</div>
</template>
<script>
Vue.component('parent-component', {
template: '<child-component @child-event="handleChildEvent"></child-component>',
methods: {
handleChildEvent(data) {
console.log(data);
}
}
});
Vue.component('child-component', {
template: '<button v-on:click="triggerEvent">Click me</button>',
methods: {
triggerEvent() {
this.$emit('child-event', 'Hello from child');
}
}
});
new Vue({
el: '#app'
});
</script>
<template>
<div id="app">
<parent-component @child-event="handleChildEvent"></parent-component>
</div>
</template>
<script>
Vue.component('parent-component', {
template: '<div><child-component></child-component></div>',
methods: {
handleChildEvent(data) {
console.log(data);
}
}
});
Vue.component('child-component', {
template: '<button v-on:click="triggerEvent">Click me</button>',
methods: {
triggerEvent() {
this.$emit('child-event', 'Hello from child');
}
}
});
new Vue({
el: '#app'
});
</script>
Vue Router是Vue.js官方的路由管理库，用于构建单页面应用（SPA）的路由系统。它可以实现应用在不同路由之间的切换，每个路由对应一个组件，从而实现SPA中不同页面的动态加载。
Vue Router是Vue.js的官方路由管理库。它可以实现应用在不同路由之间的切换，每个路由对应一个组件，从而实现SPA中不同页面的动态加载。
首先，你需要安装Vue Router。可以通过npm或yarn来安装：
npm install vue-router # 或 yarn add vue-router
接下来，需要创建路由配置文件。例如，创建一个router.js文件：
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实例中：
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
el: '#app',
render: h => h(App),
router
});
在Vue实例中使用router-link组件来创建导航链接，使用router-view组件来渲染匹配的路由组件。
<template>
<div id="app">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
通过上述配置，当用户点击导航链接时，router-link会根据路径to属性更新URL，同时router-view会动态渲染匹配的路由组件。例如：
<template>
<div id="app">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
在路由配置文件中定义的每个路由路径都将映射到一个组件。例如：
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
}
]
});
访问http://localhost:8080/时，router-view将渲染Home组件；访问http://localhost:8080/about时，将渲染About组件。
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Details from './components/Details.vue';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/details/:id',
name: 'Details',
component: Details
},
{
path: '*',
redirect: '/'
}
]
});
在组件中使用动态路由：
<template>
<div id="app">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/details/1">Details 1</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
Vue应用中，状态管理是保持应用状态一致性和可维护性的关键。随着应用复杂度的增加，状态管理变得越来越重要。Vue.js提供了Vuex来帮助管理应用状态，它是一个专门为Vue.js构建的状态管理库，旨在实现集中式状态管理。
Vuex是一个专为Vue.js设计的状态管理库，用于集中管理应用的状态，特别是在大型应用中。Vuex帮助你更好地管理应用的状态，使得状态的修改和追踪更加清晰和方便。
Store
Vuex的核心是store，它是应用的状态容器。每个应用有且仅有一个store实例，store通过mutation来变更状态，通过action来处理异步操作，通过getter来计算衍生数据。
Mutation
mutation是状态变更的唯一途径，它用于同步更新应用的状态。每个mutation函数接受一个state对象作为参数，允许你直接变更状态。
Action
action类似于mutation，但是action可以包含异步操作，如网络请求、数据库操作等。action函数接受一个context参数，可以通过context.commit提交mutation。
Getter
getter用于获取状态的派生值。getter就像组件中的计算属性，可以根据已有状态计算出新的状态。
首先安装Vuex：
npm install vuex
然后创建一个store.js文件来定义store：
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实例中引入store：
import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
el: '#app',
store,
render: h => h(App)
});
在组件中使用store：
<template>
<div id="app">
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.getters.count;
}
},
methods: {
increment() {
this.$store.dispatch('increment');
}
}
};
</script>
通过上述配置，当点击按钮时，actions中的increment函数会被调用，进而通过mutation更新状态，最终在视图中显示新的状态值。
更复杂的Vuex应用示例
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
todos: [
{ id: 1, text: 'Learn Vuex', completed: false },
{ id: 2, text: 'Practice Vue.js', completed: true }
]
},
mutations: {
addTodo(state, todo) {
state.todos.push(todo);
},
toggleTodo(state, id) {
const todo = state.todos.find(todo => todo.id === id);
if (todo) {
todo.completed = !todo.completed;
}
}
},
actions: {
addTodo({ commit }, todo) {
commit('addTodo', todo);
},
toggleTodo({ commit }, id) {
commit('toggleTodo', id);
}
},
getters: {
allTodos: state => state.todos,
completedTodos: state => state.todos.filter(todo => todo.completed)
}
});
在Vue实例中引入store：
import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
el: '#app',
store,
render: h => h(App)
});
在组件中使用store：
<template>
<div id="app">
<ul>
<li v-for="todo in todos" @click="toggleTodo(todo.id)">
{{ todo.text }} - {{ todo.completed }}
</li>
<button @click="addTodo">Add Todo</button>
</ul>
</div>
</template>
<script>
export default {
computed: {
todos() {
return this.$store.getters.allTodos;
},
completedTodos() {
return this.$store.getters.completedTodos;
}
},
methods: {
addTodo() {
this.$store.dispatch('addTodo', { id: 3, text: 'New Todo', completed: false });
},
toggleTodo(id) {
this.$store.dispatch('toggleTodo', id);
}
}
};
</script>
``
总结：通过以上步骤，你已经掌握了Vue.js的基础知识，包括环境搭建、基础语法、组件、路由和状态管理。Vue.js的强大功能使得它成为构建高效、可维护的Web应用的首选框架。
-
Vue3入门：新手必读的简单教程11-21
-
Vue3教程：新手入门与基础详解11-21
-
Vue3资料入门教程：从零开始学习Vue3框架11-21
-
Vue3入门教程：从零开始搭建你的第一个Vue3项目11-19
-
vue2 开发移动端h5 使用那个ui框架比较好？-icode9专业技术文章分享11-19
-
ReactJS结合TypeScript、Vite、Redux和TanStack (React Query) 实战教程11-19
-
Vue3资料入门教程：零基础快速上手指南11-19
-
Vue3资料：新手入门教程与实战指南11-19
-
Vue资料：新手入门vue.js教程与实践指南11-19
-
Vue资料：初学者入门指南11-19
-
tcpdf可以等待vue动态页面加载完成后再生成pdf吗？-icode9专业技术文章分享11-18
-
Vue3资料：新手入门必读教程11-16
-
Vue3资料：新手入门全面指南11-16
-
Vue资料：新手入门完全指南11-16
-
Vue项目实战：新手入门指南11-16
