组件化 全局组件和局部组件

目标:将页面划分为几个功能块,然后进行组合,目的是实现更好的代码复用,

Vue的组件化思想:独立,可复用。任何应用都会被抽象成为一个组件树;树形结构

 

组件的使用分为是三个步骤

1创建组件构造器 

Vue.extend({})

2注册组件

Vue.conponent

3使用组件

在Vue的实例范围之内

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="app">
<my-cpn></my-cpn><!--使用自定义的组件名称-->
</div>
<body>

<script src="vue.js"></script>
<script>

// 1创建一个组件构造器对象
const cpn=Vue.extend({
template:'<div><h2>我是标题</h2><p>我是内容</p><p>我是安徽</p></div>'
});


//2注册组件 (自定义标签名字,组件构造器);
Vue.component("my-cpn",cpn);
//3必须要在组件的范围之内使用
const app=new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>

全局组件 和 局部组件


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="app">
<mycpn></mycpn><!--使用自定义的组件名称-->
<mycpn></mycpn><!--使用自定义的组件名称-->
<mycpn></mycpn><!--使用自定义的组件名称-->
</div>
<body>

<script src="vue.js"></script>
<script>

// 1创建一个组件构造器对象
const cpn=Vue.extend({
template:'<div><h2>我是标题</h2><p>我是内容</p><p>我是安徽</p></div>'
});


//2注册组件(全局组件,意味着可以在多个Vue的实例中使用) (自定义名字,组件);
//在某个Vue的实例下注册,得到的是局部组件
// Vue.component("my-cpn",cpn);

const app=new Vue({
el:'#app',
data:{
},
components:{
// cpn是使用组件是的标签名
mycpn: cpn
}
})
</script>
</body>
</html>






上一篇:CPN Tools 形式化建模分析TLS1.3握手协议


下一篇:Vue 组件化开发