組件化編程
什么是組件化編程
傳統方式的撰寫模式
組件化編程的模式
組件是實作應用中區域功能代碼和資源的集合
vue中非單檔案組件的基本使用
點擊查看代碼
<!--
Vue中使用組件的三大步驟：
一、定義組件(創建組件)
二、注冊組件
三、使用組件(寫組件標簽)
一、如何定義一個組件？
使用Vue.extend(options)創建，其中options和new Vue(options)時傳入的那個options幾乎一樣，但也有點區別；
區別如下：
1.el不要寫，為什么？ ——— 最終所有的組件都要經過一個vm的管理，由vm中的el決定服務哪個容器，
2.data必須寫成函式，為什么？ ———— 避免組件被復用時，資料存在參考關系，
備注：使用template可以配置組件結構，
二、如何注冊組件？
1.區域注冊：靠new Vue的時候傳入components選項
2.全域注冊：靠Vue.component('組件名',組件)
三、撰寫組件標簽：
<school></school>
-->
<!-- 準備好一個容器-->
<div id="root">
<hello></hello>
<hr>
<h1>{{msg}}</h1>
<hr>
<!-- 第三步：撰寫組件標簽 -->
<school></school>
<hr>
<!-- 第三步：撰寫組件標簽 -->
<student></student>
</div>
<div id="root2">
<hello></hello>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//第一步：創建school組件
const school = Vue.extend({
template:`
<div >
<h2>學校名稱：{{schoolName}}</h2>
<h2>學校地址：{{address}}</h2>
<button @click="showName">點我提示學校名</button>
</div>
`,
// el:'#root', //組件定義時，一定不要寫el配置項，因為最終所有的組件都要被一個vm管理，由vm決定服務于哪個容器，
data(){
return {
schoolName:'尚硅谷',
address:'北京昌平'
}
},
methods: {
showName(){
alert(this.schoolName)
}
},
})
//第一步：創建student組件
const student = Vue.extend({
template:`
<div>
<h2>學生姓名：{{studentName}}</h2>
<h2>學生年齡：{{age}}</h2>
</div>
`,
data(){
return {
studentName:'張三',
age:18
}
}
})
//第一步：創建hello組件
const hello = Vue.extend({
template:`
<div>
<h2>你好啊！{{name}}</h2>
</div>
`,
data(){
return {
name:'Tom'
}
}
})
//第二步：全域注冊組件
Vue.component('hello',hello)
//創建vm
new Vue({
el:'#root',
data:{
msg:'你好啊！'
},
//第二步：注冊組件（區域注冊）
components:{
school,
student
}
})
new Vue({
el:'#root2',
})
</script>
幾個注意點
<!--
幾個注意點：
1.關于組件名:
一個單詞組成：
第一種寫法(首字母小寫)：school
第二種寫法(首字母大寫)：School
多個單詞組成：
第一種寫法(kebab-case命名)：my-school
第二種寫法(CamelCase命名)：MySchool (需要Vue腳手架支持)
備注：
(1).組件名盡可能回避HTML中已有的元素名稱，例如：h2、H2都不行，
(2).可以使用name配置項指定組件在開發者工具中呈現的名字，
2.關于組件標簽:
第一種寫法：<school></school>
第二種寫法：<school/>
備注：不用使用腳手架時，<school/>會導致后續組件不能渲染，
3.一個簡寫方式：
const school = Vue.extend(options) 可簡寫為：const school = options
-->
<!-- 準備好一個容器-->
<div id="root">
<h1>{{msg}}</h1>
<school></school>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//定義組件
const s = Vue.extend({
name:'atguigu',
template:`
<div>
<h2>學校名稱：{{name}}</h2>
<h2>學校地址：{{address}}</h2>
</div>
`,
data(){
return {
name:'尚硅谷',
address:'北京'
}
}
})
new Vue({
el:'#root',
data:{
msg:'歡迎學習Vue!'
},
components:{
school:s
}
})
</script>
組件的嵌套（父組件、子組件和app組件）
<body>
<!-- 準備好一個容器-->
<div id="root">
</div>
</body>
<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>
VueComponent建構式
<!--
關于VueComponent：
1.school組件本質是一個名為VueComponent的建構式，且不是程式員定義的，是Vue.extend生成的，
2.我們只需要寫<school/>或<school></school>，Vue決議時會幫我們創建school組件的實體物件，
即Vue幫我們執行的：new VueComponent(options)，
3.特別注意：每次呼叫Vue.extend，回傳的都是一個全新的VueComponent！！！！
4.關于this指向：
(1).組件配置中：
data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是【VueComponent實體物件】，
(2).new Vue(options)配置中：
data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是【Vue實體物件】，
5.VueComponent的實體物件，以后簡稱vc（也可稱之為：組件實體物件），
Vue的實體物件，以后簡稱vm，
-->
分析vue和vuecomponent的關系
<!--
1.一個重要的內置關系：VueComponent.prototype.__proto__ === Vue.prototype
2.為什么要有這個關系：讓組件實體物件（vc）可以訪問到 Vue原型上的屬性、方法，
-->
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/531855.html
標籤：其他