首页手记 Vue教程：初学者必备的Vue.js入门指南

Vue教程：初学者必备的Vue.js入门指南

标签：

Vue.js

概述

本文详细介绍了Vue.js的基础知识和高级特性，包括数据绑定、组件开发、路由和状态管理。通过构建一个简单的待办事项应用，展示了Vue.js在实际项目中的应用，并对组件开发、路由配置和状态管理提供了详尽的指导。希望读者能够通过本文掌握Vue.js的基本用法，为开发更复杂的Vue应用打下坚实基础。

Vue.js简介

什么是Vue.js

Vue.js 是一个渐进式前端框架，专注于构建用户界面，提供极简的基础构建块，使得开发者可以简单而高效地构建复杂的单页应用。Vue.js 轻量、灵活、易于上手，具备处理大型应用所需的生态系统功能。

Vue.js 的核心库专注于视图层，易于与其它库或已有项目整合，体积小，只有20KB。可以直接在浏览器中运行，无需编译步骤，虽然推荐搭配现代工具链（如Webpack或Rollup）使用，但不需要任何构建配置。

Vue.js的特点和优势

主要特点

声明式渲染：Vue.js 使用基于HTML的模板语法，使开发者专注于数据而非DOM更新。
组件系统：组件化开发使应用结构清晰，便于代码复用。开发者可以将复杂应用分解为小块，每个块代表一个组件。
虚拟DOM：Vue.js 使用虚拟DOM，减少直接操作DOM的频率，提高性能。
响应式系统：数据驱动的视图更新，通过改变数据，视图会自动更新。
插件生态系统：丰富的插件生态系统，方便开发者获取各种工具和库。

优势

易于学习：Vue.js 的语法简单直观，对于熟悉HTML和JavaScript的开发者来说，学习成本低。
灵活：Vue.js 可逐步集成到现有项目中，无需重写整个应用，可以按需使用。
高性能：Vue.js 使用虚拟DOM，优化DOM操作，提高应用性能。

安装和配置Vue.js开发环境

步骤一：安装Node.js和npm

首先，确保已安装Node.js和npm。可以通过Node.js官网下载对应版本的安装包，安装完成后，可以通过命令行检查安装是否成功：

node -v
npm -v

步骤二：创建Vue.js项目

通过Vue CLI（Vue Command Line Interface）可以非常方便地创建Vue.js项目。首先，安装Vue CLI：

npm install -g @vue/cli

接下来，使用Vue CLI创建一个新项目：

vue create my-project

其中，my-project 是项目的名称，可以自定义。

步骤三：运行项目

创建完项目后，可以进入到项目目录，并运行项目：

cd my-project
npm run serve

以上步骤会编译构建项目，并启动一个开发服务器。默认情况下，应用会在http://localhost:8080/运行。

步骤四：项目结构理解

my-project/
  public/
  src/
    assets/
    components/
    App.vue
    main.js
    router/
    store/
  babel.config.js
  package.json
  vue.config.js

public/：存放静态文件，如index.html。
src/：存放项目源代码。
App.vue：应用的根组件。
main.js：应用的入口文件，负责创建Vue应用实例。
router/：存放Vue Router配置文件。
store/：存放Vuex状态管理配置文件。
babel.config.js：Babel的配置文件，用来转换ES6+代码。
package.json：项目配置文件，包含依赖、脚本等信息。
vue.config.js：Vue CLI的配置文件，用于配置构建选项。

Vue.js的基本语法

数据绑定

Vue.js 通过双向数据绑定和计算属性实现数据驱动的视图更新。数据绑定是Vue.js的核心功能之一。

通过v-model实现双向数据绑定

<input v-model="message" placeholder="edit me">
<p>{{ message }}</p>

new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

通过v-bind实现单向数据绑定

<div v-bind:title="message">
  鼠标悬停显示消息
</div>

new Vue({
  el: '#app',
  data: {
    message: '这是一条消息'
  }
})

计算属性和方法

计算属性

计算属性是基于数据依赖的响应式计算，如果依赖的数据发生变化，计算属性会自动重新计算。计算属性采用getter函数和setter函数。

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

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

方法

方法不是基于数据依赖的响应式计算，而是普通的JavaScript函数。如果需要执行副作用或执行计算逻辑，使用方法而非计算属性更为合适。

<div id="app">
  {{ greet() }}
</div>

new Vue({
  el: '#app',
  methods: {
    greet: function () {
      return 'Hello, ' + this.firstName + ' ' + this.lastName
    }
  },
  data: {
    firstName: 'John',
    lastName: 'Doe'
  }
})

指令和过滤器

指令

指令是Vue.js用来操作DOM的特殊属性，以v-开头。常用指令包括v-if、v-show、v-for、v-bind等。

<div v-if="show">显示内容</div>
<div v-show="show">隐藏内容</div>

new Vue({
  el: '#app',
  data: {
    show: true
  }
})

过滤器

过滤器允许自定义文本过滤逻辑，主要用在双花括号插值和v-bind绑定的属性上。

