day04
特点
一种可复用的vue实例
组件化和模块化的区别
组件化：组件化是指解耦复杂系统时将多个功能模块拆分，重组的过程，有多种属性状态反映其内部特性
特点：一个具有html+css+js的页面
模块化：侧重功能的封装，主要是针对于javascript代码。把他封装成一个个个体
组件的定义
全局 Vue.conponent('组件名',{
template:`模板标签`
})
局部 new Vue({
complates:{
组件名:{
template:`模板标签`,
}
}
})
template有且只有一个根元素通常是div
命名规范
1.不能以标签起名，包含大写 2.建议用驼峰起名 3.首字母大写，后面直接写名字。如果后面有大写需要转换为驼峰
组件的嵌套
注意：子组件只能在父组件中使用 子组件中的数据目前仅能供自己使用
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
{{msg}}
<v-one></v-one>
</div>
<template id="temp1">
<div>
<h2>我是模板一</h2>
{{name}}
<!-- {{msg}} -->
<!-- <v-inner></v-inner> -->
</div>
</template>
<template id="temp2">
<div>
<h2>我是模板二</h2>
</div>
</template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
// 组件：一个可复用的vue实例
let vm = new Vue({
el: '#app',
data: {
msg:'hello '
},
methods: {
},
components:{
vOne:{
template:'#temp1',
components:{
vInner:{
template:'<div>我是里层嵌套的模板<v-three></v-three></div>',
components:{
vThree:{
template:'#temp2'
}
}
},
vOuter:{
}
},
data(){
return {
name:'张三'
}
}
}
}
})
// 总结：组件中关系：只有父子和非父子关系
// 嵌套:子组件只能在父组件中使用
// 组件中的data ：定义为方法，必须有返回值，同时返回值的类型为对象
// data 中的数据只能供自己使用 如果其他组件需要使用需要传值 比如：data,methods,filter,cmpputed,watch...
</script>
</html>
后台管理页面实现
注意：1.外层嵌套大盒子（container） 2.划分布局 3.书写组件 4.组件嵌套 5.添加样式
浙公网安备 33010602011771号