056_末晨曦Vue技术_处理边界情况之X-template
2024-08-31 19:53:15
处理边界情况之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>
最新文章
- 小丁是怎样入门git的
- Xdebug+ZendStudio配置
- java基础学习04(数组与方法)
- java final方法的作用
- IUS
- 22. Surrounded Regions
- 安全威胁无孔不入:基于Linux系统的病毒(转)
- 定位--position属性
- NetBeans运行项目报错
- vuex的用法
- Java(18) 集合框架
- MD1——2 Corner
- Linux IO性能分析blktrace/blk跟踪器
- UVa 10382 - Watering Grass 贪心,水题,爆int 难度: 0
- 算法实践--最小生成树(Prim算法)
- JavaWeb环境搭建(作业八)
- 使用“rz -be”命令上传文件至服务器;使用“sz 文件名”从服务器下载文件到本地
- SQL注入之Sqli-labs系列第二十四关(二阶注入)
- 【文文殿下】P3740 [HAOI2014]贴海报
- scala函数demo