首页手记从零开始的Vue学习指南

从零开始的Vue学习指南

标签：

Vue.js

概述

本文详细介绍了如何开始Vue学习，从环境搭建到基础语法，组件化，路由与状态管理，再到实战项目部署与调试技巧，帮助开发者全面掌握Vue框架。文中涵盖了安装Node.js和Vue CLI、创建第一个Vue项目、基础语法与组件化、深入理解Vue的生命周期、路由和状态管理以及项目实战部署等内容，适合Vue学习者快速上手。

Vue简介与环境搭建

Vue 是一个渐进式 JavaScript 框架，它主要关注视图层，可与其他库或已有的项目整合。Vue 旨在通过尽可能简洁的 API 提供高效的数据绑定和组合的视图组件。Vue 由尤雨溪创建，最初设计目的在于减少复杂性，使开发者能够轻松地构建用户界面。Vue 拥有丰富的生态系统，包括但不限于 Vue Router、Vuex 和 Vue CLI，这些工具帮助开发者构建和维护大型应用。

安装Node.js和Vue CLI

要在本地开发 Vue 项目，您首先需要安装 Node.js 和 Vue CLI。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，Vue CLI 是 Vue.js 的官方脚手架，用于快速搭建 Vue 项目。

安装Node.js

您可以通过官方网站下载 Node.js 的最新版本，或者使用包管理器如 apt (Linux) 或 brew (MacOS) 安装。

通过官方网站下载 Node.js:

访问 Node.js 官方网站。
选择与您操作系统相匹配的安装包下载并安装。

通过包管理器安装 Node.js:

Linux (Ubuntu):

sudo apt update
sudo apt install nodejs -y
sudo apt install npm -y

MacOS:
```
brew install node
```

安装Vue CLI

安装 Node.js 后，需要安装 Vue CLI。您可以使用 npm 来安装 Vue CLI。

npm install -g @vue/cli

验证安装

安装完成后，可以在命令行中运行以下命令来验证是否安装成功。

vue -V

如果安装成功，它会输出当前 Vue CLI 的版本号。

创建第一个Vue项目

安装好 Vue CLI 后，可以使用它来创建第一个 Vue 项目。

创建项目

使用 Vue CLI 创建新项目时，您需要选择一个预设模板。这里我们使用 @vue/cli 的默认模板。

vue create my-project

在创建项目时，CLI 会询问您是否要使用默认配置或选择预设模板。选择默认配置即可。

cd my-project

运行项目

进入项目目录后，您可以通过以下命令启动开发服务器。

npm run serve

启动后，Vue CLI 会自动在浏览器中打开页面，并在命令行中显示开发服务器的 URL 地址，通常是 http://localhost:8080。

项目结构

my-project
├── node_modules
├── public
│   ├── index.html
├── src
│   ├── assets
│   ├── components
│   ├── App.vue
│   └── main.js
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package-lock.json
└── package.json

node_modules 包含项目依赖。
public 包含公共资源文件，如 index.html。
src 包含项目的源代码。
App.vue 是根组件。
main.js 是入口文件。

Vue的基础语法与组件化

Vue 的语法和组件化是其核心特性，让开发者能够高效地构建用户界面。

数据绑定与指令

Vue 通过双向绑定使数据变化自动反映到视图，反之亦然。Vue 的指令使开发者能够以简洁、直观的方式操作 DOM 元素。

v-model 指令

v-model 用于双向数据绑定，它作用于表单输入，自动将用户的输入转为对应的 JavaScript 数据类型。

示例代码：

<template>
  <div>
    <input v-model="message" placeholder="输入文字">
    <p>您输入的是: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

在这个示例中，v-model 绑定到 message 数据属性，输入框的内容会根据 message 的值自动更新。

v-if 和 v-for 指令

v-if 用于条件渲染，v-for 用于循环渲染。

示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Vue' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' }
      ]
    }
  }
}
</script>

在这个示例中，v-for 循环渲染 items 数组中的每一项。

v-bind 和 v-on 指令

v-bind 用于动态绑定属性，v-on 用于绑定事件处理函数。

示例代码：

<template>
  <div>
    <a v-bind:href="url">跳转到外部链接</a>
    <button v-on:click="handleClick">点击按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com'
    }
  },
  methods: {
    handleClick() {
      alert('按钮被点击了')
    }
  }
}
</script>

计算属性与方法

计算属性和方法都是在模板中访问的函数，它们可以用来处理复杂的逻辑，但它们的工作方式有所不同。

计算属性

计算属性是基于响应数据的表达式，当依赖的数据发生变化时，计算属性会自动重新计算。

示例代码：

<template>
  <div>
    <p>原始数据: {{ message }}</p>
    <p>计算后的数据: {{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

reversedMessage 计算属性基于 message 的值计算，并在 message 发生变化时自动更新。

方法

方法是一个普通的函数，通常用于处理复杂的逻辑，而不会直接绑定到数据。

示例代码：

<template>
  <div>
    <p>{{ reverseMessage }}</p>
    <button @click="reverseMessageFunction">反转文字</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    reverseMessageFunction() {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
</script>

reverseMessageFunction 方法在点击按钮时执行，改变 message 的值。

Vue组件的创建与使用

Vue 组件是可复用的 Vue 实例片段，有自己的模板、样式、数据、计算属性和方法。

创建组件

创建一个简单的组件 HelloWorld.vue。

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    title: String,
    message: String
  }
}
</script>

使用组件

在主应用中使用 HelloWorld 组件。

<template>
  <div id="app">
    <HelloWorld title="欢迎来到 Vue" message="这是一个简单的 Vue 组件示例" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

通过将 HelloWorld 组件注册到 components 对象中，然后在模板中使用 <HelloWorld /> 即可。

事件处理

组件可以接收外部传入的事件，并在内部处理这些事件。

示例代码：

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="handleClick">点击按钮</button>
  </div>
</template>

<script>
export default {
  name: 'EventComponent',
  props: {
    title: String
  },
  methods: {
    handleClick() {
      alert('按钮被点击了')
    }
  }
}
</script>

插槽（slot）

插槽允许父组件向子组件注入内容。

示例代码：

<template>
  <div>
    <slot></slot>
  </div>
</template>

在父组件中使用插槽：

<template>
  <div>
    <EventComponent>
      <p>这是插槽内容</p>
    </EventComponent>
  </div>
</template>

<script>
import EventComponent from './components/EventComponent.vue'

export default {
  name: 'App',
  components: {
    EventComponent
  }
}
</script>

深入理解Vue的生命周期

Vue 的生命周期是指组件从创建到销毁的过程。这个过程中，包含多个生命周期钩子，每个钩子代表了组件生命周期的一个特定阶段。

生命周期钩子的介绍

Vue 的生命周期钩子允许开发者在特定的时间点执行自定义逻辑。以下是一些常见的生命周期钩子：

创建阶段

beforeCreate: 实例初始化之前
created: 实例初始化之后，属性和方法还未挂载
beforeMount: 仅在被挂载之前调用一次
mounted: 被挂载之后调用，此时数据已被挂载到 DOM 上

更新阶段

beforeUpdate: 数据更新之前
updated: 数据更新之后，此时 DOM 已更新

销毁阶段

beforeDestroy: 即将销毁实例，视图还未移除
destroyed: 实例销毁后调用，调用后，Vue 中的实例的事件监听器和生命周期钩子都会被解绑和清除。

示例代码

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

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }
}
</script>

生命周期的应用场景

生命周期钩子可以用来执行一些特定的任务，比如在组件挂载前初始化数据，或者在组件销毁前清理一些资源。

示例代码

<template>
  <div id="app">
    <button @click="changeMessage">点击改变文字</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Vue 是一个很棒的框架'
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  }
}
</script>

在这个示例中，当点击按钮改变 message 的值时，beforeUpdate 和 updated 钩子会分别在更新前和更新后触发。

