Vue学习

刘志辉

已于 2024-10-11 17:39:50 修改

阅读量559

点赞数 3

文章标签： vue.js 前端

于 2024-09-12 11:08:05 首次发布

本文链接：https://blog.csdn.net/weixin_58462329/article/details/142170037

版权

什么是Vue.js？

Vue.js（通常简称为Vue）是一个渐进式JavaScript框架，用于构建用户界面和单页应用程序（SPA）。它的设计目标是通过简单易用的API和灵活的架构，使得开发者能够快速上手并高效地构建复杂的Web应用。

安装Vue.js

在开始之前，你需要先安装Vue.js。你可以通过多种方式来安装Vue.js，包括使用npm包管理器或者直接在HTML文件中引入CDN链接。

使用npm安装

如果你已经安装了Node.js和npm，可以通过以下命令来安装Vue.js：

npm install vue

使用CDN引入

如果你不想使用npm，也可以直接在HTML文件中通过CDN引入Vue.js：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js入门</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          message: 'Hello, Vue!'
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

创建第一个Vue应用

现在我们已经安装了Vue.js，接下来我们将创建一个简单的Vue应用。这个应用将显示一条欢迎信息，并且允许我们通过按钮来改变这条信息。

HTML部分

首先，我们需要一个HTML文件来承载我们的Vue应用：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js入门</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>

  <script src="app.js"></script>
</body>
</html>

JavaScript部分

接下来，我们需要编写JavaScript代码来定义Vue应用的状态和行为：

// app.js
const { createApp } = Vue;

createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Message changed!';
    }
  }
}).mount('#app');

在这个例子中，我们定义了一个data属性来存储消息，并且定义了一个methods对象来包含我们的方法。changeMessage方法会在按钮被点击时调用，并改变message的值。