前端與移動開發之vue day3(1)

2021-09-01 02:42:30 字數 832 閱讀 1816

定義vue元件

什麼是元件: 元件的出現,就是為了拆分vue例項的**量的,能夠讓我們以不同的元件,來劃分不同的功能模組,將來我們需要什麼樣的功能,就可以去呼叫對應的元件即可;元件化和模組化的不同:

模組化: 是從**邏輯的角度進行劃分的;方便**分層開發,保證每個功能模組的職能單一;

元件化: 是從ui介面的角度進行劃分的;前端的元件化,方便ui元件的重用;

全域性元件定義的三種方式

使用 vue.extend 配合 vue.component 方法:

var login = vue.extend();

vue.component('login', login);

直接使用 vue.component 方法:

vue.component('register', );
將模板字串,定義到script標籤種:

同時,需要使用 vue.component 來定義元件:

vue.component('account', );
注意: 元件中的dom結構,有且只能有唯一的根元素(root element)來進行包裹!

元件中展示資料和響應事件

在元件中,data需要被定義為乙個方法,例如:

vue.component('account', 

},methods:

}});

在子元件中,如果將模板字串,定義到了script標籤中,那麼,要訪問子元件身上的data屬性中的值,需要使用this來訪問;

前端與移動開發之vue day3(3)

父元件向子元件傳值 元件例項定義方式,注意 一定要使用props屬性來定義父元件傳遞過來的資料 使用v bind或簡化指令,將資料傳遞到子元件中 子元件向父元件傳值 原理 父元件將方法的引用,傳遞到子元件內部,子元件在內部呼叫父元件傳遞過來的方法,同時把要傳送給父元件的資料,在呼叫方法的時候當作引數...

前端與移動開發之vue day4(1)

父元件向子元件傳值 元件例項定義方式,注意 一定要使用props屬性來定義父元件傳遞過來的資料 使用v bind或簡化指令,將資料傳遞到子元件中 子元件向父元件傳值 原理 父元件將方法的引用,傳遞到子元件內部,子元件在內部呼叫父元件傳遞過來的方法,同時把要傳送給父元件的資料,在呼叫方法的時候當作引數...

移動端前端開發與pc端前端開發的區別

關於移動端 另外寫幾點響應螢幕大小的建議和方法 1 由於現在手機螢幕多種多樣,想要相容所有裝置所需要開發的經驗必須非常豐富,對設計師的要求也非常高,如果是初學或者開發經驗較少,可將裝置分為手機 平板 pc三種頁面來寫。2 寬度的響應 寬度的響應最近使用的最多的就是類似以下這種寫法 width cal...