Vue組件模板的幾種書(shū)寫(xiě)形式(3種)
更新時(shí)間：2020年02月19日 16:05:54 作者：echozzh
這篇文章主要介紹了Vue組件模板的幾種書(shū)寫(xiě)形式(3種)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
1.第一種使用script標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<test-component></test-component>
</div>
<script type="text/x-template" id="testComponent"><!-- 注意 type 和id。 -->
<div>{{test}} look test component!</div>
</script>
</body>
<script>
//全局注冊(cè)組件
Vue.component('test-component',{
template: '#testComponent',
data(){
return{
test:"hello"
}
}
})
new Vue({
el: '#app'
})
</script>
</html>
注意：使用<script>標(biāo)簽時(shí)，type指定為text/x-template，意在告訴瀏覽器這不是一段js腳本，
瀏覽器在解析HTML文檔時(shí)會(huì)忽略<script>標(biāo)簽內(nèi)定義的內(nèi)容。
2.第二種使用template標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<test-component></test-component>
</div>
<template id="testComponent">
<div>look test component!</div>
</template>
</body>
<script>
Vue.component('test-component',{
template: '#testComponent'
})
new Vue({
el: '#app'
})
</script>
</html>
當(dāng)然，如果template內(nèi)容少的話，我們可以直接在組件中書(shū)寫(xiě)，而不需要用template標(biāo)簽。像下面這樣：
Vue.component('test-component',{
template:`<h1>this is test,{{test}}</h1>`,
data(){
return{
test:"hello test"
}
}
})
3.第三種 單文件組件
這種方法常用在vue單頁(yè)應(yīng)用中
創(chuàng)建.vue后綴的文件,組件Hello.vue，放到components文件夾中
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: '歡迎！'
}
}
}
</script>
app.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
以上就是Vue組件模板的幾種書(shū)寫(xiě)形式(3種)的詳細(xì)內(nèi)容，更多關(guān)于Vue 組件模板請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vite配置路徑別名的簡(jiǎn)單實(shí)現(xiàn)方法
Vite項(xiàng)目中我們可以手動(dòng)將src路徑設(shè)置**@**路徑別名,可以省下很多引入路徑的冗余路徑,下面這篇文章主要給大家介紹了關(guān)于Vite配置路徑別名的簡(jiǎn)單實(shí)現(xiàn)方法,需要的朋友可以參考下2023-04-04
Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果
這篇文章主要介紹了Vue?基于?vuedraggable?實(shí)現(xiàn)選中、拖拽、排序效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
在vue中實(shí)現(xiàn)在線預(yù)覽PDF文件我們可以使用vue-pdf來(lái)實(shí)現(xiàn),下面這篇文章主要介紹了Vue中使用vue-pdf嵌入和展示PDF文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
這篇文章主要介紹了使用Vue逐步實(shí)現(xiàn)Watch屬性詳解，watch對(duì)象中的value分別支持函數(shù)、數(shù)組、字符串、對(duì)象，較為常用的是函數(shù)的方式，當(dāng)想要觀察一個(gè)對(duì)象以及對(duì)象中的每一個(gè)屬性的變化時(shí)，便會(huì)用到對(duì)象的方式2022-08-08
這篇文章主要介紹了詳解Vue CLI3配置解析之css.extract,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue中的@click.native 原生點(diǎn)擊事件
這篇文章主要介紹了vue中的@click.native 原生點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
自定義指令是用來(lái)操作DOM的。自定義指令就是一種有效的補(bǔ)充和擴(kuò)展，不僅可用于定義任何的DOM操作，并且是可復(fù)用的。這篇文章主要介紹了Vue.js自定義指令的用法與實(shí)例解析，一起看看吧2017-01-01
mixins是一種分發(fā) Vue 組件中可復(fù)用功能的使用方式,它是一個(gè) js 對(duì)象,包含我們組件script中的任意功能選項(xiàng),下面就跟隨小編一起來(lái)看看它的具體使用吧2024-03-03
基于vue和bootstrap實(shí)現(xiàn)簡(jiǎn)單留言板功能
這篇文章主要為大家詳細(xì)介紹了基于vue和bootstrap實(shí)現(xiàn)簡(jiǎn)單留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件
這篇文章主要介紹了vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11