Question

我正在使用代码键入器，但是由于某种原因，该元素变成了Null，没有理由我无法弄清楚。我是Vue的新手，并且知道我之前在Django / Python的https://CodeSpent.dev（实时预览）中完成了此代码的工作原理，直到我确定学习更多的前端框架很有用。

所以我相信这与Vue如何处理渲染有关，但是我只花了几个小时就学习了，甚至不知道在哪里看。

以下是代码：

  var codeBlock = document.getElementById('code')
  console.log(codeBlock)
  setTimeout(() => {

    new TypeIt(codeBlock, {
      strings: [codeSample],
      speed: 20
    }).go();

  }, 1000)

  setInterval(function () {

    const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python');
    document.getElementById('real-code').innerHTML = code;
  }, 10);

如果我们看一下控制台，我们可以在第23行看到codeBlock显然不是null，但是当我们尝试使用它时，它将变成null。有什么特别的吗？

完整组件：

<template>
  <div id="code-block" class="bb">
    <pre class="code-pre">
    <code id="real-code"></code>
  </pre>

    <div id="code" class="language-py"></div>
  </div>

</template>

<script>
  import 'prismjs'
  import 'prismjs/themes/prism.css'
  import TypeIt from 'typeit';

  export default {
    name: 'CodeTyper'
  }

  var codeSample = '\x0a\x3E\x3E\x20\x6E\x61\x6E\x6F\x20\x63\x6F\x64\x65\x73\x70\x65\x6E\x74\x2E\x70\x79\x0A\x66\x72\x6F\x6D\x20\x70\x79\x74\x68\x6F\x6E\x20\x69\x6D\x70\x6F\x72\x74\x20\x44\x65\x76\x65\x6C\x6F\x70\x65\x72\x0A\x66\x72\x6F\x6D\x20\x70\x6F\x72\x74\x66\x6F\x6C\x69\x6F\x2E\x6D\x6F\x64\x65\x6C\x73\x20\x69\x6D\x70\x6F\x72\x74\x20\x50\x6F\x72\x74\x66\x6F\x6C\x69\x6F\x0A\x0A\x63\x6C\x61\x73\x73\x20\x43\x6F\x64\x65\x53\x70\x65\x6E\x74\x28\x44\x65\x76\x65\x6C\x6F\x70\x65\x72\x29\x3A\x0A\x20\x20\x20\x20\x6E\x61\x6D\x65\x20\x3D\x20\x27\x50\x61\x74\x72\x69\x63\x6B\x20\x48\x61\x6E\x66\x6F\x72\x64\x27\x0A\x20\x20\x20\x20\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x20\x20\x3D\x20\x27\x50\x69\x74\x74\x73\x62\x75\x72\x67\x68\x2C\x20\x50\x41\x2C\x20\x55\x53\x27\x0A\x20\x20\x20\x20\x6C\x61\x6E\x67\x75\x61\x67\x65\x73\x20\x3D\x20\x5B\x27\x70\x79\x74\x68\x6F\x6E\x27\x2C\x20\x27\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x27\x2C\x20\x27\x63\x73\x73\x27\x2C\x27\x68\x74\x6D\x6C\x35\x27\x5D\x0A\x20\x20\x20\x20\x66\x61\x76\x6F\x72\x69\x74\x65\x73\x20\x3D\x20\x5B\x27\x64\x6A\x61\x6E\x67\x6F\x27\x2C\x20\x27\x74\x65\x6E\x73\x6F\x72\x66\x6C\x6F\x77\x27\x2C\x20\x27\x74\x77\x69\x74\x63\x68\x27\x2C\x20\x27\x64\x69\x73\x63\x6F\x72\x64\x27\x2C\x20\x27\x6F\x70\x65\x6E\x63\x76\x27\x5D\x0A\x0A\x20\x20\x20\x20\x64\x65\x66\x20\x5F\x5F\x73\x74\x72\x5F\x5F\x28\x73\x65\x6C\x66\x29\x3A\x0A\x20\x20\x20\x20\x20\x20\x72\x65\x74\x75\x72\x6E\x20\x73\x65\x6C\x66\x2E\x6E\x61\x6D\x65'
  var codeBlock = document.getElementById('code')
  console.log(codeBlock)
  setTimeout(() => {

    new TypeIt(codeBlock, {
      strings: [codeSample],
      speed: 20
    }).go();

  }, 1000)

  setInterval(function () {

    const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python');
    document.getElementById('real-code').innerHTML = code;
  }, 10);


</script>

<style>
  #real-code {
    color: #5c5edc;
  }

  #code-block {
  background-color: #141D22;
  color: #fff;
  flex: 1;
  height: 355px;
}

#code-block-sub {
  background-color: rgb(34, 32, 35);
  color: #fff;
  width: 100%;
  padding: 0 15px;
  height: 150px;
}

#code,
#code-sub {
  padding: 0px !important;
  margin: 0px !important;
  display: none;
  color: #fff !important;
}


</style>

Answer 1

首先是显示部分字符串的模板...

<template>
  <div>
    <pre>{{partialCode}}</pre>
    <v-btn @click="startAppending()"></v-btn>
  </div>
</template>

然后将partialCode字符串绑定到数据中...

export default {
  data () {
    return {
      partialCode: '',
      // other data
    }
  },

您可能想开始附加onCreate或其他生命周期挂钩（或一旦异步接收代码数据），但是逻辑的关键在于，您现在可以只更改partialCode的状态并让DOM更新自身。 ..

  methods: {
    startAppending() {
      this.partialCode = ''  // start fresh each time
      const code = Prism.highlight(codeBlock.innerText, Prism.languages.python, 'python')
      let index = 0
      let interval = setInterval(() => {
        if (this.partialCode.length === code.length) {
          clearInterval(interval)
        } else {
          this.partialCode = code.slice(0, index++)
        }
      }, 200);
    },
    // the other methods
  }

DOM元素在Vue项目中变为Null

1 个答案: