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 相关文章推荐
加载jQuery后$冲突的解决办法
Jul 09 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
JS立即执行的匿名函数用法分析
Nov 04 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 number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
javascript Excel操作知识点
2009/04/24 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
vue组件实例解析
2017/01/10 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
列举Python中吸引人的一些特性
2015/04/09 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
python实现图片转字符小工具
2019/04/30 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
历史学专业推荐信
2013/11/06 职场文书
西式婚礼证婚词
2014/01/12 职场文书
中秋节活动总结
2014/08/29 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
《开国大典》教学反思
2016/02/16 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers