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
Nov 25 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
Vue和Flask通信的实现
May 19 Vue.js
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中使用PDF文档功能
2006/10/09 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
php构造函数与析构函数
2016/04/23 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
J2EE系统只能是基于web
2015/09/08 面试题
小学教研工作制度
2014/01/15 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
2014中考励志标语
2014/06/05 职场文书
安全员岗位职责
2015/02/10 职场文书
运动会100米广播稿
2015/08/19 职场文书