当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 详解vue 模版组件的三种用法

详解vue 模版组件的三种用法

2017年12月12日  | 移动技术网IT编程  | 我要评论

本文介绍了详解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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网