<p>{{ message | reverse }}</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  filters: {
    reverse: function (value) {
      return value.split('').reverse().join('')
    }
  }
})

事件处理

Vue.js提供了多种事件指令，如v-on，用于监听DOM事件。

<button v-on:click="increment">增加</button>

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function () {
      this.count++
    }
  }
})

Vue.js组件开发

组件的基本概念

Vue.js通过组件将复杂应用分解为小块，每个组件都有自己的状态逻辑。组件是可重用的Vue实例片段，负责渲染自身和管理自身数据变化。

创建组件

组件定义包括template、data、methods、computed等选项。

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

<script>
Vue.component('my-component', {
  template: '#my-component-template',
  data: function () {
    return {
      message: '这是一条消息'
    }
  }
})
</script>

<template id="my-component-template">
  <div>
    {{ message }}
  </div>
</template>

<div id="app"></div>

<script>
new Vue({
  el: '#app',
  template: '#app-template'
})
</script>

创建和使用组件

组件在Vue中以Vue.component的形式注册，可以全局注册，也可以局部注册。

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

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: '这是一条消息'
    }
  }
})

new Vue({
  el: '#app'
})

传递数据给组件（Props）

组件可以通过props接收父组件传递的数据。

<div id="app">
  <my-component message="Hello"></my-component>
</div>

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  props: ['message']
})

new Vue({
  el: '#app'
})

注册全局和局部组件

全局组件

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: '这是一条消息'
    }
  }
})

new Vue({
  el: '#app'
})

局部组件

<div id="app">
  <my-component message="Hello"></my-component>
</div>

new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: '<div>{{ message }}</div>',
      props: ['message']
    }
  }
})

Vue.js路由和状态管理

使用Vue Router实现页面导航

Vue Router是Vue.js官方的路由管理工具，不仅支持基于组件的路由配置，还允许动态重用组件，实现页面导航。

安装Vue Router

npm install vue-router

基本用法

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

<div id="app">
  <router-link to="/">主页</router-link>
  <router-link to="/about">关于</router-link>
  <router-view />
</div>

动态路由

Vue.use(VueRouter)

const routes = [
  { path: '/user/:id', component: User }
]

const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

<div id="app">
  <router-link v-for="user in users" :to="'/user/' + user.id">
    {{ user.name }}
  </router-link>
  <router-view />
</div>

Vuex的安装和基本用法

Vuex 是Vue.js的核心状态管理模式。它是一个专为Vue.js应用开发的状态管理模式，并且尝试以最简单的方式实现。

安装Vuex

npm install vuex

基本用法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

<div id="app">
  <button @click="increment">增加</button>
  <p>{{ store.state.count }}</p>
</div>

使用Getter

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

<div id="app">
  <p>{{ store.getters.doubleCount }}</p>
</div>

使用Action

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

<div id="app">
  <button @click="increment">增加</button>
  <p>{{ store.state.count }}</p>
</div>

状态管理的基本概念和实践

状态管理的核心在于分离状态逻辑与视图逻辑，以提高代码的可维护性和复用性。在大型应用中，状态管理能够更好地管理全局状态，确保状态更新的一致性和高效性。

状态管理的实践

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment ({ commit }) {
      commit('increment')
    }
  }
})

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

<div id="app">
  <button @click="increment">增加</button>
  <p>{{ store.state.count }}</p>
</div>

Vue.js的条件渲染和循环

使用v-if和v-show指令

v-if

v-if是条件渲染指令，仅当条件为真时才渲染元素。

<div id="app">
  <div v-if="seen">我现在见了</div>
</div>

new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

v-show

v-show同样是条件渲染指令，但不会销毁元素，而是通过CSS的display属性控制元素的显示和隐藏。

<div id="app">
  <div v-show="seen">我现在见了</div>
</div>

new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

v-for指令的使用

v-for用于循环渲染一组元素，可以结合v-bind和v-on使用。

<div id="app">
  <div v-for="item in items" :key="item.id">
    {{ item.message }}
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, message: '第一条消息' },
      { id: 2, message: '第二条消息' }
    ]
  }
})

条件渲染的高级用法

v-else和v-else-if

v-else和v-else-if可以在v-if和v-show指令后使用，用于实现更复杂的条件渲染逻辑。

<div id="app">
  <div v-if="type === 'A'">A</div>
  <div v-else-if="type === 'B'">B</div>
  <div v-else>C</div>
</div>

new Vue({
  el: '#app',
  data: {
    type: 'B'
  }
})

v-if和v-for组合使用

v-if和v-for组合使用时，优先计算v-for。需要注意的是，这种组合可能会影响性能，因此尽量避免。

<div id="app">
  <div v-for="item in items" v-if="item.isActive">
    {{ item.message }}
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, message: '第一条消息', isActive: true },
      { id: 2, message: '第二条消息', isActive: false }
    ]
  }
})

实战项目

构建一个简单的待办事项应用

项目结构

my-todo-app/
  public/
  src/
    assets/
    components/
      TodoItem.vue
      AddTodo.vue
    App.vue
    main.js
    router/
    store/
  babel.config.js
  package.json
  vue.config.js

