当前位置：首页 > article >正文

Vue.js入门

article 2025/2/21 3:06:20

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它可以帮助开发者更容易地创建交互式 Web 应用。Vue 的设计目标是尽可能简单，同时可以通过插件或其他库扩展到更复杂的项目。与 HTML、CSS、JavaScript 不同，Vue 更关注用户界面的数据驱动开发。

1. Vue.js 的核心特点

1.1 数据驱动

Vue 通过将数据与 DOM（页面元素）绑定，使得页面的更新可以与数据同步。

1.2 组件化开发

Vue 提供了组件系统，可以将页面分成独立的可复用组件，每个组件可以有自己独立的 HTML、CSS 和 JavaScript。

1.3 双向数据绑定

Vue 提供双向绑定机制，使得数据模型和视图始终保持同步。

2. Vue 基本概念

模板（Template）：类似 HTML 结构，用来定义页面的布局和内容。
数据（Data）：用于存储 Vue 实例中的状态，视图会根据数据的变化自动更新。
指令（Directives）：Vue 模板中的特殊标记，允许你对 DOM 元素进行动态操作（如 v-bind、v-for、v-if 等）。
事件处理：通过 v-on 指令监听用户交互事件，比如点击按钮、提交表单等。

3. 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

    <div id="app">
        <h1>{{ message }}</h1>
        <button @click="changeMessage">改变消息</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            },
            methods: {
                changeMessage() {
                    this.message = '你点击了按钮!';
                }
            }
        });
    </script>

</body>
</html>

3.1 代码解释

el: '#app'：Vue 实例挂载在页面上 id="app" 的元素上。
data：存储应用的数据，比如 message。
{{ message }}：使用 Mustache 语法绑定数据，显示在页面上。
@click="changeMessage"：监听按钮的点击事件，点击时执行 changeMessage 方法。
methods：定义操作数据的方法，比如 changeMessage，可以更改 message 的值。

3.2 Vue.js 的工作方式：

Vue 会自动监测 data 的变化，并自动更新页面上的视图。这就是所谓的 数据驱动视图。

4. .vue 文件结构

在实际开发中，Vue 通常使用 .vue 文件来组织代码，它由三部分组成：

<template>：HTML 模板部分。
<script>：JavaScript 逻辑部分。
<style>：样式部分。

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="updateTitle">点击我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '初始标题'
    };
  },
  methods: {
    updateTitle() {
      this.title = '你点击了按钮!';
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>