html可以用vue渲染吗,可以在渲染的html中使用带有模板的VueJS SFC组件吗？

如果我理解您的问题，您需要使用HTML制作单个文件组件 .

如果是这种情况，您应该使用render()函数和常规组件 .

render函数决定使用什么作为组件的模板：

Vue

new Vue({

el: '#app',

render (createElement) {

return createElement({

template: '

Hello World

'

})

},

})

将 Hello World 渲染到屏幕上 .

现在，让我们看看这个函数是如何被动的：

new Vue({

el: '#app',

data: {

count: 0

},

render (createElement) {

return createElement({

template: '

Hello World ' + this.count + '

'

})

},

created () {

setTimeout(() => {

this.count++

}, 2000)

}

})

这里，在2秒后，

Hello World ' + this.count + '

中的计数器将从0增加到1 .

现在，如果我们想将模板与数据分开怎么办？

new Vue({

el: '#app',

render (createElement) {

return createElement({

template: '

Hello World {{ count }}

',

data () {

return {foo: 'bar'}

}

})

}

})

此代码将显示 Hello World bar .

现在，让's see what happen if we try to load our template over http. We' ll使用 axios 库来执行此操作 . 让我们创建一个 remote.html 文件来包含我们的HTML代码：

I'm a remote component {{ foo }}

现在，让我们尝试通过Ajax加载它：

new Vue({

el: '#app',

data: {

template: null

},

render (createElement) {

return createElement({

template: this.template ? this.template : '

Hello World {{ foo }}

',

data () {

return {foo: 'bar'}

}

})

},

created () {

axios({

url: '/remote.html',

method: 'get'

}).then(response => {

this.template = response.data

})

}

})

一旦从浏览器加载 remote.html ，此代码将显示 I'm a remote component {{ foo }} .

请注意，传递给createElement函数的对象实际上是一个组件结构 . 您可以使用相同的方法：

render (createElement) {

return createElement({

template: this.template ? this.template : '

Hello World {{ foo }}

',

data () {

return {foo: 'bar'}

},

mounted () {

alert('Hello from mounted')

}

})

}

将在浏览器上触发 alert .

无论如何，这是一个嵌套组件的完整示例：

的index.html

Vue

const headerComponent = {

data () {

return {

template: '

Loading...

'

}

},

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

})

}

})

了header.html

Search

The search is: {{ search }}

我不确定这是否真的是最好的方法，如果我真的回答了这个问题，但它会在列表中给出一些关于Vue如何处理渲染和组件的提示......