小白的Vue學(xué)習(xí)之路

第三章 Vue 組件&路由

定義Vue組件

什么是組件: 組件的出現(xiàn),就是為了拆分Vue實例的代碼量的昔搂,能夠讓我們以不同的組件巩趁,來劃分不同的功能模塊议慰,將來我們需要什么樣的功能别凹,就可以去調(diào)用對應(yīng)的組件即可;
組件化和模塊化的不同:

  • 模塊化: 是從代碼邏輯的角度進行劃分的坤溃;方便代碼分層開發(fā)祠饺,保證每個功能模塊的職能單一道偷;
  • 組件化: 是從UI界面的角度進行劃分的;前端的組件化换途,方便UI組件的重用军拟;

全局組件定義的三種方式

  1. 使用 Vue.extend 配合 Vue.component 方法:
var login = Vue.extend({
      template: '<h1>登錄</h1>'
    });
    Vue.component('login', login);
  1. 直接使用 Vue.component 方法:
Vue.component('register', {
      template: '<h1>注冊</h1>'
    });
  1. 將模板字符串忠蝗,定義到script標簽種:
<script id="tmpl" type="x-template">
      <div><a href="#">登錄</a> | <a href="#">注冊</a></div>
    </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. 組件實例定義方式:
<script>
    // 創(chuàng)建 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>
  1. 引用組件:
<div id="app">
    <account></account>
  </div>

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

  1. 頁面結(jié)構(gòu):
<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>
  1. Vue實例定義:
<script>
    Vue.component('myCom1', {
      template: '<h3>奔波霸</h3>'
    })

    Vue.component('myCom2', {
      template: '<h3>霸波奔</h3>'
    })

    // 創(chuàng)建 Vue 實例秆吵,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {}
    });
  </script>

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

  1. 組件實例定義方式:
  // 登錄組件
    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);

    // 創(chuàng)建 Vue 實例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: { comName: 'login' },
      methods: {}
    });
  1. 使用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>
  1. 添加切換樣式:
  <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>

父組件向子組件傳值

  1. 組件實例定義方式已脓,注意:一定要使用props屬性來定義父組件傳遞過來的數(shù)據(jù)
<script>
    // 創(chuàng)建 Vue 實例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '這是父組件中的消息'
      },
      components: {
        son: {
          template: '<h1>這是子組件 --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    });
  </script>
  1. 使用v-bind或簡化指令句葵,將數(shù)據(jù)傳遞到子組件中:
<div id="app">
    <son :finfo="msg"></son>
  </div>

子組件向父組件傳值

  1. 原理:父組件將方法的引用忆矛,傳遞到子組件內(nèi)部,子組件在內(nèi)部調(diào)用父組件傳遞過來的方法审胚,同時把要發(fā)送給父組件的數(shù)據(jù)痘系,在調(diào)用方法的時候當(dāng)作參數(shù)傳遞進去悉默;
  2. 父組件將方法的引用傳遞給子組件间聊,其中迎变,getMsg是父組件中methods中定義的方法名稱,func是子組件調(diào)用傳遞過來方法時候的方法名稱
<son @func="getMsg"></son>
  1. 子組件內(nèi)部通過this.$emit('方法名', 要傳遞的數(shù)據(jù))方式热某,來調(diào)用父組件中的方法蔬捷,同時把數(shù)據(jù)傳遞給父組件使用
<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'); // 調(diào)用父組件傳遞過來的方法,同時把數(shù)據(jù)傳遞出去
        }
      }
    });

    // 創(chuàng)建 Vue 實例播急,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // 子組件中昌妹,通過 this.$emit() 實際調(diào)用的方法长已,在此進行定義
          alert(val);
        }
      }
    });
  </script>

評論列表案例

目標:主要練習(xí)父子組件之間傳值

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

  <div id="app">
    <div>
      <input type="button" value="獲取元素內(nèi)容" @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: '子組件'
        }
      }
    });

    // 創(chuàng)建 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>

什么是路由

  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. 導(dǎo)入 vue-router 組件類庫 -->
  <script src="./lib/vue-router-2.7.0.js"></script>
  1. 使用 router-link 組件來導(dǎo)航
<!-- 2. 使用 router-link 組件來導(dǎo)航 -->
<router-link to="/login">登錄</router-link>
<router-link to="/register">注冊</router-link>
  1. 使用 router-view 組件來顯示匹配到的組件
<!-- 3. 使用 router-view 組件來顯示匹配到的組件 -->
<router-view></router-view>
  1. 創(chuàng)建使用Vue.extend創(chuàng)建組件
    // 4.1 使用 Vue.extend 來創(chuàng)建登錄組件
    var login = Vue.extend({
      template: '<h1>登錄組件</h1>'
    });

    // 4.2 使用 Vue.extend 來創(chuàng)建注冊組件
    var register = Vue.extend({
      template: '<h1>注冊組件</h1>'
    });
  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: '<h1>注冊組件 --- {{this.$route.params.id}}</h1>'
    });

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

  <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 實現(xiàn)路由重定向
        {
          path: '/account',
          component: account,
          children: [ // 通過 children 數(shù)組屬性椭盏,來實現(xiàn)路由的嵌套
            { path: 'login', component: login }, // 注意组砚,子路由的開頭位置,不要加 / 路徑符
            { path: 'register', component: register }
          ]
        }
      ]
    });

    // 創(chuàng)建 Vue 實例掏颊,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        account
      },
      router: router
    });
  </script>

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

  1. 標簽代碼結(jié)構(gòu):
