DDR爱好者之家

详解vue 模版组件的三种用法
站长资源 2024/11/27 佚名
69 1538
DDR爱好者之家 Design By 杰米

本文介绍了详解vue 模版组件的三种用法，分享给大家，具体如下：

第一种

//首先，别忘了引入vue.js
<div id="user_name_01"></div>
<script src="/UploadFiles/2021-04-02/vue.js">




第二种


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>







以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米