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


Posted in Javascript onJuly 21, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
jquery退出each循环的写法
Feb 26 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 #Javascript
vue-resource调用promise取数据方式详解
Jul 21 #Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 #Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 #Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 #Javascript
VUE中使用Vue-resource完成交互
Jul 21 #Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 #Javascript
You might like
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
header跳转和include包含问题详解
2012/09/08 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python的时间模块datetime详解
2017/04/17 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
python让列表倒序输出的实例
2018/06/25 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
如何学习Python time模块
2020/06/03 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
网站美工岗位职责
2014/04/02 职场文书
小学生安全责任书
2014/07/25 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
2014年食堂工作总结
2014/11/20 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
团委副书记工作总结
2015/08/14 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
Python进程池与进程锁之语法学习
2022/04/11 Python