vue中template的三种写法示例
时间：2021-05-28 08:02:13|栏目：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>
上一篇：elementUI select组件默认选中效果实现的方法
栏 目：vue
下一篇：vue实现简单图片上传
本文标题：vue中template的三种写法示例
本文地址：http://www.codeinn.net/misctech/130642.html
