vuejs 实例 - 我可以<template>在标签外有标记<script>吗？

Question

我在.vue文件中具有以下代码：

<template>
   <p>hello search</p>
</template>
<script>
import Vue from 'vue';
var vm = new Vue({
  el: '#js-quick-search'
})
</script>

，在我的.html中，我有一个vue实例的元素

<div id="js-quick-search"></div>

但是，模板部分被完全忽略。如何将其连接到实例而不将其添加到脚本标签中？

基本上我想实现与此相同的事情：

<script>
import Vue from 'vue';
var vm = new Vue({
  el: '#js-quick-search',
  template: '<p>whatever</p>'
})
</script>

但是脚本中没有硬编码模板。

Answer 1

script标签内的标记是错误的。要创建模板，您必须像这样导出script：

<template>
  <div class="MyTemplate">
    Your template
  </div>
</template>
<script>
export default {
  name: "MyTemplate"
}
</script>

然后使用模板，只需将其导入（import MyTemplate from './MyTemplate.vue'），然后将其添加到您的组件（components: { MyTemplate }），然后将其放入为<myTemplate>）