vue2 demo

作者：殇丶離別发布日期:2026-01-08 浏览:28

// Vue 2 示例代码

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

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

  // 数据对象
  data: {
    message: 'Hello Vue!'
  },

  // 方法对象
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

/*
解释说明：
1. 首先引入 Vue 库。
2. 使用 `new Vue()` 创建一个新的 Vue 实例。
3. `el` 属性指定该实例挂载到页面中的哪个元素，这里挂载到 id 为 'app' 的元素。
4. `data` 对象中定义了 `message` 变量，初始值为 'Hello Vue!'。
5. `methods` 对象中定义了一个 `reverseMessage` 方法，用于反转 `message` 字符串的内容。
6. 在 HTML 中可以通过 `{{ message }}` 来显示 `message` 的值，并且可以通过按钮点击触发 `reverseMessage` 方法来反转字符串。
*/

上一篇：html转vue工具

下一篇：vue 定义数组