//首先，别忘了引入vue.js <div></div> <script src="https://www.jb51.net/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></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></div> //模版 <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>