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

htm调用JS代码

Mar 15 Javascript

xml和web特殊字符

Apr 28 Javascript

分页栏的web标准实现

Nov 01 Javascript

JavaScript检测字符串中是否含有html标签实现方法

Jul 01 Javascript

浅谈jQuery 选择器和dom操作

Jun 07 Javascript

基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合

Aug 11 Javascript

webpack进阶——缓存与独立打包的用法

Aug 02 Javascript

jQuery响应滚动条事件功能示例

Oct 14 jQuery

解决在vue项目中,发版之后,背景图片报错,路径不对的问题

Mar 06 Javascript

vue加载完成后的回调函数方法

Sep 07 Javascript

在vue中利用v-html按分号将文本换行的例子

Nov 14 Javascript

原生js实现购物车

Sep 23 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 XML操作的各种方法解析(比较详细)

2010/06/17 PHP

解析php中如何直接执行SHELL

2013/06/28 PHP

PHP goto语句简介和使用实例

2014/03/11 PHP

CI框架入门示例之数据库取数据完整实现方法

2014/11/05 PHP

PHP异常处理浅析

2015/05/12 PHP

redirect_uri参数错误的解决方法(必看)

2017/02/16 PHP

准确获得页面、窗口高度及宽度的JS

2006/11/26 Javascript

Jquery Ajax解析XML数据(同步及异步调用)简单实例

2014/02/12 Javascript

iframe中子父类窗口调用JS的方法及注意事项

2015/08/25 Javascript

jQuery采用连缀写法实现的折叠菜单效果

2015/09/18 Javascript

BootStrap实现树形目录组件代码详解

2016/06/21 Javascript

jQuery编写网页版2048小游戏

2017/01/06 Javascript

JavaScript常用正则函数用法示例

2017/01/23 Javascript

Vue.js数据绑定之data属性

2017/07/07 Javascript

详解express与koa中间件模式对比

2017/08/07 Javascript

Node.js中,在cmd界面,进入退出Node.js运行环境的方法

2018/05/12 Javascript

node使用Mongoose类库实现简单的增删改查

2018/11/08 Javascript

JavaScript ES6常用基础知识总结

2019/02/09 Javascript

详解如何理解vue的key属性

2019/04/14 Javascript

微信小程序授权登录详解（附完整源码）

2019/08/23 Javascript

create-react-app中添加less支持的实现

2019/11/15 Javascript

浅谈python中set使用

2016/06/30 Python

Ubuntu下创建虚拟独立的Python环境全过程

2017/02/10 Python

JupyterNotebook设置Python环境的方法步骤

2019/12/03 Python

解决Python中报错TypeError: must be str, not bytes问题

2020/04/07 Python

拿来就用！Python批量合并PDF的示例代码

2020/08/10 Python

Scrapy基于scrapy_redis实现分布式爬虫部署的示例

2020/09/29 Python

HTML5中drawImage用法分析

2014/12/01 HTML / CSS

最新计算机专业自荐信

2013/10/16 职场文书

少先队辅导员事迹材料

2014/12/24 职场文书

会计岗位职责范本

2015/04/02 职场文书

交通事故案件代理词

2015/05/23 职场文书

如何写好一份优秀的工作总结？

2019/06/21 职场文书

教你用Java在个人电脑上实现微信扫码支付

2021/06/13 Java/Android

Redis如何实现验证码发送以及限制每日发送次数

2022/04/18 Redis

解决spring.thymeleaf.cache=false不起作用的问题

2022/06/10 Java/Android