<!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>