首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue中template的三种写法示例

Posted in Javascript onOctober 21, 2020

第一种(字符串模板写法):

直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写.

<!DOCTYPE html>
<html>
 <!--
  WARNING! Make sure that you match all Quasar related
  tags to the same version! (Below it's "@1.7.4")
 -->

 <head>
   <!--
   <link href="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
   -->
   <link href="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar@1.7.4.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
 </head>

 <body>
  <div id="q-app">

  </div>

  <!-- Add the following at the end of your body tag -->
  <!--
  <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
  -->
  <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js"></script>
  <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js"></script>
  
  <script>
   /*
    Example kicking off the UI. Obviously, adapt this to your specific needs.
    Assumes you have a <div id="q-app"></div> in your <body> above
    */
   new Vue({
    el: '#q-app',
    data: function () {
     return {
      version: Quasar.version
     }
    },
    template: `<div class="q-ma-md"> Running Quasar v{{ version }}</div>`
    // ...etc
   })
  </script>
 </body>
</html>

第二种:

直接写在template标签里,这种写法跟写html很像。

<!DOCTYPE html>
<html>
 <!--
  WARNING! Make sure that you match all Quasar related
  tags to the same version! (Below it's "@1.7.4")
 -->

 <head>
   <!--
   <link href="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
   -->
   <link href="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar@1.7.4.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
 </head>

 <body>
  <div id="q-app">
    <template id='template1'>
     <div class="q-ma-md">
      Running Quasar v{{ version }}
     </div>
    </template>
  </div>

  <!-- Add the following at the end of your body tag -->
  <!--
  <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
  -->
  <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js"></script>
  <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js"></script>
  
  <script>
   /*
    Example kicking off the UI. Obviously, adapt this to your specific needs.
    Assumes you have a <div id="q-app"></div> in your <body> above
    */
   new Vue({
    el: '#q-app',
    data: function () {
     return {
      version: Quasar.version
     }
    },
    template: '#template1'
    // ...etc
   })
  </script>
 </body>
</html>

第三种:

写在script标签里,这种写法官方推荐,vue官方推荐script中type属性加上"x-template",即:

<!DOCTYPE html>
<html>
 <!--
  WARNING! Make sure that you match all Quasar related
  tags to the same version! (Below it's "@1.7.4")
 -->

 <head>
   <!--
   <link href="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
   -->
   <link href="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar@1.7.4.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css">
 </head>

 <body>
  <div id="q-app"></div>
	
	<script type="x-template" id="template1">
  	<div class="q-ma-md">
   	 Running Quasar v{{ version }}
  	</div>
  </script>

  <!-- Add the following at the end of your body tag -->
  <!--
  <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/quasar@1.7.4/dist/quasar.umd.min.js"></script>
  -->
  <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/vue@2.0.0.js"></script>
  <script src="https://www.mobibrw.com/wp-content/uploads/2020/06/quasar.umd@1.7.4.js"></script>
  
  <script>
   /*
    Example kicking off the UI. Obviously, adapt this to your specific needs.
    Assumes you have a <div id="q-app"></div> in your <body> above
    */
   new Vue({
    el: '#q-app',
    data: function () {
     return {
      version: Quasar.version
     }
    },
    template: '#template1'
    // ...etc
   })
  </script>
 </body>
</html>

以上就是vue中template的三种写法示例的详细内容，更多关于vue template的资料请关注三水点靠木其它相关文章！

vue中template的三种写法示例

- Author -

默默的点滴

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
javascript基本常用排序算法解析
Sep 27 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
解决使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
Vue使用v-viewer实现图片预览
Oct 21 #Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 #Javascript
Vue+axios封装请求实现前后端分离
Oct 23 #Javascript
构建一个JavaScript插件系统
Oct 20 #Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 #Javascript
原生js实现俄罗斯方块
Oct 20 #Javascript
React实现评论的添加和删除
Oct 20 #Javascript
svg(1) 滚动条(1) 声卡驱动(1) 鸿蒙3.0(1) win7(2) 输入法(2) 蓝屏(1) 鸿蒙(2) Sentry(1) Sunmao(1)
You might like
使用PHP数组实现无限分类，不使用数据库，不使用递归.
2006/12/09 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
python写的ARP攻击代码实例
2014/06/04 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
python实现中文转换url编码的方法
2016/06/14 Python
python中logging包的使用总结
2018/02/28 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
python属于哪种语言
2020/08/16 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
最新的互联网创业计划书
2014/01/10 职场文书
商场活动策划方案
2014/01/24 职场文书
爱牙日活动总结
2014/08/29 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
初中思品教学反思
2016/02/20 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python