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 相关文章推荐
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
js简单实现交换Li的值
May 22 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
bootstrap table实例详解
Jan 06 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 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 session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
PHP类的特性实例分析
2016/09/28 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
从vue源码看props的用法
2019/01/09 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Python 功能和特点(新手必学)
2015/12/30 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
用python实现学生管理系统
2020/07/24 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
财务会计专业个人求职信范本
2014/01/08 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
好人好事事迹材料
2014/02/12 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python
Go语言 详解net的tcp服务
2022/04/14 Golang