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