Vue中的元件以及路由

為什麼把檢視給元件化拆成一塊一塊的呢？

說白了, 元件就是對區域性檢視的封裝

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

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

var login = vue.extend();

vue.component(『login』, login);

直接使用 vue.component 方法：

vue.component(『register』, );

將模板字串，定義到script標籤種：

vue.component('account', );

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

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

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

使用components屬性定義區域性子元件

元件例項定義方式：

元件例項定義方式：

// 登入元件

const login = vue.extend();

vue.component(『login』, login);

// 註冊元件

const register = vue.extend();
vue.component('register', register);
// 建立 vue 例項，得到 viewmodel
var vm = new vue(,
methods: {}
});

父元件向子元件傳值

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

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

子元件向父元件傳值

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

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

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

目標：主要練習父子元件之間傳值

使用 this.$refs 來獲取元素和元件

什麼是路由

在 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 屬性來使用路由規則

設定路由高亮

設定路由切換動效

在路由規則中定義引數

在規則中定義引數：

通過 this.$route.params來獲取路由中的引數：

var register = vue.extend();

使用 children 屬性實現路由巢狀

命名檢視實現經典布局

標籤**結構：

js**：

css 樣式：

watch屬

vue路由使用以及元件擴充套件

元件ref的使用 獲取dom節點 給dom節點記上ref屬性，可以理解為給dom節點起了個名字。加上ref之後，在 refs屬性中多了這個元素的引用。通過vue例項的 refs屬性拿到這個dom元素。獲取元件 給元件記上ref屬性，可以理解為給元件起了個名字。加上ref之後，在 refs屬性中多了這...

Vue元件 子元件向父元件傳遞資料以及路由

我們知道，父元件使用 prop 傳遞資料給子元件。但子元件怎麼跟父元件通訊呢？這個時候 vue 的自定義事件系統就派得上用場了。每個 vue 例項都實現了事件介面，即 vue 的事件系統與瀏覽器的 eventtarget api 有所不同。儘管它們的執行起來類似，但是 on 和 emit 並不是ad...

Vue的元件和路由

元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素，封裝可重用的 在較高層面上，元件是自定義元素，vue.js 的編譯器為它新增特殊功能。元件是對特點功能 html,css,js 的封裝,通過元件的名字可以重複 利用該元件中的 1全域性元件 全域性元件的語...