【前端】Vue：快速开始

下面将通过一个简单的教程，展示如何使用字节跳动的CDN加载Vue 3，并通过new Vue实例与HTML模板进行交互。我们会创建一个最基础的Vue.js应用，演示数据绑定、事件处理和响应式更新。

准备HTML文件

首先，你需要创建一个HTML文件，用于加载Vue.js库并编写Vue实例。这个文件可以命名为index.html。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js Demo</title>
</head>
<body>
  <!-- Vue app container -->
  <div id="app">
    <!-- 通过Vue绑定的内容 -->
    <h1>{{ message }}</h1>
    
    <!-- 点击按钮后会触发事件 -->
    <button @click="updateMessage">点击更新消息</button>
  </div>

  <!-- 加载Vue.js -->
  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"></script>
  <script>
    // 创建一个Vue实例
    const app = Vue.createApp({
      // 定义Vue实例的数据
      data() {
        return {
          message: 'Hello Vue!'
        }
      },
      // 定义方法，用于响应用户事件
      methods: {
        updateMessage() {
          this.message = '消息已更新！';
        }
      }
    });

    // 将Vue实例挂载到id为app的DOM元素上
    app.mount('#app');
  </script>
</body>
</html>

代码解释

HTML 模板

html 复制代码

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="updateMessage">点击更新消息</button>
</div>

id="app"：这是Vue应用程序将要挂载的容器，Vue会控制这个div及其内部元素。
{``{ message }}：这是Vue的模板语法 ，用于数据绑定。message是Vue实例中的一个数据属性，它的值会动态插入到HTML中。
@click="updateMessage"：这是Vue的事件绑定 语法，@click表示当用户点击按钮时，会调用updateMessage方法。

Vue实例

js 复制代码

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    updateMessage() {
      this.message = '消息已更新！';
    }
  }
});

Vue.createApp({...})：这是Vue 3中创建Vue实例的方式，传入一个对象用于定义应用的数据、方法等。
data() ：这是一个函数，返回Vue应用的响应式数据。在本例中，我们定义了一个message属性，初始值为"Hello Vue!"。
methods ：这是一个对象，用于存放Vue实例的方法。在本例中，我们定义了updateMessage方法，用于处理按钮点击事件，修改message的值。

挂载应用

js 复制代码

app.mount('#app');

mount('#app')：这一步是将Vue实例与页面上的#app元素进行关联（挂载），Vue将控制该元素中的内容，并将其变为响应式。

运行这个Demo

将上述代码保存为index.html。
打开该文件，你会看到页面展示"Hello Vue!"的文字，并且有一个按钮。
点击按钮后，message的值会被修改为"消息已更新！"，页面上的文字也会动态更新为"消息已更新！"，这展示了Vue.js的数据绑定 和事件处理功能。

理解Vue实例与HTML模板的交互

数据绑定 ：通过{``{ message }}，Vue将data函数中定义的message绑定到HTML模板。当message发生变化时，Vue会自动更新页面上显示的内容，这体现了Vue.js响应式数据的强大功能。
事件绑定 ：通过@click指令，我们将按钮的点击事件与updateMessage方法绑定。当用户点击按钮时，Vue调用这个方法，修改message的值，而页面的内容会自动更新，无需手动操作DOM。

总结

这个最简单的Vue.js应用展示了Vue实例的创建、数据绑定、事件处理和响应式更新的基本原理。通过Vue.createApp创建应用实例，并将其挂载到页面元素后，Vue会自动处理DOM操作，让我们可以专注于逻辑和数据的处理。

学习这个Demo，你应该已经掌握了Vue.js应用的基础架构，接下来可以进一步学习如何创建和管理更多的组件、路由、状态管理等。