使用通用javascript时无法访问Vue组件中的DOM元素

我正在尝试在Webpack项目上使用jQuery方式动态更新Vue.compent中的数据。下面是代码片段

<template>
    <div id="container">
        <slot>show string!!</slot>
        <div id="s_container"></div>
    </div>
</template>

<script>
export default {

}

const items = [
  'thingie',
  'anotehr thingie',
  'lots of stuff',
  'yadda yadda'
]

function listOfStuff () {
  let full_list = ''

  for (let i = 0; i < items.length; i++) {
    full_list = full_list + '<li>{{items[i]}}</li>'
  }
  //  const contain = document.querySelector('#s_container')
  const contain = this.$el.querySelector('#s_container')
  if (contain != null) { 
      contain.innerHTML = '<ul ${full_list} </ul>' 
  } else {
     console.log('contain is null');
  }
}
listOfStuff()
</script>

显示字符串！！
导出默认值{
}
常数项=[
“thingie”，
“anotehr thingie”，
“很多东西”，
“雅达雅达”
]
函数listOfStuff（）{
让完整列表=“”
for（设i=0；i{{items[i]}'
}
//const contain=document.querySelector（“#s#u container”）
const contain=this.$el.querySelector（“#s#u container”）
如果（包含！=null）{
contain.innerHTML='首先需要将items数组绑定到如下数据返回函数中：

export default {
 data()
  return {
   items: ['thingie', 'yadda yadda']
  }
}

然后，您可以使用v-for循环将此数组显示为HTML li。
在模板中输入以下内容：

<template>
  <div>
   <ul>
     <li v-for="(item, index) in items" :key=index>
      {{ item }}
     </li>
   </ul>
  </div>
</template>




{{item}}



通过这种方式，您可以使用vue.js呈现一个简单的列表，如果您需要有关此功能的更多信息，请阅读本部分文档：

祝您一天愉快！
很好的第一个答案Jérémy。欢迎使用SO！感谢您的快速回复，但是，如果我想使用，ex，jQuery方式完成同样的事情……我应该如何正确获取DOM元素>