组件介绍
组件 挂载点el: 可以理解为被组件 template 模块进行替换的占位符
总结：根组件，可以不明确template，template默认采用挂载点页面结构；如果设置的template，挂载点内部的内容无效，因为会被替换
概念：html、css与js的集合体，为该集合体命名，用该名字复用html、css与js组成的集合体 => 复用性
组件分类：
根组件：new Vue() 生成的组件
局部组件：组件名 = {}，{}内部采用的是vue语法
全局组件：Vue.component('组件名', {})，{}内部采用的是vue语法
组件的特点：
1）组件都有管理组件html页面结果的 template 实例成员，template中有且只有一个根标签
2）根组件都是作为最顶层父组件，局部与全局组件作为子组件，也可以成为其他局部与全局组件的父组件
3）子组件的数据需要隔离(数据组件化，每一个组件拥有自己数据的独立名称空间)
4）局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件
5）组件中出现的所有变量（模板中、逻辑中），由该组件自己提供管理
6) 局部全局和根组件都是一个vue实例，一个实例对应一套html、css、js结构，所以实例就是组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
/**
* 组件
* 概念：html、css与js的集合体，为该集合体命名，用该名字复用html、css与js组成的集合体 => 复用性
*
* 组件分类：
* 根组件：new Vue() 生成的组件
* 局部组件：组件名 = {}，{}内部采用的是vue语法
* 全局组件：Vue.component('组件名', {})，{}内部采用的是vue语法
*
* 组件的特点：
* 1）组件都有管理组件html页面结果的 template 实例成员，template中有且只有一个根标签
* 2）根组件都是作为最顶层父组件，局部与全局组件作为子组件，也可以成为其他局部与全局组件的父组件
* 3）子组件的数据需要隔离(数据组件化，每一个组件拥有自己数据的独立名称空间)
* 4）局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件
* 5）组件中出现的所有变量（模板中、逻辑中），由该组件自己提供管理
* 6) 局部全局和根组件都是一个vue实例，一个实例对应一套html、css、js结构，所以实例就是组件
*/
new Vue({
el: '#app', // 被组件 template 模块进行替换的占位符
data: {
msg: '组件信息'
},
template: '<p>{{ msg }}</p>'
})
// 总结：根组件，可以不明确template，template默认采用挂载点页面结构；如果设置的template，挂载点内部的内容无效，因为会被替换
// 解释：html，body标签不能被替换，所以不能作为挂载点
</script>
</html>
子组件
声明局部组件：局部组件要在其父组件中注册才能使用
1、声明组件 2、注册组件 3、渲染组件 => 全局组件不需要注册
组件里面大写字母，对应的是 -加上对应的小写字母
子组件：
<div id="app">
<div class="wrap">
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</div>
<script>
let localTag = {
template: `
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>美女</h2>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
};
</script>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>子组件</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
width: 100%;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 声明局部组件：局部组件要在其父组件中注册才能使用
// 1、声明组件 2、注册组件 3、渲染组件 => 全局组件不需要注册
let localTag = {
template: `
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>美女</h2>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
};
Vue.component('global-tag', {
template: `
<div class="box" @click="fn">
<img src="img/002.jpg" alt="">
<h2>大长腿</h2>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
});
new Vue({
el: '#app',
data: {},
components: { // 注册组件
localTag,
}
})
</script>
</html>