vue學習筆記3
- 2019 年 10 月 10 日
- 筆記
Vue.js – Day3
定義Vue組件
什麼是組件： 組件的出現，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什麼樣的功能，就可以去調用對應的組件即可； 組件化和模塊化的不同：
- 模塊化： 是從代碼邏輯的角度進行劃分的；方便代碼分層開發，保證每個功能模塊的職能單一；
- 組件化： 是從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結構，有且只能有唯一的根元素（Root Element）來進行包裹！
組件中展示數據和響應事件
- 在組件中，
data需要被定義為一個方法，例如：
Vue.component('account', { template: '#tmpl', data() { return { msg: '大家好！' } }, methods:{ login(){ alert('點擊了登錄按鈕'); } } });
- 在子組件中，如果將模板字符串，定義到了script標籤中，那麼，要訪問子組件身上的
data屬性中的值，需要使用this來訪問；
【重點】為什麼組件中的data屬性必須定義為一個方法並返回一個對象
- 通過計數器案例演示
使用components屬性定義局部子組件
- 組件實例定義方式：
<script> // 創建 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標識符結合v-if和v-else切換組件
- 頁面結構：
<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>' }) // 創建 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); // 創建 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屬性來定義父組件傳遞過來的數據
<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>
子組件向父組件傳值
- 原理：父組件將方法的引用，傳遞到子組件內部，子組件在內部調用父組件傳遞過來的方法，同時把要發送給父組件的數據，在調用方法的時候當作參數傳遞進去；
- 父組件將方法的引用傳遞給子組件，其中，
getMsg是父組件中methods中定義的方法名稱，func是子組件調用傳遞過來方法時候的方法名稱
<son @func="getMsg"></son>
- 子組件內部通過
this.$emit('方法名', 要傳遞的數據)方式，來調用父組件中的方法，同時把數據傳遞給父組件使用
<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>
評論列表案例
目標：主要練習父子組件之間傳值
使用 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 屬性來使用路由規則 });
設置路由高亮
設置路由切換動效
在路由規則中定義參數
- 在規則中定義參數：
{ 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切換不同的鏡像源地址；
