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

2021-09-01 02:44:47 字數 1219 閱讀 1927

父元件向子元件傳值

元件例項定義方式,注意:一定要使用props屬性來定義父元件傳遞過來的資料

使用v-bind或簡化指令,將資料傳遞到子元件中:

子元件向父元件傳值

原理:父元件將方法的引用,傳遞到子元件內部,子元件在內部呼叫父元件傳遞過來的方法,同時把要傳送給父元件的資料,在呼叫方法的時候當作引數傳遞進去;

父元件將方法的引用傳遞給子元件,其中,getmsg是父元件中methods中定義的方法名稱,func是子元件呼叫傳遞過來方法時候的方法名稱

子元件內部通過this.$emit('方法名', 要傳遞的資料)方式,來呼叫父元件中的方法,同時把資料傳遞給父元件使用

什麼是路由

對於普通的**,所有的超連結都是url位址,所有的url位址都對應伺服器上對應的資源;

對於單頁面應用程式來說,主要通過url中的hash(#號)來實現不同頁面之間的切換,同時,hash有乙個特點:http請求中不會包含hash相關的內容;所以,單頁面程式中的頁面跳轉主要用hash實現;

在單頁面應用程式中,這種通過hash改變來切換頁面的方式,稱作前端路由(區別於後端路由);

在 vue 中使用 vue-router

匯入 vue-router 元件類庫:

使用 router-link 元件來導航

登入註冊

使用 router-view 元件來顯示匹配到的元件

建立使用vue.extend建立元件

// 4.1 使用 vue.extend 來建立登入元件

var login = vue.extend();

// 4.2 使用 vue.extend 來建立註冊元件

var register = vue.extend();

建立乙個路由 router 例項,通過 routers 屬性來定義路由匹配規則

// 5. 建立乙個路由 router 例項,通過 routers 屬性來定義路由匹配規則

var router = new vuerouter(,

]});

使用 router 屬性來使用路由規則

// 6. 建立 vue 例項,得到 viewmodel

var vm = new vue();

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

定義vue元件 什麼是元件 元件的出現,就是為了拆分vue例項的 量的,能夠讓我們以不同的元件,來劃分不同的功能模組,將來我們需要什麼樣的功能,就可以去呼叫對應的元件即可 元件化和模組化的不同 模組化 是從 邏輯的角度進行劃分的 方便 分層開發,保證每個功能模組的職能單一 元件化 是從ui介面的角度...

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

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

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

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