组件化
组件化的思想：我们一般将一个页面中所有的处理逻辑全部放在一起，处理起来比较复杂，而且不利于后续的管理以及扩展。现在我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己部分独立的功能，这样就使整个页面的管理和维护更加容易
Vue组件化思想：它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用，任何的应用都会被抽象成一颗组件树
组件的使用分成三个步骤：
1.创建组件构造器，调用Vue.extend()创建的是一个组件构造器，通常在创建组件构造器时，传入template代表我们自定义组件的模板，该模板就是在使用到组件的地方要显示的HTML代码
2.注册组件，Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称，所以要传递两个参数：(1)注册组件的标签名，(2)组件构造器
3.使用组件，组件必须挂载在某个Vue实例下，否则它不会生效
<div id="app">
<!-- 3.使用组件 -->
<my-cpn></my-cpn>
</div>
<script>
//1.创建组件构造器对象
const cpnC=Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>`
})
//2.注册组件
Vue.component("my-cpn",cpnC)
const app=new Vue({
el:"#app",
data:{
message:'hello'
}
})
</script>全局组件和局部组件
<body>
<div id="app">
<!-- 3.使用组件 -->
<cpn></cpn>
</div>
<div id="app2">
<!-- 使用局部组件cpn在当前组件不起作用 -->
<cpn></cpn>
</div>
<script>
//1.创建组件构造器对象
const cpnC=Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>`
})
//2.注册组件(全局组件，意味着可以在多个vue的实例下面使用)
//Vue.component("cpn",cpnC)
const app=new Vue({
el:"#app",
data:{
message:'hello'
},
//局部组件，只在当前组件有效
components:{
//cpn使用组件时的标签名
cpn:cpnC
}
})
const app2=new Vue({
el:"#app2"
})
</script>
</body>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
