1、效果圖分析
2、先建立一個元件
//第一步、建立city元件
const city = Vue.extend({
template: `
<div class="cityDemo">
城市名稱：{{cityName}}
城市美食：{{cityFood}}
<button @click="show">點選我彈窗</button>
</div>
`,
data() {
return {
cityName: "周口",
cityFood: "胡辣湯"
}
},
methods: {
show() {
alert("你好啊、Vue")
}
},
})
3、新建立一個元件、嵌套已經存在的元件
==注意：注冊元件的過程寫在新組建中。并且在template中要使用元件才可以生效==
//第一步建立 學校元件
const school = Vue.extend({
name: "myschoolOne",
template: `
<div class="cityDemo">
學校名稱：{{schoolName}}
學校位置：{{schoolAddress}}
<city></city>
</div>
`,
data() {
return {
schoolName: "長沙大學",
schoolAddress: "湖南長沙"
}
},
//2、注冊元件
components: {
city
}
})
4、第四步 注冊元件
//建立Vue執行個體
new Vue({
el: '#App',
data: {
value: "Vue"
},
//第二步、注冊元件（局部注冊）
components: {
school
}
})
5、實作的效果
6、套娃式嵌套 代碼執行個體
<!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">
<app></app>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //設定為 false 以阻止 vue 在啟動時生成生産提示
//第一步、建立city元件
const city = Vue.extend({
template: `
<div class="cityDemo">
城市名稱：{{cityName}}
城市美食：{{cityFood}}
<button @click="show">點選我彈窗</button>
</div>
`,
data() {
return {
cityName: "周口",
cityFood: "胡辣湯"
}
},
methods: {
show() {
alert("你好啊、Vue")
}
},
})
//第一步建立 學校元件
const school = Vue.extend({
name: "myschoolOne",
template: `
<div class="cityDemo">
學校名稱：{{schoolName}}
學校位置：{{schoolAddress}}
<city></city>
</div>
`,
data() {
return {
schoolName: "長沙大學",
schoolAddress: "湖南長沙"
}
},
//2、注冊元件
components: {
city
}
})
//第一步建立學生元件
const student = Vue.extend({
name: "student",
template: `
<div class="studentDemo">
學生姓名：{{studentName}}
學生年齡：{{studentAge}}
</div>
`,
data() {
return {
studentName: 'zyz',
studentAge: 18
}
}
})
//定義App元件
const app = Vue.extend({
template: `
<div>
<school></school>
<student></student>
</div>
`,
components: {
school,
student
}
})
// 第二步、全局注冊元件
// Vue.component('city', city)
//建立Vue執行個體
new Vue({
el: '#App',
data: {
value: "Vue"
},
//第二步、注冊元件（局部注冊）
components: {
app
}
})
</script>
</body>
</html>
7、測試效果
8、關于VueComponent
關于VueComponent：
- 1、==school元件==本質是一個名為VueComponent的構造函數，且不是程式員定義的，是Vue.extend生成的。
- 2、我們隻需要寫
<school/>
<school></school>
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執行個體對象==。
9、代碼執行個體
<!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">
展示的資訊:{{name}}
<button @click="fun()">請點選我Vue</button>
<hr>
<!-- 第三步、編寫元件标簽 -->
<school></school>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //設定為 false 以阻止 vue 在啟動時生成生産提示
//第一步建立 學校元件
const school = Vue.extend({
name: "myschoolOne",
template: `
<div class="cityDemo">
學校名稱：{{schoolName}}
學校位置：{{schoolAddress}}
<button @click="show">點選我彈窗</button>
</div>
`,
data() {
return {
schoolName: "長沙大學",
schoolAddress: "湖南長沙"
}
},
methods: {
show() {
console.log("我是VueComponent", this)
}
},
})
//建立Vue執行個體
new Vue({
el: '#App',
data: {
name: "你好，VUE"
},
methods: {
fun() {
console.log("我是Vue", this)
}
},
//第二步、注冊元件（局部注冊）
components: {
school
}
})
</script>
</body>
</html>