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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
第六篇Bootstrap表格样式介绍
Jun 21 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
js面试题之异步问题的深入理解
Sep 20 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/02/18 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
js 异步处理进度条
2010/04/01 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
sails框架的学习指南
2014/12/22 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
详解Vite的新体验
2021/02/22 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
食品安全责任书
2014/04/15 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
django中websocket的具体使用
2022/01/22 Python
vue打包时去掉所有的console.log
2022/04/10 Vue.js