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 相关文章推荐
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
jquery实现下载图片功能
Jul 18 jQuery
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
openlayers4实现点动态扩散
Aug 17 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里的中文变量说明
2011/07/23 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
微信小程序模板template简单用法示例
2018/12/04 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python实现周期方波信号频谱图
2018/07/21 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
Python 存取npy格式数据实例
2020/07/01 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
python switch 实现多分支选择功能
2020/12/21 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
优秀士兵个人事迹材料
2014/01/19 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
小升初自荐信范文
2015/03/05 职场文书
2015年社区综治工作总结
2015/04/21 职场文书