在vue
angular
react
三大前端框架的大前端時代。許多人選擇了vue
,在 github 上的star
,vue
已經超過react
的數量了。雖然star
並不能代表vue
更強,不過在發展速度上看來,vue
確實很快。
在模組化的前端時代,萬物皆元件,vue
學習元件是必不可少的。
html
、jq
之後,在初次接觸vue
的元件時候,卻是滿臉矇蔽。
今天我們們以最簡單的方式,帶vue
小白童鞋們,步入元件的世界~
我們們今天講三種元件使用方式
- 基本元件
- 全域性元件
- 構造元件
1. 基本元件四步驟
- 寫好元件(廢話~)
- 在頁面種引用元件
- 在components中宣告元件
- 在頁面上使用
我們們以一個
button
子元件為例
專案src結構:
元件一般都放在components資料夾下:1.寫好子元件:
<template>
<button class="btn" :style="{color:color}">
<slot/> <!-- 插槽 -->
</button>
</template>
<script>
export default {
// 傳入子元件的引數寫到props
props: {
color: {
type: String, // 顏色引數型別
default: "#000" // 預設黑色
}
}
}
</script>
<style scoped>
.btn {
width: 110px;
height: 60px;
border-radius: 10px;
border: none;
font-size: 15px;
}
</style>
複製程式碼
2.3.4.父元件:
<template>
<div id="app">
<!-- 4. 在頁面上使用 -->
<Button color="red">我是插槽的值</Button>
</div>
</template>
<script>
// 2. 在頁面種引用元件
import Button from '@/components/Button.vue'
export default {
name: "app",
// 3. 在components中宣告元件
components: {
Button
}
};
</script>
複製程式碼
效果:
2. 全域性元件五步驟
- 寫好元件(還是廢話~)
- 子元件新增install方法
- 在
main.js
中引用 - 使用
Vue.use
方法 - 在頁面上使用
1.子元件還是那樣~~:
2. 子元件新增install方法
Button.js :
import ButtonComponent from './Button.vue'
// 新增install方法 (外掛方法)
const Button = {
install: function (Vue) {
Vue.component("Button", ButtonComponent);
}
}
// 匯出Button
export default Button
複製程式碼
當然 你可以處理多個全域性元件:
import ButtonComponent1 from './Button1.vue'
import ButtonComponent2 from './Button2.vue'
import ButtonComponent3 from './Button3.vue'
const buttonList = [
ButtonComponent1,
ButtonComponent2,
ButtonComponent3
];
// 新增install方法 (外掛方法)
const Button = {
install: function (Vue) {
buttonList.forEach(button=>{
// 這裡 使用每個元件的 name 屬性作為元件名
Vue.component(button.name, button);
})
}
}
// 匯出Button
export default Button
複製程式碼
3.4. main.js
import Vue from 'vue'
import App from './App.vue'
// 3
import Button from '@/components/Button.js'
// 4
Vue.use(Button);
new Vue({
render: h => h(App),
}).$mount('#app')
複製程式碼
5. 在頁面上使用
app.vue:
<template>
<div id="app">
<!-- 5. 在頁面上使用 -->
<Button color="blue">我是全域性按鈕</Button>
</div>
</template>
複製程式碼
效果如下:
3. 構造元件四步驟
- 寫好元件(還**是廢話~)
vue.extend
構建元件- 掛載
Vue.prototype
- 在js中使用
1.寫好子元件:
<template>
<p class="Message">{{value}}</p>
</template>
<script>
export default {
data() {
return {
value: "我是一個彈框"
};
}
};
</script>
<style>
.Message {
position: fixed;
bottom: 30px;
width: 200px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: 10px;
left: 50%;
transform: translateX(-50%);
line-height: 30px;
text-align: center;
font-size: 15px;
animation: messageFade 3s 1;
}
/* 加個簡單動畫 */
@keyframes messageFade {
0% {
opacity: 0;
-webkit-transform: translate3d(-50%, 80%, 0);
transform: translate3d(-50%, 80%, 0);
}
16% {
opacity: 1;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
84% {
opacity: 1;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(-50%, 80%, 0);
transform: translate3d(-50%, 80%, 0);
}
}
</style>
複製程式碼
2. vue.extend
構建元件
Message.js :
import Vue from 'vue';
import Message from './Message.vue';
// 構造元件
const MessageConstructor = Vue.extend(Message);
// 設定刪除元件
const removeDom = (target) => {
target.parentNode.removeChild(target);
};
// 構造元件新增關閉方法
MessageConstructor.prototype.close = function() {
this.visible = false;
removeDom(this.$el);
};
const MessageDiv = (options) => {
// 例項化元件
const instance = new MessageConstructor({
el: document.createElement('div'),
// 元件引數,運用到元件內的data
data: options,
});
// 在body新增元件
document.body.appendChild(instance.$el);
Vue.nextTick(() => {
instance.timer = setTimeout(() => {
// 定時關閉元件
instance.close();
}, 3000);
});
return instance;
};
export default MessageDiv;
複製程式碼
3. 掛載 Vue.prototype
main.js :
import Message from '@/components/Message.js'
Vue.prototype.$message = Message;
複製程式碼
4. 使用:
<template>
<div id="app">
<Button color="blue" @click.native="msg">我是全域性按鈕</Button>
</div>
</template>
<script>
import Button from "@/components/Button.vue";
export default {
name: "app",
components: {
Button
},
methods: {
msg() {
// 4. 使用構造元件
this.$message({value:'我是構造元件'});
}
}
};
</script>
複製程式碼
效果:
以上就是三種元件的基本使用啦~~