組件化編程 什麼是組件化編程 傳統方式的編寫模式 組件化編程的模式 組件是實現應用中局部功能代碼和資源的集合 vue中非單文件組件的基本使用 點擊查看代碼 <!-- Vue中使用組件的三大步驟： 一、定義組件(創建組件) 二、註冊組件 三、使用組件(寫組件標簽) 一、如何定義一個組件？ 使用Vue. ...
組件化編程
什麼是組件化編程
傳統方式的編寫模式
組件化編程的模式
組件是實現應用中局部功能代碼和資源的集合
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 class="demo">
<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原型上的屬性、方法。
-->
