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