關于組件定義:
如果Vue.component()在注冊組件的時候,組件名稱和組件模板對象變量名一致,那么可以簡寫為
關于父向子組件傳值(屬性):
默認情況下,子組件中無法訪問父組件中的data上的數據和methods中的方法.
可以通過數據綁定的形式,把父組件的數據傳遞給子組件,需要在子組件使用的時候通過:屬性名 = "父組件中的數據名"進行傳遞.
子組件中props和data的區(qū)別:
在子組件內部,屬性必須在props這個列表中聲明,否則 子組件無法使用,props列表中的屬性都是父組件傳遞過來的.并且props中的數據都是只讀的,無法重新賦值.Vue會報紅色警告
而子組件中data中的數據,并不是父組件傳遞過來的,而是子組件自身私有的,比如說 ajax請求回來的數據都可以放在data身上.并且data上的數據都是可讀可寫的.
關于父向子組件傳值(方法):
通過事件綁定給子組件傳遞方法引用,在子組件中通過
this.$emit('func')進行方法調用,傳遞參數可以通過this.$emit('func',param1,param2)進行調用
關于子向父組件傳遞數據
原理:實際上是父組件首先通過事件綁定機制,把事件傳遞給子組件,然后子組件進行調用的時候把自己的data中的數據傳遞給父組件的方法,然后在父組件的方法內,可以用過this.params = data,進行存儲.這樣可以實現子組件向父組件傳遞數據.
Vue獲取指定DOM對象:
使用this.$refs.引用名,可以在DOM元素上通過ref屬性指定引用名稱,也可以引用組件
簡便的方法進行父子組件傳值:
父組件向子組件傳值:this.$refs.'子組件的ref屬性'
子組件向父組件傳值:this.$parent
通過這種方式,都可以直接獲取到對應組件的DOM節(jié)點對象.
非父子組件間的通信---通過廣播的形式進行通信
1.創(chuàng)建一個js文件,然后引入vue,實例化通過export default暴露出去
2.在要廣播的地方引入剛才的實例,通過VueEvent.on('名稱')來接收數據.
關于路由:
后端路由:對于普通的網站,所有的超鏈接都是URL地址,所有的URL地址都對應服務器上對應的資源
前端路由:對于單頁面應用程序來說,主要是通過URL中的hash(也就是#號)來實現不同頁面之間的切換,同時,hash也有一個特點,HTTP請求中不會包含hash相關的內容,所有,單頁面程序中的頁面跳轉主要是用hash來實現的(其實就是html頁面中的錨點,通過a標簽進行跳轉)
vue-route模塊的使用:
首先通過<script>標簽的src屬性引入vue-route模塊,當引入完成后,在window全局對象中,就有了VueRoute這個構造函數.
通過new關鍵字在創(chuàng)建路由對象的時候,可以為構造函數傳遞一個配置對象.
注意:通過Vue.component()注冊組件后,只能用于<組件名稱>標簽這種方式
用來和vm實例建立關聯關系
在頁面上必須使用vue-router提供的標簽,充當路由匹配成功后展示的容器.
如果用<a>標簽來進行切換,那么href屬性跳轉的路徑必須用#開頭,用于標記這個不是真實的url路徑,而是hash,要進行前端路由匹配.
路由的執(zhí)行過程:
當點擊超鏈接后,首先會改變地址欄的url,然后會觸發(fā)路由的監(jiān)聽事件,路由監(jiān)聽到地址改變,會進行路由規(guī)則匹配,匹配成功后,會展示對應的組件,把對應的組件展示到<router-view>這個容器中去.
<router-link>標簽:
可以代替<a>標簽,不用再路徑前加#號用來標記是前端路由.
渲染到頁面后,展示的其實是<a>標簽,這個標簽可以認為是個語法糖.
前端路由中的重定向
通過在路由規(guī)則中加入redirect屬性,來完成切換組件展示
選中路由高亮:
可以通過class進行樣式設置
可以通過構造函數傳遞參數,來自定義高亮顯示的樣式,或者可以指定Bootstrap中的樣式
路由規(guī)則中定義參數:
組件也有生命周期函數,可以在created中獲取參數
第一種方式:通過GET方式的queryString來傳參,通過
this.$route.query可以獲取query這個對象
第二種方式:通過占位符來獲取路徑參數
參數保存在params屬性中,此時,請求的url必須和路由規(guī)則中的路徑參數個數一致,否則無法匹配到響應的路由,也就無法調用組件進行展示.
解析原理:
根據自定義的路由規(guī)則(path:/login/:id),生成響應的regex正則,然后用正則去匹配url,然后把解析出來的路徑參數放到params對象中
路由嵌套:
用url來表示login這個路由是屬于account這個路由下面的
通過children屬性來指定嵌套內部的路由匹配規(guī)則,注意 path不要以'/'開頭,否則,會去匹配根目錄下的login,測試頁面上的<template>標簽內必須有一個用于展示內部路由對應組件的容器<router-view>
命名視圖實現經典布局:
在<router-view>標簽上加入name屬性,指定只能存放這個名稱的組件
定義一個新的路由規(guī)則,path:'/',對應多個組件(components 是個對象),其中l(wèi)eft,其實就是這個組件的名稱,leftBox是組件模板對象.
