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

已更新至复习组件模块分离

This commit is contained in:
Code12121 2022-10-22 09:36:50 +08:00
parent f4903880e4
commit 7f41f79c88
3 changed files with 91 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
10-组件化开发/06-实现组件的动态数据/复习组件模块的分离(局部).html Normal file
View File

@ -0,0 +1,28 @@
<!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">
<apps></apps>
</div>
</body>
<template id="apps">
<h1>这是局部组件分离</h1>
</template>
<script src="../../JavaScript/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
components:{
'apps':{
template:"#apps"
}
}
})
</script>
</html>

30
10-组件化开发/06-实现组件的动态数据/复习组件模块的分离（全局）.html Normal file
View File

@ -0,0 +1,30 @@
<!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">
<apps></apps>
</div>
<template id="apps">
<div>
<h1>这是全局变量的组件</h1>
</div>
</template>
</body>
<script src="../../JavaScript/vue.js"></script>
<script>
Vue.component(
'apps',{
template:"#apps"
}
)
const app =new Vue({
el:"#app"
})
</script>
</html>

33
10-组件化开发/06-实现组件的动态数据/复习组件的动态数据变化.html Normal file
View File

@ -0,0 +1,33 @@
<!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">
<apps></apps>
</div>
<template id="apps">
<div>{{word}}</div>
</template>
</body>
<script src="../../JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",
components:{
'apps':{
template:"#apps",
data(){
return {
word:"这是一个动态内容"
}
}
}
}
})
</script>
</html>