本文介紹了詳解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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。