vue+element

<template>
  <div id="app">
    <!-- 使用 Element UI 的按钮组件 -->
    <el-button @click="handleClick">点击我</el-button>
    <!-- 使用 Element UI 的输入框组件 -->
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      inputValue: '' // 绑定输入框的值
    };
  },
  methods: {
    handleClick() {
      // 按钮点击事件处理函数
      if (this.inputValue) {
        alert(`你输入的内容是：${this.inputValue}`);
      } else {
        alert('请输入内容');
      }
    }
  }
};
</script>

<style>
/* 引入 Element UI 的样式 */
@import '~element-ui/lib/theme-chalk/index.css';
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 el-button 和 el-input 两个 Element UI 的组件。
   • el-button 绑定了一个点击事件 @click="handleClick"，当用户点击按钮时会触发 handleClick 方法。
   • el-input 绑定了一个双向数据绑定 v-model="inputValue"，用于获取用户输入的内容。

2. 脚本部分 (<script>):

   • 定义了一个 Vue 组件，使用 data 函数返回一个对象，其中包含 inputValue 用于存储输入框的值。
   • methods 中定义了 handleClick 方法，当按钮被点击时会检查 inputValue 是否有值，并弹出相应的提示信息。

3. 样式部分 (<style>):

   • 引入了 Element UI 的默认样式文件，确保组件样式正常显示。