在路由規則中定義參數
- 在規則中定義參數：
{ path: '/register/:id', component: register }
- 通過
this.$route.params來獲取路由中的參數：
var register = Vue.extend({
template: '<h1>註冊組件 --- {{this.$route.params.id}}</h1>'
});
使用 children 屬性實現路由嵌套
<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 實現路由重定向
{
path: '/account',
component: account,
children: [ // 通過 children 數組屬性，來實現路由的嵌套
{ path: 'login', component: login }, // 注意，子路由的開頭位置，不要加 / 路徑符
{ path: 'register', component: register }
]
}
]
});
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
account
},
router: router
});
</script>
命名視圖實現經典佈局
- 標籤代碼結構：
<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>'
});
// 創建路由對象
var router = new VueRouter({
routes: [
{
path: '/', components: {
default: header,
a: sidebar,
b: mainbox
}
}
]
});
// 創建 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屬性的使用
考慮一個問題：想要實現 名 和 姓 兩個文本框的內容改變，則全名的文本框中的值也跟着改變；
- 監聽data中屬性的改變：
<div id="app">
<input type="text" v-model="firstName"> +
<input type="text" v-model="lastName"> =
<span>{{fullName}}</span>
</div>
<script>
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen',
fullName: 'jack - chen'
},
methods: {},
watch: {
'firstName': function (newVal, oldVal) { // 第一個參數是新數據，第二個參數是舊數據
this.fullName = newVal + ' - ' + this.lastName;
},
'lastName': function (newVal, oldVal) {
this.fullName = this.firstName + ' - ' + newVal;
}
}
});
</script>
- 監聽路由對象的改變：
<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 }
]
});
// 創建 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>
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstName: 'jack',
lastName: 'chen'
},
methods: {},
computed: { // 計算屬性； 特點：當計算屬性中所以來的任何一個 data 屬性改變之後，都會重新觸發 本計算屬性 的重新計算，從而更新 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>
// 創建 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屬性的結果會被緩存，除非依賴的響應式屬性變化纔會重新計算。主要當作屬性來使用；methods方法表示一個具體的操作，主要書寫業務邏輯；watch一個對象，鍵是需要觀察的表達式，值是對應回調函數。主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操作；可以看作是computed和methods的結合體；
nrm的安裝使用
作用：提供了一些最常用的NPM包鏡像地址，能夠讓我們快速的切換安裝包時候的服務器地址；
什麼是鏡像：原來包剛一開始是隻存在於國外的NPM服務器，但是由於網絡原因，經常訪問不到，這時候，我們可以在國內，創建一個和官網完全一樣的NPM服務器，只不過，數據都是從人家那裏拿過來的，除此之外，使用方式完全一樣；
- 運行
npm i nrm -g全局安裝nrm包； - 使用
nrm ls查看當前所有可用的鏡像源地址以及當前所使用的鏡像源地址； - 使用
nrm use npm或nrm use taobao切換不同的鏡像源地址；
注意： nrm 只是單純的提供了幾個常用的 下載包的 URL地址，並能夠讓我們在 這幾個 地址之間，很方便的進行切換，但是，我們每次裝包的時候，使用的 裝包工具，都是 npm