TodoItem.vue

<template>
  <div class="todo-item">
    <input type="checkbox" v-model="done" />
    <span :class="{ done: done }">{{ todo.text }}</span>
    <button @click="removeTodo">删除</button>
  </div>
</template>

<script>
export default {
  props: ['todo'],
  data() {
    return {
      done: this.todo.done
    }
  },
  methods: {
    removeTodo() {
      this.$emit('remove', this.todo.id)
    }
  }
}
</script>

<style scoped>
.done {
  text-decoration: line-through;
}
</style>

AddTodo.vue

<template>
  <div class="add-todo">
    <input v-model="newTodo" @keyup.enter="addTodo" />
    <button @click="addTodo">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() === '') {
        return
      }
      this.$emit('add', this.newTodo)
      this.newTodo = ''
    }
  }
}
</script>

<style scoped>
.add-todo {
  margin-top: 10px;
}
</style>

App.vue

<template>
  <div id="app">
    <h1>待办事项应用</h1>
    <add-todo @add="addTodo" />
    <ul>
      <todo-item
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @remove="removeTodo"
      />
    </ul>
    <p>完成的任务数: {{ completedTodosCount }}</p>
  </div>
</template>

<script>
import AddTodo from './components/AddTodo.vue'
import TodoItem from './components/TodoItem.vue'

export default {
  components: {
    AddTodo,
    TodoItem
  },
  data() {
    return {
      todos: [
        { id: 1, text: '学习Vue.js', done: false },
        { id: 2, text: '构建Vue应用', done: false }
      ]
    }
  },
  computed: {
    completedTodosCount() {
      return this.todos.filter(todo => todo.done).length
    }
  },
  methods: {
    addTodo(newTodo) {
      this.todos.push({
        id: this.todos.length + 1,
        text: newTodo,
        done: false
      })
    },
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.todo-item {
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.todo-item input {
  margin-right: 10px;
}

.add-todo input {
  margin-right: 10px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

使用Vue Router和Vuex优化应用

集成Vue Router

import Vue from 'vue'
import VueRouter from 'vue-router'
import Todos from './components/Todos.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Todos },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

export default router

集成Vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '学习Vue.js', done: false },
      { id: 2, text: '构建Vue应用', done: false }
    ]
  },
  mutations: {
    addTodo(state, newTodo) {
      state.todos.push({
        id: state.todos.length + 1,
        text: newTodo,
        done: false
      })
    },
    removeTodo(state, id) {
      state.todos = state.todos.filter(todo => todo.id !== id)
    }
  },
  getters: {
    completedTodosCount: state => {
      return state.todos.filter(todo => todo.done).length
    }
  }
})

Todos.vue

<template>
  <div id="app">
    <add-todo @add="addTodo" />
    <ul>
      <todo-item
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @remove="removeTodo"
      />
    </ul>
    <p>完成的任务数: {{ completedTodosCount }}</p>
  </div>
</template>

<script>
import AddTodo from './AddTodo.vue'
import TodoItem from './TodoItem.vue'
import { mapGetters, mapActions } from 'vuex'

export default {
  components: {
    AddTodo,
    TodoItem
  },
  computed: {
    ...mapGetters(['todos', 'completedTodosCount'])
  },
  methods: {
    ...mapActions(['addTodo', 'removeTodo'])
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.todo-item {
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.todo-item input {
  margin-right: 10px;
}

.add-todo input {
  margin-right: 10px;
}
</style>

项目部署和调试技巧

项目部署

使用Vue CLI构建和部署Vue应用：

vue-cli-service build

生成的静态文件位于dist目录中，可以将其部署到任何静态文件服务器，如Nginx、Apache等。

调试技巧

使用Vue Devtools插件进行调试。
通过浏览器开发者工具查看网络请求和DOM元素。
使用console.log输出调试信息。

总结

本文介绍了Vue.js的基础知识和高级特性，包括数据绑定、组件开发、路由和状态管理等。通过构建一个简单的待办事项应用，展示了Vue.js在实际项目中的应用。希望读者能够通过本文掌握Vue.js的基本用法，并为开发更复杂的Vue应用打下坚实基础。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

翻过高山走不出你

手记
篇

粉丝

31

获赞与收藏

67

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30948 346

网络编程入门教程

20个小节 12735 240

Pandas 入门教程

25个小节 18632 342

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue教程：初学者必备的Vue.js入门指南

主要特点

优势

步骤一：安装Node.js和npm

步骤二：创建Vue.js项目

步骤三：运行项目

步骤四：项目结构理解

通过v-model实现双向数据绑定

通过v-bind实现单向数据绑定

计算属性

方法

指令

过滤器

创建组件

全局组件

局部组件

安装Vue Router

基本用法

动态路由

安装Vuex

基本用法

使用Getter

使用Action

状态管理的实践

v-if

v-show

v-else和v-else-if

v-if和v-for组合使用

项目结构

TodoItem.vue

AddTodo.vue

App.vue

main.js

集成Vue Router

集成Vuex

Todos.vue

项目部署

调试技巧

阅读免费教程