Vue.js - Day4
父組件向子組件傳值
-
組件實例定義方式，注意：必定要使用
props屬性來定義父組件傳遞過來的數據html
<script>
// 建立 Vue 實例，獲得 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '這是父組件中的消息'
},
components: {
son: {
template: '<h1>這是子組件 --- {{finfo}}</h1>',
props: ['finfo']
}
}
});
</script>
-
使用
v-bind或簡化指令，將數據傳遞到子組件中：前端
<div id="app">
<son :finfo="msg"></son>
</div>
子組件向父組件傳值
-
原理：父組件將方法的引用，傳遞到子組件內部，子組件在內部調用父組件傳遞過來的方法，同時把要發送給父組件的數據，在調用方法的時候看成參數傳遞進去；vue
-
父組件將方法的引用傳遞給子組件，其中，
getMsg是父組件中methods中定義的方法名稱，func是子組件調用傳遞過來方法時候的方法名稱vue-router
<son @func="getMsg"></son>
-
子組件內部經過
this.$emit('方法名', 要傳遞的數據)方式，來調用父組件中的方法，同時把數據傳遞給父組件使用npm
<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'); // 調用父組件傳遞過來的方法，同時把數據傳遞出去
}
}
});
// 建立 Vue 實例，獲得 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getMsg(val){ // 子組件中，經過 this.$emit() 實際調用的方法，在此進行定義
alert(val);
}
}
});
</script>
組件中data和props的區別
評論列表案例
目標：主要練習父子組件之間傳值後端
使用 this.$refs 來獲取元素和組件
<div id="app">
<div>
<input type="button" value="獲取元素內容" @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: '子組件'
}
}
});
// 建立 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>
什麼是路由
-
後端路由：對於普通的網站，全部的超連接都是URL地址，全部的URL地址都對應服務器上對應的資源；數組
-
前端路由：對於單頁面應用程序來講，主要經過URL中的hash(#號)來實現不一樣頁面之間的切換，同時，hash有一個特色：HTTP請求中不會包含hash相關的內容；因此，單頁面程序中的頁面跳轉主要用hash實現；緩存
-
在單頁面應用程序中，這種經過hash改變來切換頁面的方式，稱做前端路由（區別於後端路由）；服務器
在 vue 中使用 vue-router
-
導入 vue-router 組件類庫：網絡
<!-- 1. 導入 vue-router 組件類庫 -->
<script src="./lib/vue-router-2.7.0.js"></script>
-
使用 router-link 組件來導航
<!-- 2. 使用 router-link 組件來導航 -->
<router-link to="/login">登陸</router-link>
<router-link to="/register">註冊</router-link>
-
使用 router-view 組件來顯示匹配到的組件
<!-- 3. 使用 router-view 組件來顯示匹配到的組件 -->
<router-view></router-view>
-
建立使用
Vue.extend建立組件
// 4.1 使用 Vue.extend 來建立登陸組件
var login = Vue.extend({
template: '<h1>登陸組件</h1>'
});
// 4.2 使用 Vue.extend 來建立註冊組件
var register = Vue.extend({
template: '<h1>註冊組件</h1>'
});
-
建立一個路由 router 實例，經過 routers 屬性來定義路由匹配規則
// 5. 建立一個路由 router 實例，經過 routers 屬性來定義路由匹配規則
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
-
使用 router 屬性來使用路由規則
// 6. 建立 Vue 實例，獲得 ViewModel
var vm = new Vue({
el: '#app',
router: router // 使用 router 屬性來使用路由規則
});
使用tag屬性指定router-link渲染的標籤類型
設置路由重定向
設置路由高亮
設置路由切換動效
在路由規則中定義參數
-
在規則中定義參數：
{ 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切換不一樣的鏡像源地址；
相關文件
相關文章
- 1. 前端學習--Vue.js Day4
- 2. Vue(day4)
- 3. Day4
- 4. day4
- 5. DAY4
- 6. Python Day4
- 7. Java day4
- 8. ECS day4
- 9. day4-class
- 10. C#（day4）
- 更多相關文章...
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端學習--Vue.js Day4
- 2. Vue(day4)
- 3. Day4
- 4. day4
- 5. DAY4
- 6. Python Day4
- 7. Java day4
- 8. ECS day4
- 9. day4-class
- 10. C#（day4）