歡迎學習交流！！！
持續更新中…
文章目錄
- 組件化編程
- 1. 模塊與組件、模塊化與組件化
- 2. 非單檔案組件
- 3. 組件的嵌套
- 4. 關于VueComponent
- 一個重要的內置關系
- 5. 單檔案組件
- .vue檔案的組成（3部分）
- 基本使用
組件化編程
1. 模塊與組件、模塊化與組件化
| - | 模塊 | 組件 |
|---|---|---|
| 理解 | 向外提供特定功能的 js 程式，一般就是一個js檔案 | 用來實作區域(特定)功能效果的代碼集合(html、css、js、image) |
| 為什么要使用 | js檔案很多很復雜 | 一個界面的功能很復雜 |
| 作用 | 復用 js，簡化 js 的撰寫，提高 js 運行效率 | 復用編碼，簡化專案編碼，提高運行效率 |
模塊化：
當應用中的js都以模塊來撰寫，那這個應用就是一個模塊化的應用
組件化：
當應用中的功能都是多組件的方式來撰寫的，那這個應用就是一個組件化的應用
2. 非單檔案組件
一、非單檔案組件的特點：
- 模板撰寫沒有提示
- 沒有構建程序，無法將ES6轉換成ES5
- 不支持組件的CSS
- 真正開發中幾乎不用
二、Vue中使用組件的三大步驟：
- 定義組件(創建組件)
如何定義一個組件？
使用Vue.extend(options)創建，其中options和new Vue(options)時傳入的那個options幾乎一樣，但也有點區別：
- el不寫，原因：最終所有的組件都要經過一個vm的管理，由vm中的el決定服務哪個容器，
- data必須寫成函式，原因：避免組件被復用時，資料存在參考關系，
備注：使用template可以配置組件結構，
- 注冊組件
如何注冊組件？
- 區域注冊：用
new Vue的時候傳入components選項 - 全域注冊：
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>
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',
})
結果如圖：
注意點：
1、關于組件名:
一個單詞組成：
- 第一種寫法(首字母小寫)：school
- 第二種寫法(首字母大寫)：School
多個單詞組成：
- 第一種寫法(kebab-case命名)：my-school
- 第二種寫法(CamelCase命名)：MySchool (需要Vue腳手架支持)
備注：
- 組件名盡可能回避HTML中已有的元素名稱，例如：h2、H2都不行，
- 可以使用name配置項指定組件在開發者工具中呈現的名字，（第三方組件庫時會用到，一般不常用）
2、關于組件標簽:
- 第一種寫法：
<school></school> - 第二種寫法：
<school/> - 備注：不用使用腳手架時，
<school/>會導致后續組件不能渲染，
3、一個簡寫方式：
const school = Vue.extend(options) 可簡寫為：const school = options
3. 組件的嵌套
通常一個應用會以一棵嵌套的組件樹的形式來組織：
示例
<div id="root">
<!-- <hello></hello>
<school></school> -->
</div>
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:'你好 Vue！'
}
}
})
//定義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}
})
結果分析：
4. 關于VueComponent
1、school組件本質是一個名為VueComponent的建構式，且不是程式員定義的，是Vue.extend生成的，
2、我們只需要寫<school/>或<school></school>，Vue決議時會幫我們創建school組件的實體物件，即Vue幫我們執行的：new VueComponent(options)，
3、特別注意：每次呼叫Vue.extend，回傳的都是一個全新的VueComponent
4、關于this指向：
- 組件配置中：
data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是VueComponent實體物件， - new Vue(options)配置中：
data函式、methods中的函式、watch中的函式、computed中的函式 它們的this均是Vue實體物件，
5、VueComponent的實體物件，可簡稱vc（也可稱之為：組件實體物件），Vue的實體物件，可簡稱vm，
一個重要的內置關系
- 一個重要的內置關系：
VueComponent.prototype.__proto__ === Vue.prototype - 作用：此內置關系讓組件實體物件（vc）可以訪問到 Vue原型上的屬性、方法，
5. 單檔案組件
.vue檔案的組成（3部分）
- 模板頁面
<template>
頁面模板
</template>
- JS模板物件
<script>
export default {
data() {return {}},
methods: {},
computed: {},
components: {}
}
</script>
- 樣式
<style>
樣式定義
</style>
基本使用
- 引入組件
- 映射成標簽
- 使用組件標簽
示例
School.vue檔案中：
<template>
<div class="demo">
<h2>學校名稱：{{name}}</h2>
<h2>學校地址：{{address}}</h2>
<button @click="showName">點我提示學校名</button>
</div>
</template>
<script>
export default {
name:'School',
data(){
return {
name:'西安郵電',
address:'西安市雁塔區'
}
},
methods: {
showName(){
alert(this.name)
}
},
}
</script>
<style>
.demo{
background-color: orange;
}
</style>
Student.vue檔案中：
<template>
<div>
<h2>學生姓名：{{name}}</h2>
<h2>學生年齡：{{age}}</h2>
</div>
</template>
<script>
export default {
name:'Student',
data(){
return {
name:'張三',
age:18
}
}
}
</script>
App.vue檔案中：
<template>
<div>
<School></School>
<Student></Student>
</div>
</template>
<script>
//引入組件
import School from './School.vue'
import Student from './Student.vue'
export default {
name:'App',
components:{
School,
Student
}
}
</script>
index.html檔案中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>練習一下單檔案組件的語法</title>
</head>
<body>
<!-- 準備一個容器 -->
<div id="root"></div>
<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
<!-- <script type="text/javascript" src="./main.js"></script> -->
</body>
</html>
main.js檔案中：
import App from './App.vue'
new Vue({
el:'#root',
template:`<App></App>`,
components:{App},
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/393947.html
標籤：其他