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 Keycode对照表
Oct 24 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
php图片验证码代码
2008/03/27 PHP
cmd下运行php脚本
2008/11/25 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
vue小白入门教程
2018/04/02 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
django 控制页面跳转的例子
2019/08/06 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
python爬虫实现获取下一页代码
2020/03/13 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
证婚人搞笑证婚词
2014/01/10 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang