前端框架vue

作者：以往沧海发布日期:2025-12-13 浏览:93

// Vue.js 示例代码

// 引入 Vue 库
import Vue from 'vue';

// 创建一个 Vue 实例
new Vue({
  // 挂载的 DOM 元素
  el: '#app',

  // 组件的数据
  data: {
    message: 'Hello Vue!'
  },

  // 方法集合
  methods: {
    greet: function() {
      alert(this.message);
    }
  }
});

// HTML 部分
/*
<div id="app">
  <p>{{ message }}</p>
  <button @click="greet">点击我</button>
</div>
*/

// 解释说明：
// 1. `el: '#app'` 表示将 Vue 实例挂载到具有 id 为 'app' 的 DOM 元素上。
// 2. `data` 包含了组件的状态，这里是一个简单的字符串 `message`。
// 3. `methods` 定义了可以在模板中调用的方法，例如 `greet` 方法会在按钮点击时触发，并弹出一个包含 `message` 内容的警告框。
// 4. 在 HTML 中，使用双大括号 `{{ message }}` 来绑定数据，使用 `@click` 指令来绑定事件处理函数。

上一篇：vue 树形组件

下一篇：vue createapp