vue中template的三种写法示例
更新时间：2020年10月21日 08:32:43 作者：默默的点滴
这篇文章主要介绍了vue中template的三种写法示例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
第一种(字符串模板写法):
直接写在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的资料请关注脚本之家其它相关文章！
相关文章
CreateJS是基于HTML5开发的一套模块化的库和工具。这篇文章主要介绍了Vue项目引入CreateJS的方法（亲测）,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vue单页面修改样式无法覆盖问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
这篇文章主要介绍了详解Vue.js 可拖放文本框组件的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
解决vue3中from表单嵌套el-table时填充el-input,v-model不唯一问题
这篇文章主要给大家介绍一下如何解决vue3中from表单嵌套el-table时填充el-input,v-model不唯一问题，文中有相关的解决方法，通过代码示例介绍的非常详细,需要的朋友可以参考下2023-07-07
一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法
这篇文章主要介绍了一文搞懂Vue3中的异步组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
Vue的响应式原理是Vue最核心的特性之一，也是Vue能够为开发者提供高效便捷的开发体验的重要原因之一，这篇文章主要介绍了响应式的原理及其实现方式，需要详细了解可以参考下文2023-05-05
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形,下面通过本文给大家分享Vue.js中的图片引用路径的方式，感兴趣的朋友一起看看吧2017-07-07
今天小编就为大家分享一篇解决vue v-for src 图片路径问题 404，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue 解决移动端弹出键盘导致页面fixed布局错乱的问题,通过实例代码给大家分享解决方案，对vue 移动端弹出键盘相关知识感兴趣的朋友一起看看吧2022-04-04
这篇文章主要为大家详细介绍了Vue的生命周期，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
最新评论