本文介紹了詳解vue 模版組件的三種用法，分享給大家，具體如下：
第一種
//首先，別忘了引入vue.js<div id="user_name_01"></div><script src="../node_modules/vue/dist/vue.js"></script><script> var User_01 = Vue.extend({// 創(chuàng)建可復(fù)用的構(gòu)造器 template: '<p>{{firstName}} {{lastName}} age {{age}}</p>' }); var user_01 = new User_01({ // 創(chuàng)建一個 user 實例 data: { firstName: 'yuxie', lastName: 'weiliang', age: 33 } }); user_01.$mount('#user_name_01') // 掛載到元素上</script>// 頁面結(jié)果<div>yuxie weiliang age 33</div>第二種
data里面可以仿佛初始化的數(shù)據(jù)，然后new的時候，里面的數(shù)據(jù)會覆蓋之前的，可以當(dāng)做是默認(rèn)數(shù)據(jù)
<div id="user_name_02"></div> <script> //下面是另一種寫法,模版和數(shù)據(jù)扔一塊 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>// 頁面結(jié)果<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({// 構(gòu)造器 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>// 頁面結(jié)果<div>yuxie weiliang age 33</div>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
