Vue组件-自定义全局组件-使用template标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>38-Vue组件-自定义全局组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.创建组件的其它方式
1.1在注册组件的时候, 除了传入一个组件构造器以外, 还可以直接传入一个对象
1.2在编写组件模板的时候, 除了可以在字符串模板中编写以外, 还可以像过去的art-template一样在script中编写
1.3在编写组件模板的时候, 除了可以在script中编写以外, vue还专门提供了一个编写模板的标签template
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!--// 3.3使用注册好的组件-->
<abc></abc>
</div>
<!--
<script id="info" type="text/html">
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息</p>
</div>
</script>
-->
<template id="info">
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息</p>
</div>
</template>
<script>
// 3.1创建组件构造器
/*
let Profile = Vue.extend({
// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
template: `
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息</p>
</div>
`
});
*/
/*
let obj = {
// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
template: `
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息</p>
</div>
`
};
*/
// 3.2注册已经创建好的组件
// 第一个参数: 指定注册的组件的名称
// 第二个参数: 传入已经创建好的组件构造器
// Vue.component("abc", Profile );
// Vue.component("abc", obj );
/*
Vue.component("abc", {
// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
template: `
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息</p>
</div>
`
});
*/
Vue.component("abc", {
// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
template: "#info"
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
}
});
</script>
</body>
</html><< 上一篇
下一篇 >>