Vue组件-自定义全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>37-Vue组件-自定义全局组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
Vue两大核心: 1.数据驱动界面改变 2.组件化
1.什么是组件? 什么是组件化?
1.1在前端开发中组件就是把一个很大的界面拆分为多个小的界面, 每一个小的界面就是一个组件
1.2将大界面拆分成小界面就是组件化
2.组件化的好处
2.1可以简化Vue实例的代码
2.2可以提高复用性
3.Vue中如何创建组件?
3.1创建组件构造器
3.2注册已经创建好的组件
3.3使用注册好的组件
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!--// 3.3使用注册好的组件-->
<abc></abc>
</div>
<script>
// 3.1创建组件构造器
let Profile = Vue.extend({
// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
template: `
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息</p>
</div>
`
});
// 3.2注册已经创建好的组件
// 第一个参数: 指定注册的组件的名称
// 第二个参数: 传入已经创建好的组件构造器
Vue.component("abc", Profile );
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
}
});
</script>
</body>
</html><< 上一篇
下一篇 >>