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 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 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实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
python实现日常记账本小程序
2018/03/10 Python
Python的argparse库使用详解
2018/10/09 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
python中threading开启关闭线程操作
2020/05/02 Python
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
测绘工程专业求职信
2014/07/15 职场文书
汇报材料怎么写
2014/12/30 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
golang中的struct操作
2021/11/11 Golang