详解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 相关文章推荐
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
js实现3d悬浮效果
Feb 16 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
JavaScript实现多个物体同时运动
Mar 12 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
php win下Socket方式发邮件类
2009/08/21 PHP
php中apc缓存使用示例
2013/12/25 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
node中的session的具体使用
2018/09/14 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
Python设计模式之门面模式简单示例
2018/01/09 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Django中的ajax请求
2018/10/19 Python
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
社区敬老月活动实施方案
2014/02/17 职场文书
健康家庭事迹材料
2014/05/02 职场文书
师德承诺书
2015/01/20 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
《学会看病》教学反思
2016/02/17 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers