详解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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
js闭包的用途详解
Nov 09 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
security.js实现的RSA加密功能示例
Jun 06 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
推荐下python/ironpython:从入门到精通
2007/10/02 Python
python中requests小技巧
2017/05/10 Python
python实现zabbix发送短信脚本
2018/09/17 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
python 爬虫请求模块requests详解
2020/12/04 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
软件测试英文面试题
2012/10/14 面试题
教育学习自我评价
2014/02/03 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
护士辞职信怎么写
2015/02/27 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
Java的Object类的九种方法
2022/04/13 Java/Android