编程 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 相关文章推荐

aspx中利用js实现确认删除代码

Jul 22 Javascript

js图片自动切换效果处理代码

May 07 Javascript

JS测试显示屏分辨率以及屏幕尺寸的方法

Nov 22 Javascript

JavaScript判断用户是否对表单进行了修改的方法

Mar 18 Javascript

js 判断所选时间(或者当前时间)是否在某一时间段的实现代码

Sep 05 Javascript

Angularjs CURD 详解及实例代码

Sep 14 Javascript

AngularJS 自定义过滤器详解及实例代码

Sep 14 Javascript

动态加载css方法实现和深入解析

Jan 18 Javascript

浅谈JS 数字和字符串之间相互转化的纠纷

Oct 20 Javascript

jQuery实现table表格checkbox全选的方法分析

Jul 04 jQuery

JS实现随机抽选获奖者

Nov 07 Javascript

javascript执行上下文、变量对象实例分析

Apr 25 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将session放入memcached的设置方法

2014/02/14 PHP

php学习笔记之面向对象

2014/11/08 PHP

php简单操作mysql数据库的类

2015/04/16 PHP

Session 失效的原因汇总及解决丢失办法

2015/09/30 PHP

安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题

2020/08/26 PHP

javascript中利用数组实现的循环队列代码

2010/01/24 Javascript

innerText和textContent对比及使用介绍

2013/02/27 Javascript

浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)

2013/07/09 Javascript

jQuery $.each遍历对象、数组用法实例

2015/04/16 Javascript

js生成随机数的过程解析

2015/11/24 Javascript

JavaScript基础知识及常用方法总结

2016/01/10 Javascript

微信小程序实现搜索历史功能

2020/03/26 Javascript

基于JS抓取某高校附近共享单车位置使用web方式展示位置变化代码实例

2019/08/27 Javascript

vue 实现input表单元素的disabled示例

2019/10/28 Javascript

微信小程序swiper组件实现抖音翻页切换视频功能的实例代码

2020/06/24 Javascript

Ant design vue中的联动选择取消操作

2020/10/31 Javascript

Python中用format函数格式化字符串的用法

2015/04/08 Python

详细解析Python当中的数据类型和变量

2015/04/25 Python

Python使用微信SDK实现的微信支付功能示例

2017/06/30 Python

Python去除、替换字符串空格的处理方法

2018/04/01 Python

Python 编程速成(推荐)

2019/04/15 Python

django 多数据库及分库实现方式

2020/04/01 Python

Python脚本实现监听服务器的思路代码详解

2020/05/28 Python

python中round函数如何使用

2020/06/19 Python

html5+css3之CSS中的布局与Header的实现

2014/11/21 HTML / CSS

DAWGS鞋官方网站：鞋，凉鞋，靴子

2016/10/04 全球购物

倩碧英国官网：Clinique英国

2018/08/10 全球购物

本科生职业生涯规划书范文

2014/01/21 职场文书

对公司合理化的建议书

2014/03/12 职场文书

爱心捐助倡议书

2014/05/19 职场文书

党建工作经验交流材料

2014/05/25 职场文书

班主任与学生安全责任书

2014/07/25 职场文书

公司委托书怎么写

2014/08/02 职场文书

领导班子整改方案和个人整改措施

2014/10/25 职场文书

交通事故案件代理词

2015/05/23 职场文书

学习焦裕禄先进事迹心得体会

2016/01/23 职场文书