056_末晨曦Vue技术_处理边界情况之X-template

  • 056_末晨曦Vue技术_处理边界情况之X-template已关闭评论
  • 143 次浏览
  • A+
所属分类:Web前端
摘要

点击打开视频讲解更加详细另一个定义模板的方式是在一个<script>元素中,并为其带上 text/x-template 的类型,然后通过一个 id 将模板引用过去。例如:


处理边界情况之X-template

点击打开视频讲解更加详细

另一个定义模板的方式是在一个<script>元素中,并为其带上 text/x-template 的类型,然后通过一个 id 将模板引用过去。例如:

<script type="text/x-template" id="hello-world-template">   <p>Hello hello hello</p> </script> 
Vue.component('hello-world', {   template: '#hello-world-template' }) 

x-template 需要定义在 Vue 所属的 DOM 元素外。

这些可以用于模板特别大的 demo 或极小型的应用,但是其它情况下请避免使用,因为这会将模板和该组件的其它定义分离开。

完整案例:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>末晨曦吖</title> </head> <body>     <div id="app">         <hello-world></hello-world>         <script type="text/x-template" id="hello-world-template">             <p>Hello hello hello</p>         </script>     </div>     <!-- 开发环境版本,包含了有帮助的命令行警告 -->     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>     <script>         Vue.component('hello-world', {             template: '#hello-world-template'         })         var app = new Vue({             el:'#app'         })     </script> </body> <style scoped>     body{         padding: 0;         margin: 0;     } </style> </html> 

若对您有帮助,请点击跳转到B站一键三连哦!感谢支持!!!