沒有搭建腳手架時vue組件的使用方式
更新時間：2023年10月31日 09:16:42 作者：越來越好。
這篇文章主要介紹了沒有搭建腳手架時vue組件的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
沒有搭建腳手架時vue組件的使用
全局組件
//全局組件 第一種聲名方式
var s = Vue.extend({
template: "<h6>全局組件 第一種聲名方式</h6>"
})
Vue.component("hello", s);
//前臺標簽調(diào)用 <hello></hello>
//全局組件 第二種聲明方式
Vue.component("k", {
template: "<h6>全局組件 第二種聲明方式</h6>"
});
//前臺標簽調(diào)用 <k></k>局部組件
components: {
//局部組件，聲明方式1
zujian1: {
template: "<h6>局部組件，聲明方式</h6>" //因為聲明的是字符串直接調(diào)用 <zujian1></zujian1>
},
//局部組件，聲明方式2
zujian2: {
template: "#zujian2",
data() {
return {
msg: "組件2的值"
}
}
},
}
//第二種調(diào)用方式
//因為聲明的不是字符串所以不能直接使用 需要通過標簽<template id="zujian2"></template> 標簽之間必須要用html標簽
如<template id="zujian2"><div>{{msg}}</div></template> 不能沒有html標簽就直接調(diào)用
<head>
<template id="zujian2"> //此處要加上組件的id
<p>{{msg}}</p>
</template>
<body>
<!--頁面容器-->
<div id="my" class="container" v-cloak>
<div class="container">
<hello></hello>
<k></k>
<zujian1></zujian1>
<zujian2></zujian2> /*為空的時候不能使用，必須要用到模板*/
</div>
</div>
</body>
</head>vue腳手架—組件的使用
為什么用組件
需求：想要多個收起 展開的部分
方法1： 復制代碼
- 代碼重復
- 冗余不利于維護
<template>
<div id="app">
<!-- 目標:點擊展開或收起時，把內(nèi)容區(qū)域顯示或者隱藏 -->
<h3>折疊面板</h3>
<div>
<div class="title">
<h4>芙蓉樓送辛漸</h4>
<span @click="isShow = !isShow">{{ isShow ? '收起' : '展開' }}</span>
</div>
<div class="container" v-show="isShow">
<p>一片冰心在玉壺</p>
<p>一片冰心在玉壺</p>
<p>一片冰心在玉壺</p>
<p>一片冰心在玉壺</p>
</div>
</div>
<!-- 復制 -->
<div>
<div class="title">
<h4>芙蓉樓送辛漸</h4>
<span @click="isShow1 = !isShow1">{{ isShow1 ? '收起' : '展開' }}</span>
</div>
<div class="container" v-show="isShow1">
<p>一片冰心在玉壺</p>
<p>一片冰心在玉壺</p>
<p>一片冰心在玉壺</p>
<p>一片冰心在玉壺</p>
</div>
</div>
<!-- 復制 -->
<div>
<div class="title">
<h4>芙蓉樓送辛漸</h4>
<span @click="isShow2 = !isShow2">{{ isShow2 ? '收起' : '展開' }}</span>
</div>
<div class="container" v-show="isShow2">
<p>一片冰心在玉壺</p>
<p>一片冰心在玉壺</p>
<p>一片冰心在玉壺</p>
<p>一片冰心在玉壺</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
isShow1: false,
isShow2: false,
}
},
}
</script>
<style scoped>
#app {
width: 400px;
margin: 20px auto;
background-color: yellow;
border: 4px solid burlywood;
border-radius: 2px;
padding: 10px;
}
h3 {
text-align: center;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
padding: 0 5px;
}
</style>
vue 組件-概念
可復用的vue實例，封裝標簽，樣式和代碼
組件化： 封裝的思想，把頁面上 可復用的部分，封裝為組件，從而方便項目的開發(fā)和維護
一個頁面，可以拆分成一個個組件（一個vue文件），一個組件就是一個整體，每個組件可以有自己獨立的結(jié)構，樣式和行為(html,css,js)
vue組件–基礎使用
每個組件都是一個獨立的個體，代碼里體現(xiàn)為一個獨立的vue文件
哪部分標簽復用，就把哪部分封裝到組件內(nèi)
- 組件內(nèi)template只能有一個標簽
- 組件內(nèi)的data必須是一個函數(shù)，獨立作用域
步驟：
1.創(chuàng)建組件
創(chuàng)建組件 components/Pannel.vue
封裝結(jié)構+樣式+js 組件都是獨立的，為了復用
<template>
<div>
<div class="title">
<h4>芙蓉樓送辛漸</h4>
<span @click="isShow = !isShow">{{ isShow ? '收起' : '展開' }}</span>
</div>
<div class="container" v-show="isShow">
<p>一片冰心在玉壺</p>
<p>一片冰心在玉壺</p>
<p>一片冰心在玉壺</p>
<p>一片冰心在玉壺</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: false,
}
},
}
</script>
<style scoped>
.title {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ccc;
padding: 0 5px;
}
</style>
2.注冊組件
注冊組件，創(chuàng)建后需要注冊后再使用
全局注冊使用
全局入口main.js 在new Vue之上注冊
語法：
// 全局注冊組件
// 1 引入組件
import Pannel from './components/Pannel'
// 2 全局注冊組件
/*
Vue.component('組件名',組件對象)
*/
Vue.component('PannelG', Pannel)
全局注冊組件PannelG，就可以當做標簽在任意vue文件中的template中使用
單雙標簽都可以或者小寫加 - 形式，運行后，會把這個自定義標簽當做組件解析，使用 組件里封裝的標簽替換到這個位置
<PannelG></PannelG>
<PannelG />
<pannel-g></pannel-g>
局部注冊使用
語法
import 組件對象 from 'vue文件路徑'
export default {
components：{
'組件名':組件對象
}
}
在vue文件中引入，注冊，使用
<template>
<div id="app">
<hr />
<MyPannel></MyPannel>
<my-pannel></my-pannel>
</div>
</template>
<script>
// 1引入組件
import MyPannel from './components/MyPannel.vue'
export default {
//2 局部注冊組件
components: {
MyPannel: MyPannel,
},
}
</script>
組件使用總結(jié)：
- (創(chuàng)建)封裝html+css+js到獨立的.vue文件中
- (引入注冊)組件文件==>得到組件配置對象
- (使用)當前頁面當做標簽使用
vue組件-scoped作用
解決多個組件樣式名相同，沖突問題
需求：div標簽名選擇器，設置背景色
問題: 組件里的div和外面的div都生效了
解決：給Pannel.vue組件里style標簽上加scoped屬性
<style scoped>
在style上假如scoped屬性，就會在此組件的標簽上加上一個隨機生成的data-v開頭的屬性
而且必須是當前組件的元素，才會有這個自定義屬性，才會被這個樣式作用到
style上加scoped，組件內(nèi)的樣式只在當前vue組件生效
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了Vue3中配置404路由及懶加載的解決過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
解決VUEX刷新的時候出現(xiàn)數(shù)據(jù)消失
這篇文章主要介紹了解決VUEX刷新的時候出現(xiàn)數(shù)據(jù)消失,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了解決pycharm雙擊但是無法打開的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue2和vue3的組件封裝還是有區(qū)別,下面這篇文章主要給大家介紹了關于Vue3如何封裝組件的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考學習價值,需要的朋友可以參考下2023-02-02
解決antd的Form組件setFieldsValue的警告問題
這篇文章主要介紹了解決antd的Form組件setFieldsValue的警告問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue3 vite pinia配置動態(tài)路由、解決刷新頁面路由消失的問題
這篇文章主要介紹了vue3 vite pinia配置動態(tài)路由、解決刷新頁面路由消失的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
很多時候為了讓提高用戶的體驗感,在頁面上添加緩存,是十分有必要的,?下面這篇文章主要給大家介紹了關于vue3.0列表頁面做緩存的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
vue form check 表單驗證的實現(xiàn)代碼
這篇文章主要介紹了vue form check 表單驗證的實現(xiàn)代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
這篇文章主要介紹了Electron 如何調(diào)用本地模塊的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家詳細介紹了Vue3自定義drag指令的相關知識,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12