vue元件路由事件

目錄元件切換

父子元件傳值

路由watch監聽屬性的使用

computed計算屬性的使用

watch、computed和methods之間的對比

nrm的安裝使用

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

使用 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例項定義：

元件例項定義方式

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

使用component標籤，來引用元件，並通過:is屬性來指定要載入的元件：

註冊新增切換樣式：

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

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

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

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

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

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

在單頁面應用程式中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別於後端路由）；

匯入 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();

在規則中定義引數：

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

var register = vue.extend();

標籤**結構：

js**：

css 樣式：

想要實現名和姓兩個文字框的內容改變，則全名的文字框中的值也跟著改變；

監聽data中屬性的改變：=}

監聽路由物件的改變：

註冊預設只有getter的計算屬性：=}

定義有getter和setter的計算屬性：

}computed屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算。主要當作屬性來使用；

methods方法表示乙個具體的操作，主要書寫業務邏輯；

watch乙個物件，鍵是需要觀察的表示式，值是對應**函式。主要用來監聽某些特定資料的變化，從而進行某些具體的業務邏輯操作；可以看作是computed和methods的結合體；

作用：提供了一些最常用的npm包映象位址，能夠讓我們快速的切換安裝包時候的伺服器位址；

什麼是映象：原來包剛一開始是只存在於國外的npm伺服器，但是由於網路原因，經常訪問不到，這時候，我們可以在國內，建立乙個和官網完全一樣的npm伺服器，只不過，資料都是從人家那裡拿過來的，除此之外，使用方式完全一樣；

執行npm i nrm -g全域性安裝nrm包；

使用nrm ls檢視當前所有可用的映象源位址以及當前所使用的映象源位址；

使用nrm use npm或nrm use taobao切換不同的映象源位址；

vue元件路由事件

Vue 元件和路由

vue 函式路由跳轉 vue路由和元件通訊

Vue的元件和路由

vue元件 路由 事件

Vue 元件 和 路由

vue 函式 路由跳轉 vue路由和元件通訊

Vue的元件和路由

相關推薦

vue元件路由事件

Vue 元件和路由

vue 函式路由跳轉 vue路由和元件通訊