首页
所有分类
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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
AngularJS内置指令
Feb 04 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
JavaScript的==运算详解
Jul 20 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
vue组件生命周期详解
Nov 07 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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
循环(3) OpenLayer(1) android studio(3) IDEA(2) 多维数组(1) 移动开发(2) 嵌套(1) 多线程(6) Sqlite(2) 安卓(1)
You might like
PHP个人网站架设连环讲(二)
2006/10/09 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
浅谈python内置变量-reversed(seq)
2017/06/21 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
python字符串常用方法
2018/06/14 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Python import与from import使用及区别介绍
2018/09/06 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
摩飞电器俄罗斯官方网站：Morphy Richards俄罗斯
2020/07/30 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
年度考核自我鉴定
2013/11/09 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
中学校庆方案
2014/03/17 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书