在使用Vue开发网页应用时,有些情况下需要加载静态页面,这里就介绍一下如何使用Vue加载静态页面。
首先需要在Vue实例中导入需要加载的静态页面模板,可以通过以下代码实现:
<template> <div v-html="templateContent"></div> </template> <script> import template from './staticPage.html' export default { data () { return { templateContent: '' } }, mounted () { this.templateContent = template } } </script>
在上述代码中,我们使用了v-html指令来将templateContent渲染为HTML代码,并通过mounted钩子函数在Vue实例加载时将template中的模板内容赋值给templateContent。
需要注意的是,在加载静态页面时,Vue不会对其中的代码进行编译和解析,因此在静态页面中使用Vue指令和组件是无效的。
在上面的代码中,我们使用了ES6的import语法导入静态页面模板,如果需要支持低版本的浏览器,可以使用jQuery的$.get()方法来加载静态页面:
<template> <div v-html="templateContent"></div> </template> <script> export default { data () { return { templateContent: '' } }, mounted () { $.get('./staticPage.html', html => { this.templateContent = html }) } } </script>