详解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>

 <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>

//容器<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>