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的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
一些常用的JS功能函数代码
Jun 23 Javascript
Jquery Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
React key值的作用和使用详解
Aug 23 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 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
You might like
php数字转汉字代码(算法)
2011/10/08 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
python运行时间的几种方法
2016/06/17 Python
python魔法方法-自定义序列详解
2016/07/21 Python
Python日志处理模块logging用法解析
2020/05/19 Python
python中有函数重载吗
2020/05/28 Python
Python新手学习标准库模块命名
2020/05/29 Python
数组越界问题
2015/10/21 面试题
软件测试笔试题
2012/10/25 面试题
打架检讨书100字
2014/01/19 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
指导教师推荐意见
2015/06/05 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python