桃宝护卫队 2023-05-26 14:08 采纳率: 75%
浏览 38
已结题

如何直接在html中使用vue，就是说不做工程化

如何直接在html中使用vue，就是说不做工程化
以下再一个html

<div id="app">
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
    <el-button type="primary" @click="handleClick">点击</el-button>
    <p>{{message}}</p>
  </div>
  • 写回答

1条回答 默认 最新

  • usp1994 2023-05-26 14:17
    关注

    以下代码保存到html文件中，直接执行应该就是你要的了

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue2+ElementUI Demo</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
    <el-button type="primary" @click="handleClick">点击</el-button>
    <p>{{message}}</p>
  </div>
  <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        inputValue: '',
        message: ''
      },
      methods: {
        handleClick() {
          this.message = '你输入的内容是：' + this.inputValue
        }
      }
    })
  </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 6月3日
  • 已采纳回答 5月26日
  • 创建了问题 5月26日

悬赏问题

  • ¥20 关于web前端如何播放二次加密m3u8视频的问题
  • ¥20 spring boot集成mqtt的使用问题
  • ¥15 使用百度地图api 位置函数报错？
  • ¥15 metamask如何添加TRON自定义网络
  • ¥66 关于川崎机器人调速问题
  • ¥15 winFrom界面无法打开
  • ¥30 crossover21 ARM64版本安装软件问题
  • ¥15 mymetaobjecthandler没有进入
  • ¥15 mmo能不能做客户端怪物
  • ¥15 osm下载到arcgis出错