第三章 Vue 組件&路由
定義Vue組件
什么是組件： 組件的出現(xiàn)，就是為了拆分Vue實例的代碼量的昔搂，能夠讓我們以不同的組件巩趁，來劃分不同的功能模塊议慰，將來我們需要什么樣的功能别凹，就可以去調(diào)用對應(yīng)的組件即可；
組件化和模塊化的不同：
- 模塊化： 是從代碼邏輯的角度進行劃分的坤溃；方便代碼分層開發(fā)祠饺，保證每個功能模塊的職能單一道偷；
- 組件化： 是從UI界面的角度進行劃分的；前端的組件化换途，方便UI組件的重用军拟；
全局組件定義的三種方式
- 使用 Vue.extend 配合 Vue.component 方法：
var login = Vue.extend({
template: '<h1>登錄</h1>'
});
Vue.component('login', login);
- 直接使用 Vue.component 方法：
Vue.component('register', {
template: '<h1>注冊</h1>'
});
- 將模板字符串忠蝗，定義到script標簽種：
<script id="tmpl" type="x-template">
<div><a href="#">登錄</a> | <a href="#">注冊</a></div>
</script>
同時，需要使用 Vue.component 來定義組件：
Vue.component('account', {
template: '#tmpl'
});
注意： 組件中的DOM結(jié)構(gòu)骇两，有且只能有唯一的根元素（Root Element）來進行包裹！
組件中展示數(shù)據(jù)和響應(yīng)事件
- 在組件中馏颂，
data需要被定義為一個方法示血，例如：
Vue.component('account', {
template: '#tmpl',
data() {
return {
msg: '大家好！'
}
},
methods:{
login(){
alert('點擊了登錄按鈕');
}
}
});
- 在子組件中救拉，如果將模板字符串难审，定義到了script標簽中，那么亿絮，要訪問子組件身上的
data屬性中的值告喊，需要使用this來訪問；
【重點】為什么組件中的data屬性必須定義為一個方法并返回一個對象
- 通過計數(shù)器案例演示
使用components屬性定義局部子組件
- 組件實例定義方式：
<script>
// 創(chuàng)建 Vue 實例派昧，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: { // 定義子組件
account: { // account 組件
template: '<div><h1>這是Account組件{{name}}</h1><login></login></div>', // 在這里使用定義的子組件
components: { // 定義子組件的子組件
login: { // login 組件
template: "<h3>這是登錄組件</h3>"
}
}
}
}
});
</script>
- 引用組件：
<div id="app">
<account></account>
</div>
使用flag標識符結(jié)合v-if和v-else切換組件
- 頁面結(jié)構(gòu)：
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<my-com1 v-if="flag"></my-com1>
<my-com2 v-else="flag"></my-com2>
</div>
- Vue實例定義：
<script>
Vue.component('myCom1', {
template: '<h3>奔波霸</h3>'
})
Vue.component('myCom2', {
template: '<h3>霸波奔</h3>'
})
// 創(chuàng)建 Vue 實例秆吵，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {}
});
</script>
使用:is屬性來切換不同的子組件,并添加切換動畫
- 組件實例定義方式：
// 登錄組件
const login = Vue.extend({
template: `<div>
<h3>登錄組件</h3>
</div>`
});
Vue.component('login', login);
// 注冊組件
const register = Vue.extend({
template: `<div>
<h3>注冊組件</h3>
</div>`
});
Vue.component('register', register);
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: { comName: 'login' },
methods: {}
});
- 使用
component標簽，來引用組件对嚼，并通過:is屬性來指定要加載的組件：
<div id="app">
<a href="#" @click.prevent="comName='login'">登錄</a>
<a href="#" @click.prevent="comName='register'">注冊</a>
<hr>
<transition mode="out-in">
<component :is="comName"></component>
</transition>
</div>
- 添加切換樣式：
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(30px);
}
.v-enter-active,
.v-leave-active {
position: absolute;
transition: all 0.3s ease;
}
h3{
margin: 0;
}
</style>
父組件向子組件傳值
- 組件實例定義方式已脓，注意：一定要使用
props屬性來定義父組件傳遞過來的數(shù)據(jù)
<script>
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '這是父組件中的消息'
},
components: {
son: {
template: '<h1>這是子組件 --- {{finfo}}</h1>',
props: ['finfo']
}
}
});
</script>
- 使用
v-bind或簡化指令句葵，將數(shù)據(jù)傳遞到子組件中：
<div id="app">
<son :finfo="msg"></son>
</div>
子組件向父組件傳值
- 原理：父組件將方法的引用忆矛，傳遞到子組件內(nèi)部，子組件在內(nèi)部調(diào)用父組件傳遞過來的方法审胚，同時把要發(fā)送給父組件的數(shù)據(jù)痘系，在調(diào)用方法的時候當(dāng)作參數(shù)傳遞進去悉默；
- 父組件將方法的引用傳遞給子組件间聊，其中迎变，
getMsg是父組件中methods中定義的方法名稱，func是子組件調(diào)用傳遞過來方法時候的方法名稱
<son @func="getMsg"></son>
- 子組件內(nèi)部通過
this.$emit('方法名', 要傳遞的數(shù)據(jù))方式热某，來調(diào)用父組件中的方法蔬捷，同時把數(shù)據(jù)傳遞給父組件使用
<div id="app">
<!-- 引用父組件 -->
<son @func="getMsg"></son>
<!-- 組件模板定義 -->
<script type="x-template" id="son">
<div>
<input type="button" value="向父組件傳值" @click="sendMsg" />
</div>
</script>
</div>
<script>
// 子組件的定義方式
Vue.component('son', {
template: '#son', // 組件模板Id
methods: {
sendMsg() { // 按鈕的點擊事件
this.$emit('func', 'OK'); // 調(diào)用父組件傳遞過來的方法，同時把數(shù)據(jù)傳遞出去
}
}
});
// 創(chuàng)建 Vue 實例播急，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getMsg(val){ // 子組件中昌妹，通過 this.$emit() 實際調(diào)用的方法长已，在此進行定義
alert(val);
}
}
});
</script>
評論列表案例
目標：主要練習(xí)父子組件之間傳值
使用 this.$refs 來獲取元素和組件
<div id="app">
<div>
<input type="button" value="獲取元素內(nèi)容" @click="getElement" />
<!-- 使用 ref 獲取元素 -->
<h1 ref="myh1">這是一個大大的H1</h1>
<hr>
<!-- 使用 ref 獲取子組件 -->
<my-com ref="mycom"></my-com>
</div>
</div>
<script>
Vue.component('my-com', {
template: '<h5>這是一個子組件</h5>',
data() {
return {
name: '子組件'
}
}
});
// 創(chuàng)建 Vue 實例胞四，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getElement() {
// 通過 this.$refs 來獲取元素
console.log(this.$refs.myh1.innerText);
// 通過 this.$refs 來獲取組件
console.log(this.$refs.mycom.name);
}
}
});
</script>
什么是路由
對于普通的網(wǎng)站约巷，所有的超鏈接都是URL地址氓癌，所有的URL地址都對應(yīng)服務(wù)器上對應(yīng)的資源；
對于單頁面應(yīng)用程序來說甘桑，主要通過URL中的hash(#號)來實現(xiàn)不同頁面之間的切換，同時歹叮，hash有一個特點：HTTP請求中不會包含hash相關(guān)的內(nèi)容跑杭；所以，單頁面程序中的頁面跳轉(zhuǎn)主要用hash實現(xiàn)咆耿；
在單頁面應(yīng)用程序中德谅，這種通過hash改變來切換頁面的方式，稱作前端路由（區(qū)別于后端路由）萨螺；
在 vue 中使用 vue-router
- 導(dǎo)入 vue-router 組件類庫：
<!-- 1. 導(dǎo)入 vue-router 組件類庫 -->
<script src="./lib/vue-router-2.7.0.js"></script>
- 使用 router-link 組件來導(dǎo)航
<!-- 2. 使用 router-link 組件來導(dǎo)航 -->
<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊</router-link>
- 使用 router-view 組件來顯示匹配到的組件
<!-- 3. 使用 router-view 組件來顯示匹配到的組件 -->
<router-view></router-view>
- 創(chuàng)建使用
Vue.extend創(chuàng)建組件
// 4.1 使用 Vue.extend 來創(chuàng)建登錄組件
var login = Vue.extend({
template: '<h1>登錄組件</h1>'
});
// 4.2 使用 Vue.extend 來創(chuàng)建注冊組件
var register = Vue.extend({
template: '<h1>注冊組件</h1>'
});
- 創(chuàng)建一個路由 router 實例窄做，通過 routers 屬性來定義路由匹配規(guī)則
// 5. 創(chuàng)建一個路由 router 實例愧驱，通過 routers 屬性來定義路由匹配規(guī)則
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
- 使用 router 屬性來使用路由規(guī)則
// 6. 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
router: router // 使用 router 屬性來使用路由規(guī)則
});
設(shè)置路由高亮
設(shè)置路由切換動效
在路由規(guī)則中定義參數(shù)
- 在規(guī)則中定義參數(shù)：
{ path: '/register/:id', component: register }
- 通過
this.$route.params來獲取路由中的參數(shù)：
var register = Vue.extend({
template: '<h1>注冊組件 --- {{this.$route.params.id}}</h1>'
});
使用 children 屬性實現(xiàn)路由嵌套
<div id="app">
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div>
<script>
// 父路由中的組件
const account = Vue.extend({
template: `<div>
這是account組件
<router-link to="/account/login">login</router-link> |
<router-link to="/account/register">register</router-link>
<router-view></router-view>
</div>`
});
// 子路由中的 login 組件
const login = Vue.extend({
template: '<div>登錄組件</div>'
});
// 子路由中的 register 組件
const register = Vue.extend({
template: '<div>注冊組件</div>'
});
// 路由實例
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/account/login' }, // 使用 redirect 實現(xiàn)路由重定向
{
path: '/account',
component: account,
children: [ // 通過 children 數(shù)組屬性椭盏，來實現(xiàn)路由的嵌套
{ path: 'login', component: login }, // 注意组砚，子路由的開頭位置，不要加 / 路徑符
{ path: 'register', component: register }
]
}
]
});
// 創(chuàng)建 Vue 實例掏颊，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
account
},
router: router
});
</script>
命名視圖實現(xiàn)經(jīng)典布局
- 標簽代碼結(jié)構(gòu)：
<div id="app">
<router-view></router-view>
<div class="content">
<router-view name="a"></router-view>
<router-view name="b"></router-view>
</div>
</div>
- JS代碼：
<script>
var header = Vue.component('header', {
template: '<div class="header">header</div>'
});
var sidebar = Vue.component('sidebar', {
template: '<div class="sidebar">sidebar</div>'
});
var mainbox = Vue.component('mainbox', {
template: '<div class="mainbox">mainbox</div>'
});
// 創(chuàng)建路由對象
var router = new VueRouter({
routes: [
{
path: '/', components: {
default: header,
a: sidebar,
b: mainbox
}
}
]
});
// 創(chuàng)建 Vue 實例惫确，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
});
</script>
- CSS 樣式：
<style>
.header {
border: 1px solid red;
}
.content{
display: flex;
}
.sidebar {
flex: 2;
border: 1px solid green;
height: 500px;
}
.mainbox{
flex: 8;
border: 1px solid blue;
height: 500px;
}
</style>
watch屬性的使用
考慮一個問題：想要實現(xiàn) 名 和 姓 兩個文本框的內(nèi)容改變，則全名的文本框中的值也跟著改變蚯舱；（用以前的知識如何實現(xiàn)改化？？枉昏？）
- 監(jiān)聽
data中屬性的改變：
<div id="app">
<input type="text" v-model="firstName"> +
<input type="text" v-model="lastName"> =
<span>{{fullName}}</span>
</div>
<script>
// 創(chuàng)建 Vue 實例陈肛，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen',
fullName: 'jack - chen'
},
methods: {},
watch: {
'firstName': function (newVal, oldVal) { // 第一個參數(shù)是新數(shù)據(jù)，第二個參數(shù)是舊數(shù)據(jù)
this.fullName = newVal + ' - ' + this.lastName;
},
'lastName': function (newVal, oldVal) {
this.fullName = this.firstName + ' - ' + newVal;
}
}
});
</script>
- 監(jiān)聽路由對象的改變：
<div id="app">
<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊</router-link>
<router-view></router-view>
</div>
<script>
var login = Vue.extend({
template: '<h1>登錄組件</h1>'
});
var register = Vue.extend({
template: '<h1>注冊組件</h1>'
});
var router = new VueRouter({
routes: [
{ path: "/login", component: login },
{ path: "/register", component: register }
]
});
// 創(chuàng)建 Vue 實例兄裂，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: router,
watch: {
'$route': function (newVal, oldVal) {
if (newVal.path === '/login') {
console.log('這是登錄組件');
}
}
}
});
</script>
computed計算屬性的使用
- 默認只有
getter的計算屬性：
<div id="app">
<input type="text" v-model="firstName"> +
<input type="text" v-model="lastName"> =
<span>{{fullName}}</span>
</div>
<script>
// 創(chuàng)建 Vue 實例句旱，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen'
},
methods: {},
computed: { // 計算屬性； 特點：當(dāng)計算屬性中所以來的任何一個 data 屬性改變之后晰奖，都會重新觸發(fā) 本計算屬性 的重新計算谈撒，從而更新 fullName 的值
fullName() {
return this.firstName + ' - ' + this.lastName;
}
}
});
</script>
- 定義有
getter和setter的計算屬性：
<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<!-- 點擊按鈕重新為 計算屬性 fullName 賦值 -->
<input type="button" value="修改fullName" @click="changeName">
<span>{{fullName}}</span>
</div>
<script>
// 創(chuàng)建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen'
},
methods: {
changeName() {
this.fullName = 'TOM - chen2';
}
},
computed: {
fullName: {
get: function () {
return this.firstName + ' - ' + this.lastName;
},
set: function (newVal) {
var parts = newVal.split(' - ');
this.firstName = parts[0];
this.lastName = parts[1];
}
}
}
});
</script>
watch匾南、computed和methods之間的對比
-
computed屬性的結(jié)果會被緩存啃匿，除非依賴的響應(yīng)式屬性變化才會重新計算。主要當(dāng)作屬性來使用蛆楞； -
methods方法表示一個具體的操作溯乒，主要書寫業(yè)務(wù)邏輯； -
watch一個對象豹爹，鍵是需要觀察的表達式裆悄，值是對應(yīng)回調(diào)函數(shù)。主要用來監(jiān)聽某些特定數(shù)據(jù)的變化臂聋，從而進行某些具體的業(yè)務(wù)邏輯操作光稼；可以看作是computed和methods的結(jié)合體；
nrm的安裝使用
作用：提供了一些最常用的NPM包鏡像地址孩等，能夠讓我們快速的切換安裝包時候的服務(wù)器地址艾君；
什么是鏡像：原來包剛一開始是只存在于國外的NPM服務(wù)器，但是由于網(wǎng)絡(luò)原因瞎访，經(jīng)常訪問不到腻贰，這時候，我們可以在國內(nèi)扒秸，創(chuàng)建一個和官網(wǎng)完全一樣的NPM服務(wù)器播演，只不過冀瓦，數(shù)據(jù)都是從人家那里拿過來的，除此之外写烤，使用方式完全一樣翼闽；
- 運行
npm i nrm -g全局安裝nrm包； - 使用
nrm ls查看當(dāng)前所有可用的鏡像源地址以及當(dāng)前所使用的鏡像源地址洲炊； - 使用
nrm use npm或nrm use taobao切換不同的鏡像源地址感局；
