Vue2 模板template的四种写法总结


Posted in Javascript onFebruary 23, 2018

如下所示:

<div id="app"> 
 <h1>我是直接写在构造器里的模板1</h1> 
</div> 
 
<template id="demo3"> 
 <h1 style="color:red">我是选项模板3</h1> 
</template> 
 
<script type="x-template" id="demo4"> 
 <h1 style="color:red">我是script标签模板4</h1> 
</script> 
 
<script> 
 var vm=new Vue({ 
  el:"#app", 
  data:{ 
   message:1 
  }, 
 
  //第2种模板 写在构造器里 
  //template:`<h1 style="color:red">我是选项模板2</h1>` 
 
  //第3种模板 写在<template>标签里 
  //template:'#demo3' 
 
  //第4种模板 写在<script type="x-template">标签里 
  template:'#demo4' 
 }) 
</script>

推荐第4种。

以上这篇Vue2 模板template的四种写法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 #Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 #Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 #Javascript
angular动态表单制作
Feb 23 #Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 #Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 #Javascript
Vue父组件调用子组件事件方法
Feb 23 #Javascript
You might like
PHP XML备份Mysql数据库
2009/05/27 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
限制复选框的最大可选数
2006/07/01 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
jquery 使用简明教程
2014/03/05 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
javascript中expression的用法整理
2014/05/13 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
SQL面试题
2013/04/30 面试题
活动邀请函范文
2014/01/19 职场文书
教育学习自我评价
2014/02/03 职场文书
技能比武方案
2014/05/21 职场文书
医生见习报告范文
2014/11/03 职场文书
新闻报道稿范文
2015/07/23 职场文书
教导处教学工作总结
2015/08/12 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技