PROSAGA码农传奇-Vue-将vue 1迁移到vue 2

将vue 1迁移到vue 2

作者: 甲基蓝
发布时间: 2024-09-10 07:37:54 (12天前)
转自：

<div class =“post-text”itemprop =“text”>
  <P>
    我的猜测是
     <code>
      <div id="slider">
    </code>
     一旦Vue编译完整模板并自行渲染（在安装之后），模板中的模板将被替换为不同的元素实例。我的意思是，在
     <code>
      mounted
    </code>
     钩，
     <code>
      this.Slider
    </code>
     和
     <code>
      document.getElementById('slider')
    </code>
     不再引用相同的元素（
     <code>
      this.Slider
    </code>
     从DOM中删除）。
  </p>
  <P>
    可能没有理由
     <code>
      Slider
    </code>
     在...内定义
     <code>
      data
    </code>
     阻止（它不需要被动反应），只需将其初始化即可
     <code>
      mounted
    </code>
     钩而不是：
  </p>
   <pre class="lang-js prettyprint-override">
    <code>
      mounted() {
  this.Slider = document.getElementById('slider')
  noUiSlider.create(this.Slider, ...)
}

</code>
  </pre>
  <P>
    实际上，更好的方法是使用
     <code>
      ref
    </code>
     获取元素的实例而不是查询DOM：
  </p>
   <pre class="lang-vue prettyprint-override">
    <code>
      <div ref="slider"></div>

</code>
  </pre>
   <pre class="lang-js prettyprint-override">
    <code>
      mounted() {
  noUiSlider.create(this.$refs.slider, ...)
}

</code>
  </pre>
</DIV>