路由与状态管理

在大型 Vue 应用中，路由和状态管理是两个不可或缺的部分。它们可以让你更好地组织应用的结构和状态。

Vue Router的基本使用

Vue Router 是 Vue.js 的官方路由管理器，它提供了动态路由、导航守卫等功能。

创建并注册路由

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import User from './components/User.vue'

Vue.use(Router)

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

export default new Router({
  routes
})
</script>

导航和链接

可以通过 <router-link> 标签创建导航链接。

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/user/123">User 123</router-link>
    <router-view></router-view>
  </div>
</template>

路由守卫

路由守卫可以用来检查路由导航是否满足特定条件。

示例代码：

<script>
import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(Router)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About, beforeEnter: (to, from, next) => {
    if (to.path === '/about') {
      next()
    } else {
      next('/')
    }
  }}
]

export default new Router({
  routes
})
</script>

Vuex的状态管理入门

Vuex 是 Vue.js 的状态管理模式，它提供了集中化的状态管理，使得状态可以在多个组件之间共享。

安装 Vuex

首先安装 Vuex。

npm install vuex --save

创建 Store

创建一个 Vuex Store 来管理应用状态。

<script>
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
  }
})
</script>

在组件中使用 Store

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加计数</button>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

Vuex模块化

Vuex 的模块化允许将状态管理逻辑拆分到不同的模块中，便于维护。

示例代码：

<script>
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const moduleA = {
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    count: state => state.count
  }
}

export default new Vuex.Store({
  modules: {
    moduleA
  }
})
</script>

Vue项目实战

本节我们将通过创建一个简单的待办事项应用来演示 Vue 组件化和状态管理的实际应用。

创建简单的待办事项应用

应用结构

创建一个新项目，并将应用分为 TodoList.vue 和 TodoItem.vue 两个组件。

vue create todo-app
cd todo-app

TodoItem.vue

<template>
  <li>
    <input 
      type="checkbox" 
      v-model="checked"
      @change="toggleCompleted"
    >
    <span :class="{ completed: checked }">{{ text }}</span>
    <button @click="remove">删除</button>
  </li>
</template>

<script>
export default {
  props: {
    text: String,
    checked: Boolean
  },
  methods: {
    toggleCompleted() {
      this.$emit('toggle', this.checked)
    },
    remove() {
      this.$emit('remove')
    }
  }
}
</script>

TodoList.vue

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加一个待办事项" />
    <ul>
      <todo-item
        v-for="todo in todos"
        :key="todo.id"
        :text="todo.text"
        :checked="todo.completed"
        @remove="removeTodo(todo)"
        @toggle="toggleTodo(todo)"
      ></todo-item>
    </ul>
  </div>
</template>

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

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      newTodo: '',
      todos: [
        { id: 1, text: '学习 Vue.js', completed: false },
        { id: 2, text: '完成 Vue 项目', completed: false }
      ]
    }
  },
  methods: {
    addTodo() {
      this.todos.push({
        id: this.todos.length + 1,
        text: this.newTodo,
        completed: false
      })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(t => t.id !== todo.id)
    },
    toggleTodo(todo) {
      todo.completed = !todo.completed
    }
  }
}
</script>

在主应用中使用 `TodoList`

<template>
  <div id="app">
    <todo-list></todo-list>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'

export default {
  name: 'App',
  components: {
    TodoList
  }
}
</script>

使用组件和状态管理

使用 Vuex 来管理待办事项的状态。

<script>
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '学习 Vue.js', completed: false },
      { id: 2, text: '完成 Vue 项目', completed: false }
    ]
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo)
    },
    removeTodo(state, todo) {
      state.todos = state.todos.filter(t => t.id !== todo.id)
    },
    toggleTodo(state, todo) {
      todo.completed = !todo.completed
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('addTodo', todo)
    },
    removeTodo({ commit }, todo) {
      commit('removeTodo', todo)
    },
    toggleTodo({ commit }, todo) {
      commit('toggleTodo', todo)
    }
  },
  getters: {
    todos: state => state.todos
  }
})
</script>