<div id="app">
    <router-view></router-view>
    <div class="content">
      <router-view name="a"></router-view>
      <router-view name="b"></router-view>
    </div>
  </div>
  1. 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>'
    });

    // 創(chuàng)建路由對象
    var router = new VueRouter({
      routes: [
        {
          path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          }
        }
      ]
    });

    // 創(chuàng)建 Vue 實例惫确,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>
  1. 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屬性的使用

考慮一個問題:想要實現(xiàn) 兩個文本框的內(nèi)容改變,則全名的文本框中的值也跟著改變蚯舱;(用以前的知識如何實現(xiàn)改化??枉昏?)

  1. 監(jiān)聽data中屬性的改變:
<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 創(chuàng)建 Vue 實例陈肛,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen',
        fullName: 'jack - chen'
      },
      methods: {},
      watch: {
        'firstName': function (newVal, oldVal) { // 第一個參數(shù)是新數(shù)據(jù),第二個參數(shù)是舊數(shù)據(jù)
          this.fullName = newVal + ' - ' + this.lastName;
        },
        'lastName': function (newVal, oldVal) {
          this.fullName = this.firstName + ' - ' + newVal;
        }
      }
    });
  </script>
  1. 監(jiān)聽路由對象的改變:
<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 }
      ]
    });

    // 創(chuàng)建 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計算屬性的使用

  1. 默認只有getter的計算屬性:
<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 創(chuàng)建 Vue 實例句旱,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {},
      computed: { // 計算屬性; 特點:當(dāng)計算屬性中所以來的任何一個 data 屬性改變之后晰奖,都會重新觸發(fā) 本計算屬性 的重新計算谈撒,從而更新 fullName 的值
        fullName() {
          return this.firstName + ' - ' + this.lastName;
        }
      }
    });
  </script>
  1. 定義有gettersetter的計算屬性:
<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>
    // 創(chuàng)建 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匾南、computedmethods之間的對比

  1. computed屬性的結(jié)果會被緩存啃匿,除非依賴的響應(yīng)式屬性變化才會重新計算。主要當(dāng)作屬性來使用蛆楞;
  2. methods方法表示一個具體的操作溯乒,主要書寫業(yè)務(wù)邏輯;
  3. watch一個對象豹爹,鍵是需要觀察的表達式裆悄,值是對應(yīng)回調(diào)函數(shù)。主要用來監(jiān)聽某些特定數(shù)據(jù)的變化臂聋,從而進行某些具體的業(yè)務(wù)邏輯操作光稼;可以看作是computedmethods的結(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查看當(dāng)前所有可用的鏡像源地址以及當(dāng)前所使用的鏡像源地址洲炊;
  3. 使用nrm use npmnrm use taobao切換不同的鏡像源地址感局;
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市暂衡,隨后出現(xiàn)的幾起案子询微,更是在濱河造成了極大的恐慌,老刑警劉巖狂巢,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件撑毛,死亡現(xiàn)場離奇詭異,居然都是意外死亡唧领,警方通過查閱死者的電腦和手機藻雌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來斩个,“玉大人胯杭,你說我怎么就攤上這事∈苌叮” “怎么了做个?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長腔呜。 經(jīng)常有香客問我叁温,道長,這世上最難降的妖魔是什么核畴? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮冲九,結(jié)果婚禮上谤草,老公的妹妹穿的比我還像新娘。我一直安慰自己莺奸,他們只是感情好丑孩,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著灭贷,像睡著了一般温学。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上甚疟,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天仗岖,我揣著相機與錄音逃延,去河邊找鬼。 笑死轧拄,一個胖子當(dāng)著我的面吹牛揽祥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播檩电,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼拄丰,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了俐末?” 一聲冷哼從身側(cè)響起料按,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎卓箫,沒想到半個月后站绪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡丽柿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年恢准,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片甫题。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡馁筐,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出坠非,到底是詐尸還是另有隱情敏沉,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布炎码,位于F島的核電站盟迟,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏潦闲。R本人自食惡果不足惜攒菠,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望歉闰。 院中可真熱鬧辖众,春花似錦、人聲如沸和敬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽昼弟。三九已至啤它,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背变骡。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工离赫, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人锣光。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓除破,卻偏偏與公主長得像中鼠,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 第一章 Vue 初步認識 什么是Vue.js Vue.js 是目前最火的一個前端框架饺谬,React是最流行的一個前端...
    黑夜里的那盞燈閱讀 656評論 0 1
  • # 傳智播客vue 學(xué)習(xí)## 1. 什么是 Vue.js* Vue 開發(fā)手機 APP 需要借助于 Weex* Vu...
    再見天才閱讀 3,565評論 0 6
  • VUE Vue :數(shù)據(jù)驅(qū)動的M V Vm框架 m :model(后臺提供數(shù)據(jù))浴捆,v :view(頁面)郁稍,vM(模板...
    wudongyu閱讀 5,411評論 0 11
  • 前言 您將在本文當(dāng)中了解到,往網(wǎng)頁中添加數(shù)據(jù),從傳統(tǒng)的dom操作過渡到數(shù)據(jù)層操作,實現(xiàn)同一個目標,兩種不同的方式....
    itclanCoder閱讀 25,823評論 1 12
  • 自己屬于偏內(nèi)向的性格俱病,不愛說話,也不會拒絕搂漠,別人交代的事情即使很不情愿也只藏在心里迂卢,然后默默接受。遇到不滿的事情桐汤,...
    qintian琴天閱讀 1,019評論 0 1