IDEA激活码
1.基本使用
组件化是Vue.js里面的重要思想
我们可以开发出一个个独立可复用的小组件来构造我们的应用
任何应用都可以抽象为一棵组件树
组件使用的步骤
①创建组件构造器，调用Vue.extend()方法
template后面的内容表示我们自定义的模板
②注册组件，调用Vue.component()方法
需要传两个参数：1.注册组件的标签名 2.组件构造器
③使用组件，组件必须挂载在某个Vue实例下，否则它不会生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 3.使用组件-->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
//1.创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<p>人间烟火气</p>
<p>最是抚人心</p>
</div>`
})
//2.注册组件
Vue.component('my-cpn',cpnC);
const app = new Vue({
el:'#app',
data:{
message:'你好啊！'
}
})
</script>
</body>
</html>
PS:template后面的内容是一个字符串类型，用``这个符号括起来的好处是：多行内容之间不需要用‘+’号连接，而用单引号’ '就需要，这是ES6的新语法
2.全局组件和局部组件
上面注册的组件是全局组件，这就意味着可以在多个Vue实例下面使用
怎么定义局部组件？
在创建vue实例的时候，在components属性后面添加定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<script src="../js/vue.js"></script>
<script>
//1.创建组件构造器对象
const cpnC = Vue.extend({
template: `
<div>
<p>人间烟火气</p>
<p>最是抚人心</p>
</div>`
})
const app = new Vue({
el: '#app',
data: {
message:'你好啊！'
},
components: {
cpn: cpnC //注册局部组件
}
})
</script>
</body>
</html>
3.父组件和子组件
在注册组件构造器的时候，在components后面添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
//创建子组件
const cpnC1 = Vue.extend({
template: `
<div>
<h2>我是组件1</h2>
<p>哈哈哈</p>
</div>
`
})
//创建父组件
const cpnC2 = Vue.extend({
template: `
<div>
<h2>我是组件2</h2>
<p>嘿嘿嘿</p>
<cpn1></cpn1>
</div>
`,
components:{
cpn1:cpnC1
}
})
//root组件
const app = new Vue({
el:'#app',
data:{
message:'你好啊！',
},
components: {
cpn2: cpnC2,
}
})
</script>
</body>
</html>
4.注册组件的语法糖写法（推荐）
Vue为了简化注册组件的过程，提供了注册的语法糖
主要省去了调用Vue.extend()的步骤，而是直接用一个对象来代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn1></cpn1>
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
//注册全局组件的语法糖
Vue.component('cpn1',{
template: `
<div>
<p>人间烟火气</p>
</div>`
});
const app = new Vue({
el:'#app',
data:{
},
components:{ //注册局部组件的语法糖
'cpn2': {
template: `
<div>
<p>最是抚人心</p>
</div>`
}
}
})
</script>
</body>
</html>
5.模板的分离写法
两种方案：
①使用script标签
②使用template标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn1></cpn1>
<cpn2></cpn2>
</div>
<!--1.使用script标签，注意类型是text/x-template-->
<script type="text/x-template" id="cpnC1">
<div>
<p>人间烟火气</p>
</div>
</script>
<!--2.使用template标签-->
<template id="cpnC2">
<div>
<p>最是抚人心</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.component('cpn1', {
template: `#cpnC1`
})
const app = new Vue({
el:'#app',
components:{
'cpn2': {
template: `#cpnC2`
}
}
})
</script>
</body>
</html>
6.组件的data必须是一个函数
组件是一个单独功能模块的封装，不能访问Vue实例中的数据，它有属于自己的data
组件的data必须是一个函数，而且这个函数返回一个对象，对象里面保存着数据
那么为什么后面必须跟一个函数？
如果data后面是一个对象，那么多个组件就会共同拥有一个data，会相互影响，这是我们不愿意看到的，因为每个组件都有自己的功能和逻辑
如果后面是一个函数，函数返回一个对象，那么每一个组件都会拥有一个自己的data，互不影响
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
<template id="cpnC">
<div>
<p>天上剑仙三百万</p>
<p>{{nextPoem}}</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.component('cpn', {
template: `#cpnC`,
data(){
return {
nextPoem: '见我也须尽低眉'
}
}
})
const app = new Vue({
el:'#app',
data:{
message:'你好啊！'
},
})
</script>
</body>
</html>
