Vue 元件
一、概念
Vue基於可以重用、獨立的思想,設計出元件這一概念,元件可以使程式設計師對每個部分進行單獨設計。
如下圖為元件很形象的定義
二、非單檔案元件
1.元件的基礎使用
<div id="root">
<student></student>
</div>
區域性元件以及註冊
//第一步:建立student元件
const student = Vue.extend({//此處school即為Vue建立的元件
name:'Student',//首字母大寫,約定俗成。Vue在用該元件時,會自動將首字母大寫
template:``,//可以在此處寫簡單的模板
data(){//元件內的data,是以物件形式儲存的,不可以寫成陣列形式
return {
name:"張三",
age:19
}
},
methods: {
}
})
new Vue({
el:'#root',
data:{
msg:'你好啊!'
},
//第二步:註冊元件(區域性註冊)
components:{
student
}
})
全域性元件以及註冊
<div id="root">
<hello></hello>
</div>
//第一步:建立hello元件
const hello = Vue.extend({
template:`
<div>
<h2>你好啊!{{name}}</h2>
</div>
`,
data(){
return {
name:'Tom'
}
}
})
//第二步:全域性註冊元件
Vue.component('hello',hello)
new Vue({
el:'#root2',
})
2.元件的巢狀
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產提示。
//定義student元件
const student = Vue.extend({
name:'student',
template:`
<div>
<h2>學生姓名:{{name}}</h2>
<h2>學生年齡:{{age}}</h2>
</div>
`,
data(){
return {
name:'尚矽谷',
age:18
}
}
})
//定義school元件
const school = Vue.extend({
name:'school',
template:`
<div>
<h2>學校名稱:{{name}}</h2>
<h2>學校地址:{{address}}</h2>
<student></student>
</div>
`,
data(){
return {
name:'尚矽谷',
address:'北京'
}
},
//註冊元件(區域性)
components:{
student
}
})
//定義hello元件
const hello = Vue.extend({
template:`<h1>{{msg}}</h1>`,
data(){
return {
msg:'歡迎來到尚矽谷學習!'
}
}
})
//定義app元件
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
components:{
school,
hello
}
})
//建立vm
new Vue({
template:'<app></app>',
el:'#root',
//註冊元件(區域性)
components:{app}
})
</script>
3.重要的內建關係
VueComponent.prototype.proto === Vue.prototype