更新 TodoList.vue 使用 Vuex。

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

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

Vue项目部署与调试技巧

部署 Vue 项目到生产环境需要遵循一些步骤和技巧。调试技巧则可以帮助您在开发和维护阶段发现并修复应用中的问题。

项目打包与部署

Vue CLI 提供了 npm run build 命令来打包项目，生成生产环境下的静态文件。

打包项目

npm run build

打包完成后，会在 dist 目录下生成静态文件。

部署

部署这些静态文件可以使用任何静态文件服务器，例如 Nginx 或 Apache。也可以使用 CDN 来部署。

使用 Nginx 部署

安装 Nginx。

在 Nginx 配置文件中添加一个新的 server 块，指向 dist 目录。

server {
 listen 80;
 server_name example.com;

 root /path/to/dist;
 index index.html;

 location / {
   try_files $uri /index.html;
 }
}

重启 Nginx 服务器。
```
sudo systemctl restart nginx
```

使用 GitHub Pages 部署

创建一个 GitHub 仓库。

将打包后的文件推送到仓库的 gh-pages 分支。

git add .
git commit -m "Initial commit"
git push -u origin master
git checkout -b gh-pages
git add .
git commit -m "Initial commit"
git push -u origin gh-pages

常见调试方法与技巧

开发者工具

浏览器开发者工具是调试 Vue 应用的利器。大多数现代浏览器都内置了开发者工具，可以用来查看和操作 DOM、检查网络请求和设置断点。

Vuex Devtools

Vuex Devtools 是一个用于调试 Vuex 状态的强大工具，您可以通过 Chrome 扩展或 NPM 包来安装它。

ESLint

ESLint 是一个静态代码分析工具，可以用来检查代码风格和潜在的错误。您可以通过 Vue CLI 自动安装 ESLint 来启用它。

vue create --default my-project

Vue Devtools

Vue Devtools 是一个浏览器扩展，提供了更深入的 Vue 组件和状态的调试功能。它可以在 Chrome 和 Firefox 中安装。

开发模式与生产模式

Vue CLI 会根据环境变量自动切换到开发模式或生产模式。开发模式会开启代码热重载和调试信息，生产模式会启用优化和压缩。

代码优化与性能测试

使用 Webpack 分析器（如 webpack-bundle-analyzer）来优化构建输出。
使用 Lighthouse 或其他性能测试工具来评估应用的性能。

示例代码

以下是一个简单的 Vue 组件调试示例。


<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'DebugExample',
  data() {
    return {
      message: '调试示例'
    }
  },
  created() {
    console.log('组件已创建')
  }
}
</script>
``

在开发过程中，利用这些工具和技巧可以更好地理解应用的行为和状态，从而帮助您构建更健壮和高效的 Vue 应用。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

潇潇雨雨

手记
篇

粉丝

25

获赞与收藏

130

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30809 345

网络编程入门教程

20个小节 12721 239

Pandas 入门教程

25个小节 18600 342

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

从零开始的Vue学习指南

安装Node.js

安装Vue CLI

验证安装

创建项目

运行项目

项目结构

v-model 指令

v-if 和 v-for 指令

v-bind 和 v-on 指令

计算属性

方法

创建组件

使用组件

事件处理

插槽（slot）

创建阶段

更新阶段

销毁阶段

示例代码

示例代码

创建并注册路由

导航和链接

路由守卫

安装 Vuex

创建 Store

在组件中使用 Store

Vuex模块化

应用结构

在主应用中使用 TodoList

使用组件和状态管理

打包项目

部署

使用 Nginx 部署

使用 GitHub Pages 部署

开发者工具

Vuex Devtools

ESLint

Vue Devtools

开发模式与生产模式

代码优化与性能测试

示例代码

阅读免费教程

在主应用中使用 `TodoList`