摘要：主要當作屬性來使用方法表示一個具體的操作，主要書寫業(yè)務(wù)邏輯一個對象，鍵是需要觀察的表達式，值是對應(yīng)回調(diào)函數(shù)。

Vue.js - Day3

定義Vue組件

什么是組件： 組件的出現(xiàn)，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什么樣的功能，就可以去調(diào)用對應(yīng)的組件即可；
組件化和模塊化的不同：

• 模塊化： 是從代碼邏輯的角度進行劃分的；方便代碼分層開發(fā)，保證每個功能模塊的職能單一；

• 組件化： 是從UI界面的角度進行劃分的；前端的組件化，方便UI組件的重用；

  全局組件定義的三種方式

1. 使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({
      template: '
登錄
'
    });
    Vue.component('login', login);

1. 直接使用 Vue.component 方法：

Vue.component('register', {
      template: '
注冊
'
    });

1. 將模板字符串，定義到script標簽種：

同時，需要使用 Vue.component 來定義組件：

Vue.component('account', {
      template: '#tmpl'
    });

注意： 組件中的DOM結(jié)構(gòu)，有且只能有唯一的根元素（Root Element）來進行包裹！

組件中展示數(shù)據(jù)和響應(yīng)事件

1. 在組件中，data需要被定義為一個方法，例如：

Vue.component('account', {
      template: '#tmpl',
      data() {
        return {
          msg: '大家好！'
        }
      },
      methods:{
        login(){
          alert('點擊了登錄按鈕');
        }
      }
    });

1. 在子組件中，如果將模板字符串，定義到了script標簽中，那么，要訪問子組件身上的data屬性中的值，需要使用this來訪問；

【重點】為什么組件中的data屬性必須定義為一個方法并返回一個對象

1. 通過計數(shù)器案例演示

使用components屬性定義局部子組件

1. 組件實例定義方式：

1. 引用組件：

使用flag標識符結(jié)合v-if和v-else切換組件

1. 頁面結(jié)構(gòu)：

1. Vue實例定義：

使用:is屬性來切換不同的子組件,并添加切換動畫

1. 組件實例定義方式：

  // 登錄組件
    const login = Vue.extend({
      template: `

        
登錄組件
      
`
    });
    Vue.component('login', login);

    // 注冊組件
    const register = Vue.extend({
      template: `

        
注冊組件
      
`
    });
    Vue.component('register', register);

    // 創(chuàng)建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: { comName: 'login' },
      methods: {}
    });

1. 使用component標簽，來引用組件，并通過:is屬性來指定要加載的組件：

  

    登錄
    注冊
    

    
      
    
  

1. 添加切換樣式：

父組件向子組件傳值

1. 組件實例定義方式，注意：一定要使用props屬性來定義父組件傳遞過來的數(shù)據(jù)

1. 使用v-bind或簡化指令，將數(shù)據(jù)傳遞到子組件中：

子組件向父組件傳值

1. 原理：父組件將方法的引用，傳遞到子組件內(nèi)部，子組件在內(nèi)部調(diào)用父組件傳遞過來的方法，同時把要發(fā)送給父組件的數(shù)據(jù)，在調(diào)用方法的時候當作參數(shù)傳遞進去；
2. 父組件將方法的引用傳遞給子組件，其中，getMsg是父組件中methods中定義的方法名稱，func是子組件調(diào)用傳遞過來方法時候的方法名稱

1. 子組件內(nèi)部通過this.$emit(方法名, 要傳遞的數(shù)據(jù))方式，來調(diào)用父組件中的方法，同時把數(shù)據(jù)傳遞給父組件使用

評論列表案例

目標：主要練習父子組件之間傳值

使用 this.$refs 來獲取元素和組件

  

    

      
      
      
這是一個大大的H1

      

      
      
    
  

  

什么是路由

1. 對于普通的網(wǎng)站，所有的超鏈接都是URL地址，所有的URL地址都對應(yīng)服務(wù)器上對應(yīng)的資源；

2. 對于單頁面應(yīng)用程序來說，主要通過URL中的hash(#號)來實現(xiàn)不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關(guān)的內(nèi)容；所以，單頁面程序中的頁面跳轉(zhuǎn)主要用hash實現(xiàn)；

3. 在單頁面應(yīng)用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由（區(qū)別于后端路由）；

在 vue 中使用 vue-router

1. 導(dǎo)入 vue-router 組件類庫：

1. 使用 router-link 組件來導(dǎo)航

登錄
注冊

1. 使用 router-view 組件來顯示匹配到的組件

1. 創(chuàng)建使用Vue.extend創(chuàng)建組件

    // 4.1 使用 Vue.extend 來創(chuàng)建登錄組件
    var login = Vue.extend({
      template: '
登錄組件
'
    });

    // 4.2 使用 Vue.extend 來創(chuàng)建注冊組件
    var register = Vue.extend({
      template: '
注冊組件
'
    });

1. 創(chuàng)建一個路由 router 實例，通過 routers 屬性來定義路由匹配規(guī)則

// 5. 創(chuàng)建一個路由 router 實例，通過 routers 屬性來定義路由匹配規(guī)則
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });

1. 使用 router 屬性來使用路由規(guī)則

// 6. 創(chuàng)建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 屬性來使用路由規(guī)則
    });

設(shè)置路由高亮

設(shè)置路由切換動效

在路由規(guī)則中定義參數(shù)

1. 在規(guī)則中定義參數(shù)：

{ path: '/register/:id', component: register }

1. 通過 this.$route.params來獲取路由中的參數(shù)：

var register = Vue.extend({
      template: '
注冊組件 --- {{this.$route.params.id}}
'
    });

使用 children 屬性實現(xiàn)路由嵌套

  

    Account

    
  

  

命名視圖實現(xiàn)經(jīng)典布局

1. 標簽代碼結(jié)構(gòu)：

1. JS代碼：

1. CSS 樣式：

watch屬性的使用

考慮一個問題：想要實現(xiàn) 名 和 姓 兩個文本框的內(nèi)容改變，則全名的文本框中的值也跟著改變；（用以前的知識如何實現(xiàn)？？？）

1. 監(jiān)聽data中屬性的改變：

     +
     =
    {{fullName}}
  

  

1. 監(jiān)聽路由對象的改變：

    登錄
    注冊

    
  

  

computed計算屬性的使用

1. 默認只有getter的計算屬性：

     +
     =
    {{fullName}}
  

  

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

    
    
    
    

    {{fullName}}
  

  

watch、computed和methods之間的對比

1. computed屬性的結(jié)果會被緩存，除非依賴的響應(yīng)式屬性變化才會重新計算。主要當作屬性來使用；
2. methods方法表示一個具體的操作，主要書寫業(yè)務(wù)邏輯；
3. 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ù)都是從人家那里拿過來的，除此之外，使用方式完全一樣；

1. 運行npm i nrm -g全局安裝nrm包；
2. 使用nrm ls查看當前所有可用的鏡像源地址以及當前所使用的鏡像源地址；
3. 使用nrm use npm或nrm use taobao切換不同的鏡像源地址；

相關(guān)文件

1. URL中的hash（井號）