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 相关文章推荐
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
js 浏览器事件介绍
Mar 30 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 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/12/30 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
市场营销专业个人求职信范文
2013/12/14 职场文书
违反学校规定检讨书
2014/01/18 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
爱我中华教学反思
2014/04/28 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
学生干部培训方案
2014/06/12 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
Java常用函数式接口总结
2021/06/29 Java/Android