testzm0476
/
vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

已更新至组件模块的抽离（x-template类型和template标签）

This commit is contained in:
Code12121 2022-10-21 10:26:06 +08:00
parent 2477a018e6
commit 57f3b54b11
3 changed files with 89 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
10-组件化开发/05-组件模块抽离/全局组件模块的分离.html Normal file
View File

@ -0,0 +1,41 @@
<!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>Document</title>
</head>
<body>
<div id="app">
<x-tpl></x-tpl>
<tpl></tpl>
</div>
<!-- 使用script类型为x-template将模板抽离出来（app） -->
<script type="x-template" id="x-tlp">
<h1>你好呀，这是使用x-template类型抽离组件内容</h1>
</script>
<template id="cls">
<h1>你好呀，这是使用template标签抽离组件内容</h1>
</template>
</body>
<script src="../../JavaScript/vue.js"></script>
<script>
// 通过script类型中的x-template将组件内容抽离出来（尽量不适用）
Vue.component(
'x-tpl',{
template:"#x-tlp"
}
)
//通过template标签将组件内容抽离出来(多使用)
Vue.component(
'tpl',{
template:"#cls"
}
)
const app=new Vue({
el:"#app"
})
</script>
</html>

48
10-组件化开发/05-组件模块抽离/局部组件模块的分离.html Normal file
View File

@ -0,0 +1,48 @@
<!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>Document</title>
</head>
<!--
抽离组件方法:
1、使用script类型中的x-template对组件进行抽离
2、使用template标签对组件进行抽离
-->
<body>
<div id="app">
<!-- 易错点：忘记使用组件 -->
<xtpl></xtpl>
<tpl></tpl>
</div>
<script type="x-template" id="xtpl">
<h1>
你好呀,这是局部组件下使用x-template抽离组件
</h1>
</script>
<template id="tpl">
<h1>
你好呀,这是局部组件下使用template标签抽离组件
</h1>
</template>
</body>
<script src="../../JavaScript/vue.js"></script>
<script>
//挂载注册组件
const vue = new Vue({
el: "#app",
components: {
xtpl: {
template: "#xtpl"
},
tpl: {
template: "#tpl"
}
}
})
</script>
</html>

14
10-组件化开发/05-组件模块抽离/组件模块的分离.html
View File

@ -1,14 +0,0 @@
<!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>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>