一、Vue 简介

二、环境搭建

1. 安装 Node.js

Vue.js 需要 Node.js 环境来运行。你可以从 Node.js 官方网站下载并安装适合你操作系统的版本。

2. 安装 Vue CLI

Vue CLI 是一个官方提供的命令行工具，用于快速搭建 Vue 项目。打开终端并运行以下命令来安装 Vue CLI：

npm install -g @vue/cli

三、创建第一个 Vue 项目

1. 使用 Vue CLI 创建项目

在终端中运行以下命令来创建一个新的 Vue 项目：

vue create my-vue-project

按照提示选择项目的配置选项，如使用 Vue 2 还是 Vue 3、是否安装路由和状态管理等。

2. 项目结构

创建完成后，进入项目目录，可以看到以下主要的文件和目录：

  • src/：项目的源代码目录。
  • main.js：入口文件，用于创建 Vue 实例。
  • App.vue：根组件文件。
  • package.json：项目的配置文件。

四、Vue 新模板的实用技巧

1. 插值表达式

插值表达式是 Vue 模板中最常用的功能之一，它允许我们在模板中插入数据。例如：

<div>{{ message }}</div>

2. 指令

Vue 提供了一系列指令，用于在模板中绑定数据、事件等。以下是一些常用的指令：

（1）v-bind 和 v-model

  • v-bind：用于绑定属性，例如：
<div v-bind:title="title">Hover over me</div>
  • v-model：用于创建双向数据绑定，常用于表单元素，例如：
<input v-model="message">

（2）v-on

  • v-on：用于绑定事件，例如：
<button v-on:click="reverseMessage">Reverse Message</button>

（3）v-if/v-else 和 v-show

  • v-if：条件渲染元素，当条件为真时渲染元素，否则不渲染。
  • v-else：与 v-if 配合使用，当 v-if 的条件为假时渲染元素。
  • v-show：条件切换元素的显示与隐藏，但不会重新渲染元素。

（4）v-for

  • v-for：用于遍历数组或对象，例如：
<ul>
  <li v-for="item in items">{{ item.text }}</li>
</ul>

3. Vue 指令的案例练习

以下是一个使用 Vue 指令的简单示例：

<div id="app">
  <h1>{{ message }}</h1>
  <button v-on:click="reverseMessage">Reverse Message</button>
  <p v-if="seen">Now you see me</p>
  <p v-else>Now you don't see me</p>
  <input v-model="message">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    seen: true
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('');
    }
  }
});
</script>

五、Vue 生命周期

Vue 实例在其整个生命周期中会经历一系列的钩子函数，这些钩子函数允许你在特定的时间点执行一些操作。以下是一些常用的生命周期钩子：

  • created：在实例创建完成后被立即调用。
  • mounted：在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
  • beforeDestroy：在实例销毁之前调用。

六、小结

本文介绍了 Vue 的基本概念、环境搭建、项目结构、新模板的实用技巧以及生命周期。通过学习本文，你将能够快速掌握 Vue 的基础知识，为后续的学习打下坚实的基础。