<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建组件方式一-----定义一个模板字符传</title>
</head>
<body>
<!-- 主组件（父组件） -->
<div id="app">
<!--3. 使用全局组件，以标签的形式 -->
<mycom></mycom>
</div>
<!-- 创建模板 -->
<template id="tem">
<div>
<p>天津大学软件学院</p>
<a href="http://www.baidu.com">官方网站</a>
</div>
</template>
</body>
<!--1、导入vue包-->
<script src="./js/vue.min.js"></script>
<!--2、创建vue实例（new对象）-->
<script type="text/javascript">
// 使用component("组件名称"，创建出来的组件模板template)
/* Vue.component('mycom',{
template:'#tem'
}) */
var vm = new Vue({
el:'#app',
data:{},
methods:{},
filters:{},
directives:{},
// 定义内部私有组件 vm所拥有的
components:{
mycom:{
template:'#tem'
}
},
})
</script>
</html>
浙公网安备 33010602011771号