Vue框架之元件系統
阿新 • • 發佈：2018-12-04
1,Vue元件系統之全域性元件
- 1.1Vue全域性元件的在例項化呼叫Vue的模板中匯入元件的名稱
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
Vue.component("global-component",{
template: `
<div><h1>{{ xueren }}</h1>
<h3>{{ xueren }}</h3>
</div>
`,
// data是模板渲染的資料,從元件中獲取,data中要寫return返回值
data(){
return {
xueren: "Hello xueren,i miss you really!",
}
}
});
// 例項化一個Vue物件,還是有element代表找到模板那個標籤
// template是模板的渲染需要指出元件的命名,但這是要寫成標籤
new Vue({
el: "#app",
template: `<global-component></global-component>`
})- 1.2Vue全域性元件的在例項化不用在template中指定元件名稱
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<global-component></global-component>
</div>
<script>
Vue.component("global-component", {
template: `
<div>
<h3>{{ xueren }}</h3>
</div>
`,
data(){
return {
xueren: "Hello 雪人, Long time no see",
}
}
});
// 例項化一個Vue物件,第一個引數還是要找到要替換的標籤
new Vue({
el: "#app",
// template:`<global-component></global-component>`
})
</script>
</body>
</html>2,Vue全域性元件之系統的複用
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<global-component></global-component>
<global-component></global-component>
<global-component></global-component>
</div>
<script>
Vue.component("global-component", {
template: `
<div>
<h3>{{ xueren }}</h3>
</div>
`,
data(){
return {
xueren: "Hello 雪人, Long time no see",
}
}
});
// 例項化一個Vue物件,第一個引數還是要找到要替換的標籤
new Vue({
el: "#app",
// 當複用的時候一定不要在例項化的Vue中指定元件的名稱
//template:`<global-component></global-component>`
})
</script>
</body>
</html>3,Vue元件系統之區域性元件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style>
.header {
width: 200px;
height: 50px;
background-color: #00a9ff;
}
</style>
</head>
<body>
<div id="app">
</div>
<script>
let Header = {
template: `
<div class="header">
<h1>{{ xueren }}</h1>
</div>
`,
data(){
return {
xueren: "i miss you",
}
},
};
new Vue({
// 找到要替換的模板中的標籤
el: "#app" ,
// 找到區域性元件的標籤.,並使用元件
template:`<app-header></app-header>`,
// 定義完以後在例項化的Vue中註冊
components: {
"app-header": Header,
}
})
</script>
</body>
</html>
4,Vue元件入口問題
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style>
.header {
width: 200px;
height: 50px;
background-color: #00a9ff;
}
</style>
</head>
<body>
<div id="app">
</div>
<script>
let Header = {
template: `
<div>
<h1>{{ xueren }}</h1>
</div>
`,
data(){
// 2,data資料的一個單體函式,要有返回值
return {
xueren:"hello 雪人!",
}
},
};
// 2,在入口元件中註冊你寫的區域性元件App就是一個元件的入口
let App = {
// 在元件的入口也要有template模板,模板中要用元件入口的註冊名
template:`
<div>
<page-header></page-header>
<button @click="myClick">點選</button>
</div>
`,
// 註冊被呼叫的元件的元件名稱
components: {
"page-header" : Header
},
// methods是繫結點選事件執行的函式
methods: {
myClick:function(){
alert("雪雪");
}
}
};
// 1,例項化一個Vue物件3步,1:找到要渲染的標籤,2:要渲染的模板,3:components註冊元件的入口
new Vue({
el: "#app",
template: `<App></App>`,
components: {
// 當註冊的名一樣時,可以只寫一個就可以
App:App,
}
})
</script>
</body>
</html>
***在選用元件呼叫入口的時候.可以註冊多個元件,按註冊的順序去渲染頁面***
5,Vue元件系統之父子元件的通訊
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style>
.header {
width: 200px;
height: 50px;
background-color: #00a9ff;
}
</style>
</head>
<body>
<div id="app">
</div>
<script>
let Header = {
template: `
<div>
<h1>{{ xueren }}</h1>
<h3>{{ xiaoxue }}</h3>
</div>
`,
// props是1,預留出來用父元件去繫結的,2,是把傳遞過來的資料返回給模板去渲染
props:["xiaoxue"], // props是道具的意思
// data指定幾個就渲染幾個,沒有指定的就需要父元件去傳遞
data(){
return {
xueren: "Hello 雪人!"
}
}
};
// 在入口元件中註冊區域性元件
let App = {
// 模板要寫子元件中渲染的子元件的名稱,還需要繫結props的變數把資料一層一層的傳遞
template:`
<page-header v-bind:xiaoxue="fatherData"></page-header>
`,
// 註冊子元件的名稱
components: {
"page-header": Header
},
methods:{
myClick: function(){
alert("雪人好美~~~")
}
},
// 父元件的資料傳遞到模板,在由繫結事件傳遞給子元件
data(){
return {
fatherData: "Are you ok?"
}
}
};
new Vue({
el: "#app",
template: "<App></App>",
components: {
App,
}
})
</script>
</body>
</html>
6,元件系統之子父元件的通訊
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
</div>
<script>
let Header = {
template:`
<div>
<button @click="sonClick">點選改變字型大小</button>
</div>
`,
// 當點選這個按鈕觸發這個函式就會給"change-size"的值發生變化,emit就有這樣的功效
// emit就會把這個值的變化傳遞給父元件的change-size
methods: {
sonClick: function(){
this.$emit("change-size", 0.2);
}
}
};
let App = {
template: `
<div>
<span :style="{ fontSize: postFontSize + 'em' }">鞠婧禕喜歡我</span>
<my-header v-on:change-size="fatherClick"></my-header>
</div>
`,
// 註冊子元件的名稱
components:{
"my-header": Header
},
// 先給postFontSie設定一個初始值為1
data(){
return {
postFontSize: 1,
}
},
// 當change-size的值發生了變化,就會觸發這個函式,使postFontSize的值發生變化
// 並傳遞給模板
methods: {
fatherClick: function(value) {
this.postFontSize += value;
console.log(this.postFontSize)
}
}
};
new Vue({
el: "#app",
// 在模板上渲染的是父元件和子元件的模板
template: `<App></App>`,
components: {
App,
}
})
</script>
</body>
</html>
7,Vue元件系統之混入
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<my-xuexue></my-xuexue>
<my-xiaoxue></my-xiaoxue>
</div>
<script>
// 定義一個混入的方法
let mixs = {
methods: {
show: function(name){
console.log(name + "來了");
},
hide: function(name){
console.log(name + "去了");
}
}
};
// 定義子元件2個按鈕
let myXueXue = {
template:`
<div>
<button @click= "show('雪雪')">點選顯示雪雪來了</button>
<button @click="hide('雪雪')">點選顯示雪雪去了</button>
</div>
`,
// 指定混入的呼叫方法
mixins:[mixs],
};
let myXiaoXue = {
template: `
<div>
<button @mouseenter="show('小雪')">滑鼠移入顯示小雪來了</button>
<button @mouseleave="hide('小雪')">滑鼠移除顯示小雪去了</button>
</div>
`,
mixins:[mixs],
};
new Vue({
el: "#app",
// 註冊2個子元件
components: {
"my-xuexue": myXueXue,
"my-xiaoxue": myXiaoXue,
}
})
</script>
</body>
</html>
8,Vue元件系統之插槽(類似於函式的位置引數)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 80px;
height: 50px;
background-color: #00a9ff;
float: left;
margin-left: 10px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<global-component>首頁</global-component>
<global-component>免費授課</global-component>
<global-component>輕課</global-component>
<global-component>智慧題庫</global-component>
<global-component>學位課程</global-component>
</div>
<script>
Vue.component("global-component", {
// 把模板中的每一個標籤拿到slot中去渲染,slot就有這個功效
template: `
<div class="box"><slot></slot></div>
`
});
new Vue({
el: "#app",
})
</script>
</body>
</html>
9,Vue元件系統之具名插槽
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style>
body {
margin: 0;
}
.box {
width: 80px;
height: 50px;
background-color: #00a9ff;
float: left;
margin-left: 10px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<global-component>
<div slot="home">首頁</div>
<div slot="lightcourses">輕課</div>
<div slot="degreecourses">學位課程</div>
</global-component>
</div>
<script>
// 定義一個全域性的元件
Vue.component("global-component", {
// 模板會按照元件指定的順序去渲染這個頁面,slot和模板一一對應
// 有點類似於關鍵字引數
template: `
<div class="box">
<slot name="lightcourses"></slot>
<slot name="degreecourses"></slot>
<slot name="home"></slot>
</div>
`
});
new Vue({
el: "#app"
})
</script>
</body>
</html>