Vue之組件詳解
更新時(shí)間：2021年11月21日 15:03:00 作者：王同學(xué)要努力
這篇文章主要為大家介紹了Vue之組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
<body>
<div id="root">
<h2>{{name}}</h2>
<hr>
<school></school>
<hr>
<student></student>
<hr>
<!-- <h2>學(xué)生姓名：{{name}}</h2>
<h2>學(xué)生年齡：{{age}}</h2> -->
</div>
<div id="root2">
<hello></hello>
</div>
<script>
Vue.config.productionTip = false;
//創(chuàng)建school組件
//el:'#root'
//組件定義時(shí) 一定不要寫el配置項(xiàng)，因?yàn)樽罱K所有的組件都要被一個(gè)vm管理 由vm決定服務(wù)于哪個(gè)容器
const school = Vue.extend({
template: `
<div>
<h2>學(xué)校名稱：{{schoolName}}</h2>
<h2>學(xué)校地址：{{address}}</h2>
<button @click="showName">點(diǎn)我提示學(xué)校名稱</button>
</div>
`,
data() {
return {
schoolName: '二中',
address: '北京',
}
},
methods: {
showName() {
alert(this.schoolName)
}
}
})
//第一步：創(chuàng)建組件
//創(chuàng)建學(xué)生組件
const student = Vue.extend({
template: `
<div>
<h2>學(xué)生姓名：{{name}}</h2>
<h2>學(xué)生年齡：{{age}}</h2>
</div>
`,
data() {
return {
name: '小王',
age: 20,
}
}
})
//創(chuàng)建vm
new Vue({
el: '#root',
data: {
name: '你好，世界！'
},
//第二步：注冊(cè)組件(局部注冊(cè))
components: {
school,
student
}
})
const hello = Vue.extend({
template: `
<div><h2>你好鴨！王同學(xué)</h2></div>
`
})
Vue.component('hello', hello)
new Vue({
el: '#root2'
})
</script>
</body>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了Vue?配置代理詳情，文章圍繞主題的相關(guān)資料展開詳細(xì)內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-04-04
vue3中g(shù)etCurrentInstance示例講解
這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance的相關(guān)資料,文中還介紹了Vue3中關(guān)于getCurrentInstance的大坑,需要的朋友可以參考下2023-03-03
vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題
這篇文章主要介紹了vue中echarts點(diǎn)擊事件點(diǎn)擊一次多次觸發(fā)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
說起canvas是css3新增的標(biāo)簽,而餅狀圖又是canvas經(jīng)典,我們公司現(xiàn)在正在用uni-app框架去研發(fā)APP,下面這篇文章主要給大家介紹了關(guān)于Vue和uniapp中該如何使用canvas的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue預(yù)覽本地pdf文件方法之vue-pdf組件使用
這篇文章主要介紹了vue預(yù)覽本地pdf文件方法之vue-pdf組件使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue使用ArcGis?API?for?js創(chuàng)建地圖實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue使用ArcGis?API?for?js創(chuàng)建地圖實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue中使用require動(dòng)態(tài)獲取圖片地址方式
這篇文章主要介紹了vue中使用require動(dòng)態(tài)獲取圖片地址方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue?項(xiàng)目?jī)?yōu)雅的對(duì)url參數(shù)加密詳解
這篇文章主要為大家介紹了vue?項(xiàng)目?jī)?yōu)雅的對(duì)url參數(shù)加密詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了antd form表單中如何嵌套自定義組件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vite?構(gòu)建環(huán)境分為開發(fā)環(huán)境和生產(chǎn)環(huán)境,不同環(huán)境會(huì)有不同的構(gòu)建策略,本文就來介紹下Vite 配置文件,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08