如果我理解您的问题，您肯定想用 HTML 制作单个文件组件。
如果是这种情况，您应该使用 render() 函数和常规组件。
render 函数决定使用什么作为组件的模板：
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
render (createElement) {
return createElement({
template: '<div>Hello World</div>'
})
},
})
</script>
</body>
</html>
将Hello World 渲染到屏幕上。
现在，让我们看看这个函数是如何反应的：
<script type="text/javascript">
new Vue({
el: '#app',
data: {
count: 0
},
render (createElement) {
return createElement({
template: '<div>Hello World ' + this.count + '</div>'
})
},
created () {
setTimeout(() => {
this.count++
}, 2000)
}
})
</script>
这里，2 秒后，<div>Hello World ' + this.count + '</div> 中的计数器将从 0 递增到 1。
现在，如果我们想将模板与数据分开怎么办？
<script type="text/javascript">
new Vue({
el: '#app',
render (createElement) {
return createElement({
template: '<div>Hello World {{ count }}</div>',
data () {
return {foo: 'bar'}
}
})
}
})
</script>
此代码将显示Hello World bar。
现在，让我们看看如果我们尝试通过 http 加载模板会发生什么。我们将使用axios 库来执行此操作。让我们创建一个 remote.html 文件来包含我们的 html 代码：
<div>
I'm a remote component {{ foo }}
</div>
现在，让我们尝试通过 Ajax 加载它：
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
template: null
},
render (createElement) {
return createElement({
template: this.template ? this.template : '<div>Hello World {{ foo }}</div>',
data () {
return {foo: 'bar'}
}
})
},
created () {
axios({
url: '/remote.html',
method: 'get'
}).then(response => {
this.template = response.data
})
}
})
</script>
从浏览器加载remote.html 后，此代码将立即显示I'm a remote component {{ foo }}。
请注意，传递给 createElement 函数的对象实际上是一个组件结构。你可以对它使用相同的方法：
render (createElement) {
return createElement({
template: this.template ? this.template : '<div>Hello World {{ foo }}</div>',
data () {
return {foo: 'bar'}
},
mounted () {
alert('Hello from mounted')
}
})
}
会在浏览器上触发alert。
无论如何，这是一个包含嵌套组件的完整示例：
索引.html
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script type="text/javascript">
const headerComponent = {
data () {
return {
template: '<div>Loading...</div>'
}
},
render (createElement) {
return createElement({
template: this.template,
data () {
return {
search: ''
}
}
})
},
created () {
axios('/header.html').then(response => {
this.template = response.data
})
}
}
new Vue({
el: '#app',
data: {
template: null
},
render (createElement) {
return createElement({
template: this.template ? this.template : 'Loading...',
data () {
return {foo: 'bar'}
},
components: {
'my-header': headerComponent
}
})
},
created () {
axios({
url: '/remote.html',
method: 'get'
}).then(response => {
this.template = response.data
})
}
})
</script>
</body>
</html>
header.html
<div>
<label>Search</label>
<input v-model="search" name=""> The search is: {{ search }}
</div>
我不确定这真的是最好的方法，如果我真的在回答这个问题，但它会在列表中为您提供一些关于 Vue 如何处理渲染和组件的提示......