文章目錄
- 1、為啥要使用元件
- 2、基本使用
- 3、代碼執行個體
- 4、測試效果
- 5、注意點
1、為啥要使用元件
好用啊、像堆積木一樣
2、基本使用
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>
3、代碼執行個體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标題</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<!-- 第三步、編寫元件标簽 -->
<city></city>
<hr>
<school></school>
</div>
<div id="AppSecond">
<city></city>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //設定為 false 以阻止 vue 在啟動時生成生産提示
//第一步、建立city元件
const city = Vue.extend({
template: `
<div class="cityDemo">
<h1>城市名稱：{{cityName}}</h1>
<h1>城市美食：{{cityFood}}</h1>
<button @click="show">點選我彈窗</button>
</div>
`,
data() {
return {
cityName: "周口",
cityFood: "胡辣湯"
}
},
methods: {
show() {
alert("你好啊、Vue")
}
},
})
//第一步建立 學校元件
const school = Vue.extend({
template: `
<div class="cityDemo">
<h1>學校名稱：{{schoolName}}</h1>
<h1>學校位置：{{schoolAddress}}</h1>
</div>
`,
data() {
return {
schoolName: "長沙大學",
schoolAddress: "湖南長沙"
}
}
})
// 第二步、全局注冊元件
Vue.component('city', city)
//建立Vue執行個體
new Vue({
el: '#App',
data: {
value: "Vue"
}
,
//第二步、注冊元件（局部注冊）
components: {
school,
}
})
new Vue({
el: '#AppSecond',
}) 4、測試效果
5、注意點
幾個注意點：
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)