首页
所有分类
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 相关文章推荐
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
javascript数组详解
Oct 22 Javascript
图解JavaScript中的this关键字
May 28 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 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
tfx(1) Flask Web(1) OpenAI baselines(1) SeaTunnel(1) 面向接口(1) tkFileDialog(1) Odoo(1) ElementTree(1) OpenGL(1) BeautifulSoup4(2)
You might like
PHP容易忘记的知识点分享
2013/04/30 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）
2016/02/25 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
Python Socket编程之多线程聊天室
2018/07/28 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
巧克力领导品牌瑞士莲美国官网：Lindt Chocolate美国
2016/08/25 全球购物
挪威户外活动服装和装备购物网站：Bergfreunde挪威
2016/10/20 全球购物
西班牙家用电器和电子产品购物网站：Mi Electro
2019/02/25 全球购物
瑞士隐形眼镜和护理产品网上商店：Linsenklick
2019/10/21 全球购物
华为python面试题
2016/05/03 面试题
预备党员思想汇报范文
2013/12/29 职场文书
心理健康教育制度
2014/01/27 职场文书
网络营销策划方案
2014/06/04 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
个人原因辞职信模板
2015/05/13 职场文书