如何将我的 html 更改为 vue 组件？答案

【问题标题】：How could I change my html into a vue component?如何将我的 html 更改为 vue 组件？
【发布时间】：2021-12-18 08:42:36
【问题描述】：

我想在网页中查看一个tiff文件，我可以用test.html完成，但是我需要在一个vue文件中，我该怎么做？而且我不知道 tiff.js[![在此处输入图像描述][1]][1]

中的确切内容

<script src="./jquery-2.0.3.min.js"></script>
  <script src="./bootstrap.min.js"></script>
  <script src="./src/assets/js/tiff.js"></script>
  <script type="text/javascript">$(function () {
function show(file) {
  var reader = new FileReader();
  reader.onload = (function (theFile) {
    return function (e) {
      var buffer = e.target.result;
      var tiff = new Tiff({buffer: buffer});
      var canvas = tiff.toCanvas();
      var width = tiff.width();
      var height = tiff.height();
      if (canvas) {
        $('#output').empty().append(canvas);
      }
    };
  })(file);
  reader.readAsArrayBuffer(file);
}

$('#file').on('change', function (event) {
  show(event.target.files[0]);
});
});</script>

这就是我使用的脚本。

【问题讨论】：

对不起，我又编辑了，这是脚本，我想在我的 vue-cli 中使用它们，但我不知道如何使用它们
我认为你需要阅读 vue 并从那里开始。 vue 和 Jquery 是有区别的。
我不需要 Jquery，我只需要 tiff.js。

标签： javascript html vue.js

【解决方案1】：

您可以将 tiff.js 安装为 npm 库 npm i tiff https://www.npmjs.com/package/tiff

然后将tiff导入到App.vue例如，其他代码到mounted(){}。

您可以直接在 vue 模板上使用事件来代替 Jquery，或者使用 javascript 来查询元素。在 Vue 中使用 Jquery 是多余的 Ithink

【讨论】：