<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app{
width: 100%;
height: 100vh;
background-color: pink;
}
nav{
height: 100px;
width: 100%;
background-color: orange;
}
main{
height: 500px;
width: 100%;
background-color: rgb(0, 213, 255);
}
footer{
height: 500px;
width: 100%;
background-color: rgb(21, 207, 151);
}
</style>
</head>
<body>
<div id="app">
<navq></navq>
<mainq></mainq>
<footerq></footerq>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.config.productionTip = false;
// 1.可以使用小写和大写情况下，首字母都会转换为大写
// 2.my-school和mySchool都会转换为同样的格式MySchool，但是mySchool只能在脚手架环境使用
// 使用的组件名可以不和组件定义的名字相同，组件名字可以自定义
// 注意规范:组件取名最好不要和已有的标签相同
// 不在脚手架环境下使用这种格式<schoolQq/>不会再运行之后的代码
//Vue.extend()方法本质就是实例化VueComponent构造函数
//组件注册两种方式
// 1.全局注册Vue.component("mainq",mainq);
// 1.局部注册components：{}
// 两种方式的区别
// 全局注册 只要注册一次，在任何组件都可以使用
// 局部注册 在变量a中注册，就只能在a中使用组件
const navq=Vue.extend({
template:
<nav></nav>
,
mounted(){
console.log(this);
}
}
)
const mainq=Vue.extend({
template:
<main>
</main>
,
components:{
}
})
const footerq=Vue.extend({
template:
<mainq></mainq>
</footer>
,
components:{
navq
}
}
)
Vue.component("mainq",mainq);
var vm = new Vue({
el:"#app",
data() {
return {
}
},
components:{
navq,
footerq,
},
methods: {
},
mounted(){
console.log(this);
}
})
</script>
</html>
扫一扫
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
