vue.js组件学习（上）
生活随笔
收集整理的這篇文章主要介紹了
vue.js组件学习（上）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
組件是vue.js中非常重要的一部分，打個比方，會用組件得人喝著茶就寫完的頁面，不會用的代碼打到手抽筋也未必完的成。
首先何為組件
組件可以封裝重用的代碼，擴展HTML元素，更高的說組件是自定義元素。
組件化的html
寫入vue.js的基本結構
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><div id="app"></div><script src="./../vue.js"></script><script>var vm = new Vue({el:"#app", })</script> </body> </html>然后實例new中加入components 組件
components:{ child } //注冊局部組件在id=app中添加<child></child>
實例化一個child對象，里邊添加模板組件template，然后添加內容為
template:"<div class="child">children</div>" //這里的模板會替代child這樣我們就可以在后臺發現多出來一個class名為child的標簽，頁面內容為children
可我們想組建出多個該怎么弄呢？
只需要在我們在components組件中加入childSibling
components:{ child，childSibling }然后如同上邊一樣實例一個childSibling對象那樣，然后在id="app"中再添加一個<child-sibling>自定義標簽，這樣我們就可以得到兩個標簽了。這里要注意這里的命名轉換
創建子組件
首先，我們應實例化一個子組件son
var son = {template:"<div>這是子元素</div>" }然后我們要在目標父組件中添加components組件，里邊寫入這個son，再然后在template中添加<son></son>
template:"<div><son></son</div>"這樣我們就完成了html的組件化，當然實際應用不可能這么簡單，不過都是以此類推的。
從父元素中獲取數據
如果我們用常規的方法獲取data里數據添加到模板里會報錯，這時就用到props，這個屬性是用來聲明子組件預期的數據，我們可以通過這個方法來得到data里的數據。
聲明子組件預期的數據
props:["預期數據"]綁定data數據,假設父元素為<ele>
data：{數據："111" } <ele v-bind 預期數據="數據" ></ele>這樣我們在組件中添加預期數據就可得到data里的數據內容了
還有很多這樣的方法可以參照官網進行操作https://cn.vuejs.org/v2/guide...
總結
以上是生活随笔為你收集整理的vue.js组件学习（上）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SCCM2012SP1---配置客户端发
- 下一篇： 十个有用的linux命令行技巧