首页
所有分类
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 相关文章推荐
JavaScript的面向对象方法以及差别
Mar 31 Javascript
Uploadify上传文件方法
Mar 16 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
详解Vue.js——60分钟组件快速入门（上篇）
Dec 05 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
vue-router重定向不刷新问题的解决
Jun 25 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
axios封装，使用拦截器统一处理接口，超详细的教程（推荐）
May 02 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
Vue computed 计算属性代码实例
Apr 22 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
有序排列(1) 遍历文件夹(1) html标准库(1) dll(1) python-pcl(1) Anaconda(2) ctypes(1) 历史记录(1) C/C++(1) 经纬度(1)
You might like
PHP安全配置详细说明
2011/09/26 PHP
php学习之function的用法
2012/07/14 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[05:43]VG.R战队教练Mikasa专访：为目标从未停止战斗
2016/08/02 DOTA
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
python url 参数修改方法
2018/12/26 Python
Django的Modelforms用法简介
2019/07/27 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
Melissa鞋英国官方网站：Nonnon
2019/05/01 全球购物
网上快餐厅创业计划书
2014/02/01 职场文书
运动会800米加油稿
2014/02/22 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
长江三峡导游词
2015/01/31 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书