vue組件命名和props命名代碼詳解

更新時(shí)間：2019年09月01日 13:54:41 作者：自_定義

在本篇內(nèi)容里小編給大家講的是關(guān)于vue組件命名和props命名的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- post-title使用駝峰命名postTitle會(huì)報(bào)錯(cuò) blog-post改為blogPost會(huì)報(bào)錯(cuò) -->
    <blog-post post-title="hello!"></blog-post>
  </div>



  <script>
    Vue.component('blog-post', { //命名時(shí)候可以使用橫線
     props: ['postTitle'],         //如果這里使用連接線post-title將報(bào)錯(cuò)
     template: '<h3>{{ postTitle }}</h3>'
    })

    new Vue({
      el:"#app",

    })
  </script>

</body>
</html>

總結(jié) props里可使用駝峰命名但不能用橫線，如果props使用駝峰組件上將使用橫線

vue組建命名可以使用駝峰和橫線，如果使用駝峰組建使用將采用橫線使用

以上就是關(guān)于vue組件命名和props命名的全部知識(shí)點(diǎn)內(nèi)容，感謝大家的學(xué)習(xí)和對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

淺析vue-cli3配置webpack-bundle-analyzer插件【推薦】
小編最近為了優(yōu)化vue項(xiàng)目性能，需要使用webpack-bundle-analyzer插件來(lái)分析報(bào)文件，在網(wǎng)上沒(méi)有找到合適的，下面小編給大家寫(xiě)出來(lái)一個(gè)供大家參考
2019-10-10
VSCode前端Vue項(xiàng)目引入Element-ui組件三步簡(jiǎn)單操作方法
elementui相當(dāng)于一個(gè)庫(kù),封裝好的內(nèi)容,我們引入到vue項(xiàng)目中,就可用庫(kù)中的內(nèi)容,這篇文章主要給大家介紹了關(guān)于VSCode前端Vue項(xiàng)目引入Element-ui組件的三步簡(jiǎn)單操作方法,需要的朋友可以參考下
2024-07-07
vue實(shí)現(xiàn)桌面向網(wǎng)頁(yè)拖動(dòng)文件的示例代碼(可顯示圖片/音頻/視頻)
這篇文章主要介紹了vue實(shí)現(xiàn)桌面向網(wǎng)頁(yè)拖動(dòng)文件的示例代碼(可顯示圖片/音頻/視頻),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-03-03
vue關(guān)于自定義指令與v-if沖突的問(wèn)題
這篇文章主要介紹了vue關(guān)于自定義指令與v-if沖突的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue中對(duì)時(shí)間戳的處理方式
這篇文章主要介紹了vue中對(duì)時(shí)間戳的處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue實(shí)現(xiàn)導(dǎo)出Word文件(數(shù)據(jù)流方式)
這篇文章主要介紹了vue實(shí)現(xiàn)導(dǎo)出Word文件(數(shù)據(jù)流方式)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue?router應(yīng)用問(wèn)題實(shí)戰(zhàn)記錄
vue-router是vue.js官方的路由插件,他和vue.js是深度集成的適合構(gòu)建單頁(yè)面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于Vue?router應(yīng)用問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
vue如何動(dòng)態(tài)加載組件詳解
組件是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關(guān)于vue如何動(dòng)態(tài)加載組件的相關(guān)資料,需要的朋友可以參考下
2022-10-10
vue3中watch監(jiān)聽(tīng)的四種寫(xiě)法
本文主要介紹了vue3中watch監(jiān)聽(tīng)的四種寫(xiě)法,包含了ref 定義的數(shù)據(jù),reactive定義的數(shù)據(jù),函數(shù)返回的值（getter函數(shù)）和前面3個(gè)內(nèi)容的數(shù)組,具有一定的參考價(jià)值,感興趣的可以了了解一下
2024-02-02
vue自定義底部導(dǎo)航欄Tabbar的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自定義底部導(dǎo)航欄Tabbar的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09