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

Vue.js - Day3

定義Vue組件

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

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

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

  全局組件定義的三種方式

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

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

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

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

1. 將模板字符串，定義到script標(biāo)簽種：

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

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

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

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

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

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

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

【重點(diǎn)】為什么組件中的data屬性必須定義為一個(gè)方法并返回一個(gè)對(duì)象

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

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

1. 組件實(shí)例定義方式：

1. 引用組件：

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

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

1. Vue實(shí)例定義：

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

1. 組件實(shí)例定義方式：

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

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

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

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

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

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

  

    登錄
    注冊
    

    
      
    
  

1. 添加切換樣式：

父組件向子組件傳值

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

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

子組件向父組件傳值

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

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

評(píng)論列表案例

目標(biāo)：主要練習(xí)父子組件之間傳值

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

  

    

      
      
      
這是一個(gè)大大的H1

      

      
      
    
  

  

什么是路由

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

2. 對(duì)于單頁面應(yīng)用程序來說，主要通過URL中的hash(#號(hào))來實(shí)現(xiàn)不同頁面之間的切換，同時(shí)，hash有一個(gè)特點(diǎn)：HTTP請(qǐng)求中不會(huì)包含hash相關(guān)的內(nèi)容；所以，單頁面程序中的頁面跳轉(zhuǎn)主要用hash實(shí)現(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)建一個(gè)路由 router 實(shí)例，通過 routers 屬性來定義路由匹配規(guī)則

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

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

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

設(shè)置路由高亮

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

在路由規(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 屬性實(shí)現(xiàn)路由嵌套

  

    Account

    
  

  

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

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

1. JS代碼：

1. CSS 樣式：

watch屬性的使用

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

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

     +
     =
    {{fullName}}
  

  

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

    登錄
    注冊

    
  

  

computed計(jì)算屬性的使用

1. 默認(rèn)只有getter的計(jì)算屬性：

     +
     =
    {{fullName}}
  

  

1. 定義有getter和setter的計(jì)算屬性：

    
    
    
    

    {{fullName}}
  

  

watch、computed和methods之間的對(duì)比

1. computed屬性的結(jié)果會(huì)被緩存，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算。主要當(dāng)作屬性來使用；
2. methods方法表示一個(gè)具體的操作，主要書寫業(yè)務(wù)邏輯；
3. watch一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。主要用來監(jiān)聽某些特定數(shù)據(jù)的變化，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作；可以看作是computed和methods的結(jié)合體；

nrm的安裝使用

作用：提供了一些最常用的NPM包鏡像地址，能夠讓我們快速的切換安裝包時(shí)候的服務(wù)器地址；
什么是鏡像：原來包剛一開始是只存在于國外的NPM服務(wù)器，但是由于網(wǎng)絡(luò)原因，經(jīng)常訪問不到，這時(shí)候，我們可以在國內(nèi)，創(chuàng)建一個(gè)和官網(wǎng)完全一樣的NPM服務(wù)器，只不過，數(shù)據(jù)都是從人家那里拿過來的，除此之外，使用方式完全一樣；

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

相關(guān)文件

1. URL中的hash（井號(hào)）