vue js

作者：迷失未来发布日期:2025-05-12 浏览:24

// Vue.js 示例代码

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

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

  // 定义数据属性
  data: {
    message: 'Hello Vue!'
  },

  // 定义方法
  methods: {
    reverseMessage() {
      return this.message.split('').reverse().join('');
    }
  }
});

// HTML 部分
/*
<div id="app">
  <p>{{ message }}</p>
  <button @click="message = reverseMessage()">Reverse Message</button>
</div>
*/

// 解释说明：
// 1. `el` 属性指定了 Vue 实例将要挂载的 DOM 元素。
// 2. `data` 属性定义了组件的数据，这里是一个简单的字符串 `message`。
// 3. `methods` 属性定义了组件的方法，`reverseMessage` 方法用于反转字符串。
// 4. 在 HTML 中，使用双大括号 `{{ }}` 绑定数据，按钮点击事件通过 `@click` 绑定到方法上。

上一篇：vue component

下一篇：vue3 refs