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中节点的最近的相关节点访问方法
Mar 20 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
学习jQuey中的return false
Dec 18 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 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缓存类完整实例
2014/07/26 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
javascript克隆对象深度介绍
2012/11/20 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
js中遍历Map对象的方法
2016/07/27 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
python实现文件的备份流程详解
2019/06/18 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
python实现自动打卡的示例代码
2020/10/10 Python
python中xlutils库用法浅析
2020/12/29 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
重阳节活动总结
2014/08/27 职场文书
安全先进班组材料
2014/12/26 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书