Vue.js基础教学

最新推荐文章于 2024-08-15 12:28:07 发布

Astron-fjh

最新推荐文章于 2024-08-15 12:28:07 发布

阅读量266

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41399144/article/details/130185455

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇教程介绍了Vue.js的基础知识，包括安装VueCLI创建项目，运行开发服务器，以及Vue实例、数据绑定、指令、事件处理、计算属性的使用。通过创建一个Vue计数器工程，读者能掌握Vue.js的核心概念。

摘要由CSDN通过智能技术生成

Vue.js基础教学

Vue.js 是一款轻量级、易学的前端框架，它是用于构建用户界面的渐进式框架。在这篇教程中，我们将介绍 Vue.js 的基础概念，并通过实际示例来帮助你了解 JavaScript 语法。

在该教程的最后会完整地介绍如何搭建一个Vue地计数器工程。

1. 安装 Vue CLI

为了更好地管理项目结构和依赖，我们可以使用 Vue CLI（命令行工具）来创建一个 Vue 工程。首先，你需要**安装 Node.js**，然后使用 npm（Node.js 包管理器）全局安装 Vue CLI。在命令行中输入以下命令：

npm install -g @vue/cli

2. 创建 Vue 工程

安装完成后，你可以使用 vue create 命令来创建一个新的 Vue 工程：

vue create my-vue-app

在这个例子中，my-vue-app 是你的项目名称。命令执行后，你将看到一个交互式命令行界面，用于选择项目的预设配置。你可以选择默认的预设配置，也可以手动选择需要的特性。

3. 运行 Vue 工程

创建 Vue 工程后，进入项目文件夹：

cd my-vue-app

然后使用以下命令安装项目依赖：

npm install xxx

接下来，你可以运行以下命令启动开发服务器：

npm run serve

命令执行后，你将看到一个提示，告诉你在哪个地址和端口可以访问你的应用（通常是 http://localhost:8080/）。现在你可以在浏览器中访问这个地址，看到你的 Vue 应用正在运行。

4. Vue 实例

在引入 Vue.js 之后，我们需要创建一个 Vue 实例。Vue 实例是一个 JavaScript 对象，它包含了应用的数据、方法等属性。以下是一个简单的 Vue 实例：

// JavaScript 对象字面量语法，用于创建一个对象
var app = new Vue({
  el: '#app', // 指定 Vue 实例挂载的元素
  data: { // 声明应用的数据
    message: 'Hello, Vue.js!'
  }
});

在这个例子中，我们用一个对象字面量来创建 Vue 实例。对象字面量是用花括号 {} 包围的键值对集合。每个键值对用冒号（:）分隔，不同的键值对之间用逗号（,）分隔。

5. 数据绑定

Vue.js 提供了非常简洁的模板语法，可以方便地将数据绑定到 DOM。例如：

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

在这个例子中，我们使用双大括号 {{ }} 作为插值表达式，将 Vue 实例的 message 属性值插入到 DOM 中。

6. 指令

Vue.js 提供了一些特殊的属性，称为指令（Directives）。指令用于在 DOM 元素上添加特殊的行为。以下是一个使用 v-bind 指令的例子：

<div id="app">
  <h1 v-bind:title="message">{{ message }}</h1>
</div>

在这个例子中，我们使用 v-bind 指令将 Vue 实例的 message 属性值绑定到 h1 元素的 title 属性上。当鼠标悬停在这个元素上时，会显示 message 的内容。

7. 事件处理

在 Vue.js 中，我们可以使用 v-on 指令来监听 DOM 事件，例如点击事件。以下是一个简单的事件处理例子：

<div id="app">
  <button v-on:click="reverseMessage">Reverse Message</button>
  <h1>{{ message }}</h1>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  },
  methods: { // 定义 Vue 实例的方法
    reverseMessage: function () {
      // 使用 JavaScript 的字符串方法反转 message
      this.message = this.message.split('').reverse().join('');
    }
  }
});

在这个例子中，我们使用 v-on:click 指令监听按钮的点击事件，并在点击时调用 reverseMessage 方法。reverseMessage 方法将 message 字符串反转。

8. 计算属性

计算属性是一种依赖其他属性的值进行计算的属性。它们是 Vue.js 提供的一种优雅的处理方式，具有缓存功能，只有当依赖的值发生变化时，计算属性才会重新计算。以下是一个简单的计算属性示例：

<div id="app">
  <h1>{{ reversedMessage }}</h1>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  },
  computed: { // 定义计算属性
    reversedMessage: function () {
      // 使用 JavaScript 的字符串方法反转 message
      return this.message.split('').reverse().join('');
    }
  }
});

在这个例子中，我们使用计算属性 reversedMessage 来实现 message 的反转。与上一个例子中的方法不同，计算属性具有缓存功能，只有当 message 值发生变化时，计算属性才会重新计算。

9. 构建 Vue 工程

在开发完成后，你需要构建项目，生成可供生产环境部署的静态文件。运行以下命令：

npm run build

构建完成后，项目文件夹下会生成一个 dist 文件夹，其中包含了构建后的静态文件。你可以将这些文件部署到任何支持静态文件托管的服务器上。

10.创建一个Vue工程完整流程

在这里演示一个创建Vue工程的完整流程，作者使用的是Vue3。

现在一个文件夹中创建Vue工程，例如在vue文件夹中创建**（记得开启管理员模式）**：

E:\vue>vue create my-vue-app

之后你会在该文件夹底下发现一个my-vue-app的文件夹。

将文件夹中的一些文件进行修改，其中components/文件夹只保留MyCounter.vue文件。

文件结构

my-vue-app/
|-- public/
|   |-- index.html
|-- src/
|   |-- components/
|       |-- MyCounter.vue
|   |-- App.vue
|   |-- main.js

修改文件

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Counter App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

main.js

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");

App.vue

<template>
  <div id="app">
    <h1>Vue Counter App</h1>
    <MyCounter />
  </div>
</template>

<script>
import MyCounter from "./components/MyCounter.vue";

export default {
  name: "App",
  components: {
    MyCounter,
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>

MyCounter.vue

<template>
  <div class="my-counter">
    <h2>{{ count }}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
};
</script>

<style scoped>
.my-counter {
  display: inline-block;
}

button {
  margin: 0 5px;
}
</style>

修改完后保存工程，在.\vue\my-vue-app底下npm run serve，例如：

E:\vue\my-vue-app>npm run serve

出现以下内容说明搭建成功：

 DONE  Compiled successfully in 2671ms                                                                          17:39:34


  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run npm run build.

接下来浏览http://localhost:8080/网页即可。

效果如下：

在这里插入图片描述