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 设置url参数
Jul 08 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
vue组件watch属性实例讲解
Nov 07 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 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
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
python爬虫常用的模块分析
2014/08/29 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
kafka-python批量发送数据的实例
2018/12/27 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
Django中template for如何使用方法
2021/01/31 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
罚站检讨书
2015/01/29 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL