本文介绍了详解vue 模版组件的三种用法，分享给大家，具体如下：

第一种

//首先，别忘了引入vue.js<div id="user_name_01"></div><script src="../node_modules/vue/dist/vue.js"></script><script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p>{{firstName}} {{lastName}} age {{age}}</p>' }); var user_01 = new User_01({ // 创建一个 user 实例 data: { firstName: 'yuxie', lastName: 'weiliang', age: 33 } }); user_01.$mount('#user_name_01') // 挂载到元素上</script>// 页面结果<div>yuxie weiliang age 33</div>

第二种

data里面可以仿佛初始化的数据，然后new的时候，里面的数据会覆盖之前的，可以当做是默认数据

<div id="user_name_02"></div> <script> //下面是另一种写法,模版和数据扔一块 var User_02 = Vue.extend({ template: '<p>{{firstName}} {{lastName}} age {{age}}</p>', data: function(){ return { firstName: 'yuxie', lastName: 'weiliang', age: 33 } } }); var user_02 = new User_02({data:{ age: 888888 }});//修改了age user_02.$mount('#user_name_02')</script>// 页面结果<div>yuxie weiliang age 888888</div>

第三种，使用了html模版

//容器<div id="user_name_03"></div>//模版<template id="children-template"> <p>{{firstName}} {{lastName}} age {{age}}</p></template>//js<script> var User_03 = Vue.extend({// 构造器 data: function(){ return { firstName: 'yuxie', lastName: 'weiliang', age: 33 } }, template: '#children-template'//获取HTML模版 }); var user_03 = new User_03();// 实例化 user_03.$mount('#user_name_03') // 挂载到元素上</script>// 页面结果<div>yuxie weiliang age 33</div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。