本篇文章给大家分享的是有关如何使用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>
以上就是如何使用vue模版组件,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。