2. 程式人生 > >Web前端學習筆記——VueJS之元件、路由

Web前端學習筆記——VueJS之元件、路由

阿新 • • 發佈：2018-12-11

定義Vue元件

什麼是元件： 元件的出現，就是為了拆分Vue例項的程式碼量的，能夠讓我們以不同的元件，來劃分不同的功能模組，將來我們需要什麼樣的功能，就可以去呼叫對應的元件即可；
元件化和模組化的不同：

  • 模組化： 是從程式碼邏輯的角度進行劃分的；方便程式碼分層開發，保證每個功能模組的職能單一；
  • 元件化： 是從UI介面的角度進行劃分的；前端的元件化，方便UI元件的重用；

全域性元件定義的三種方式

  1. 使用 Vue.extend 配合 Vue.component 方法：
var login = Vue.extend({
      template: '<h1>登入</h1>'
    });
    Vue.component('login', login);

 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"
 
></script>
</head>

<body>
  <div id="app">
    <!-- 如果要使用元件，直接，把元件的名稱，以 HTML 標籤的形式，引入到頁面中，即可 -->
    <mycom1></mycom1>
  </div>

  <script>
    // 1.1 使用 Vue.extend 來建立全域性的Vue元件
    // var com1 = Vue.extend({
    //   template: '<h3>這是使用 Vue.extend 建立的元件</h3>' // 通過 template 屬性，指定了元件要展示的HTML結構
 

    // })
    // 1.2 使用 Vue.component('元件的名稱', 創建出來的元件模板物件)
    // Vue.component('myCom1', com1)
    // 如果使用 Vue.component 定義全域性元件的時候，元件名稱使用了 駝峰命名，則在引用元件的時候，需要把 大寫的駝峰改為小寫的字母，同時，兩個單詞之前，使用 - 連結；
    // 如果不使用駝峰,則直接拿名稱來使用即可;
    // Vue.component('mycom1', com1)

    // Vue.component 第一個引數:元件的名稱,將來在引用元件的時候,就是一個 標籤形式 來引入 它的
    // 第二個引數: Vue.extend 建立的元件  ,其中 template 就是元件將來要展示的HTML內容
    Vue.component('mycom1', Vue.extend({
      template: '<h3>這是使用 Vue.extend 建立的元件</h3>'
    }))


    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>
</body>

</html>
  1. 直接使用 Vue.component 方法：
Vue.component('register', {
      template: '<h1>註冊</h1>'
    });

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <!-- 還是使用 標籤形式,引入自己的元件 -->
    <mycom2></mycom2>
  </div>

  <script>
    // 注意:不論是哪種方式創建出來的元件,元件的 template 屬性指向的模板內容,必須有且只能有唯一的一個根元素
    Vue.component('mycom2', {
      template: '<div><h3>這是直接使用 Vue.component 創建出來的元件</h3><span>123</span></div>'
    })

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>
</body>

</html>
  1. 將模板字串，定義到script標籤種：
<script id="tmpl" type="x-template">
      <div><a href="#">登入</a> | <a href="#">註冊</a></div>
    </script>

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

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <mycom3></mycom3>
    <!-- <login></login> -->
  </div>


  <div id="app2">
    <mycom3></mycom3>
    <login></login>
  </div>

  <!-- 在 被控制的 #app 外面,使用 template 元素,定義元件的HTML模板結構  -->
  <template id="tmpl">
    <div>
      <h1>這是通過 template 元素,在外部定義的元件結構,這個方式,有程式碼的只能提示和高亮</h1>
      <h4>好用,不錯!</h4>
    </div>
  </template>

  <template id="tmpl2">
    <h1>這是私有的 login 元件</h1>
  </template>

  <script>
    Vue.component('mycom3', {
      template: '#tmpl'
    })

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });


    var vm2 = new Vue({
      el: '#app2',
      data: {},
      methods: {},
      filters: {},
      directives: {},
      components: { // 定義例項內部私有元件的
        login: {
          template: '#tmpl2'
        }
      },

      beforeCreate() { },
      created() { },
      beforeMount() { },
      mounted() { },
      beforeUpdate() { },
      updated() { },
      beforeDestroy() { },
      destroyed() { }
    })
  </script>
</body>

</html>

注意： 元件中的DOM結構，有且只能有唯一的根元素（Root Element）來進行包裹！

元件中展示資料和響應事件

  1. 在元件中，data需要被定義為一個方法，例如：
Vue.component('account', {
      template: '#tmpl',
      data() {
        return {
          msg: '大家好！'
        }
      },
      methods:{
        login(){
          alert('點選了登入按鈕');
        }
      }
    });

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <mycom1></mycom1>
  </div>

  <script>
    // 1. 元件可以有自己的 data 資料
    // 2. 元件的 data 和 例項的 data 有點不一樣,例項中的 data 可以為一個物件,但是 元件中的 data 必須是一個方法
    // 3. 元件中的 data 除了必須為一個方法之外,這個方法內部,還必須返回一個物件才行;
    // 4. 元件中 的data 資料,使用方式,和例項中的 data 使用方式完全一樣!!!
    Vue.component('mycom1', {
      template: '<h1>這是全域性元件 --- {{msg}}</h1>',
      data: function () {
        return {
          msg: '這是元件的中data定義的資料'
        }
      }
    })

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>
</body>

</html>
  1. 在子元件中，如果將模板字串，定義到了script標籤中，那麼，要訪問子元件身上的data屬性中的值，需要使用this來訪問；

【重點】為什麼元件中的data屬性必須定義為一個方法並返回一個物件

  1. 通過計數器案例演示
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <counter></counter>
    <hr>
    <counter></counter>
    <hr>
    <counter></counter>
  </div>


  <template id="tmpl">
    <div>
      <input type="button" value="+1" @click="increment">
      <h3>{{count}}</h3>
    </div>
  </template>

  <script>
    var dataObj = { count: 0 }

    // 這是一個計數器的元件, 身上有個按鈕,每當點選按鈕,讓 data 中的 count 值 +1
    Vue.component('counter', {
      template: '#tmpl',
      data: function () {
        // return dataObj
        return { count: 0 }
      },
      methods: {
        increment() {
          this.count++
        }
      }
    })

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>
</body>

</html>

使用components屬性定義區域性子元件

  1. 元件例項定義方式：
<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>
  1. 引用元件：
<div id="app">
    <account></account>
  </div>

使用flag識別符號結合v-if和v-else切換元件

  1. 頁面結構：
<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>'
    })

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {}
    });
  </script>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <a href="" @click.prevent="flag=true">登入</a>
    <a href="" @click.prevent="flag=false">註冊</a>

    <login v-if="flag"></login>
    <register v-else="flag"></register>

  </div>

  <script>
    Vue.component('login', {
      template: '<h3>登入元件</h3>'
    })

    Vue.component('register', {
      template: '<h3>註冊元件</h3>'
    })

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>
</body>

</html>

使用: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);

    // 建立 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>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <a href="" @click.prevent="comName='login'">登入</a>
    <a href="" @click.prevent="comName='register'">註冊</a>

    <!-- Vue提供了 component ,來展示對應名稱的元件 -->
    <!-- component 是一個佔位符, :is 屬性,可以用來指定要展示的元件的名稱 -->
    <component :is="comName"></component>

    <!-- 總結:當前學習了幾個 Vue 提供的標籤了??? -->
    <!-- component,  template,  transition,  transitionGroup  -->

  </div>

  <script>
    // 元件名稱是 字串
    Vue.component('login', {
      template: '<h3>登入元件</h3>'
    })

    Vue.component('register', {
      template: '<h3>註冊元件</h3>'
    })

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        comName: 'login' // 當前 component 中的 :is 繫結的元件的名稱
      },
      methods: {}
    });
  </script>
</body>

</html>
  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>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.5s ease;
    }
  </style>
</head>

<body>
  <div id="app">
    <a href="" @click.prevent="comName='login'">登入</a>
    <a href="" @click.prevent="comName='register'">註冊</a>

    <!-- 通過 mode 屬性,設定元件切換時候的 模式 -->
    <transition mode="out-in">
      <component :is="comName"></component>
    </transition>

  </div>

  <script>
    // 元件名稱是 字串
    Vue.component('login', {
      template: '<h3>登入元件</h3>'
    })

    Vue.component('register', {
      template: '<h3>註冊元件</h3>'
    })

    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        comName: 'login' // 當前 component 中的 :is 繫結的元件的名稱
      },
      methods: {}
    });
  </script>
</body>

</html>

父元件向子元件傳值

  1. 元件例項定義方式，注意：一定要使用props屬性來定義父元件傳遞過來的資料
<script>
    // 建立 Vue 例項，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '這是父元件中的訊息'
      },
      components: {
        son: {
          template: '<h1>這是子元件 --- {{finfo}}</h1>',
          props: ['finfo']
        }
      }
    });
  </script>
  1. 使用v-bind或簡化指令，將資料傳遞到子元件中：
<div id="app">
    <son :finfo="msg"></son>
  </div>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  &

相關推薦

Web前端學習筆記——VueJS之元件、路由

定義Vue元件 什麼是元件： 元件的出現，就是為了拆分Vue例項的程式碼量的，能夠讓我們以不同的元件，來劃分不同的功能模組，將來我們需要什麼樣的功能，就可以去呼叫對應的元件即可； 元件化和模組化的不同： 模組化： 是從程式碼邏輯的角度進行劃分的；方便程式碼分層

Web前端學習筆記——VueJS之過濾器、生命週期、請求、動畫

品牌管理案例 新增新品牌 刪除品牌 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo

Web前端學習筆記——AngularJS之元件、模板語法

目錄 元件 元件的定義 元件的模板 元件通訊 小結 動態元件 模板語法 插值 文字繫結 屬性繫結 列表渲染 條件渲染 NgIf 事件處理 文字 多行文字 複選框 Class St

Web前端學習筆記——AngularJS之過濾器、服務、路由

目錄 過濾器 自定義比較 服務 建立服務 自定義服務 路由 過濾器 data 過濾器 用於時間日期格式化 <span>{{'1288323623006' |

Web前端學習筆記——JavaScript之陣列、函式、作用域

陣列 為什麼要學習陣列 之前學習的資料型別，只能儲存一個值(比如：Number/String。我們想儲存班級中所有學生的姓名，此時該如何儲存？ 陣列的概念 所謂陣列，就是將多個元素（通常是同一型別）按一定順序排列放到一個集合中，那麼這個集合我們就稱之為陣列

Web前端學習筆記—— jQuery之簡介、物件、選擇器

jQuery簡介 JavaScript庫的概念 JavaScript開發的過程中，處理瀏覽器的相容很複雜而且很耗時，於是一些封裝了這些操作的庫應運而生。這些庫還會把一些常用的程式碼進行封裝。 把一些常用到的方法寫到一個單獨的js檔案，使用的時候直接去引用這js檔

Web前端學習筆記——CSS顯示模式、特性、背景

標籤顯示模式（display） 非洲黑人： 面板內黑色素含量高，以吸收陽光中的紫外線，保護面板內部結構免遭損害，頭髮象羊毛一樣捲曲，使每根捲髮周圍都有許多空隙，空隙充滿空氣，捲髮有隔熱作用。 歐洲白人： 生活寒帶或著是說常年溫度較低的地緣,加上年日照時間少，

Web前端學習筆記——CSS之Photoshop切圖

Photoshop基本使用 PS介面組成： ctrl + r 顯示隱藏標尺 右擊 標尺 — 把裡面的單位一律改為畫素 ctrl+ d 取消選區 選單欄、選項欄、工具欄、浮動面板（拖拽名稱，可單獨操作面板）、繪圖視窗 ​ 視窗選單，可顯示隱藏所

Web前端學習筆記——CSS京東案例、BFC

京東專案(一) 京東專案介紹 專案名稱：京東網 專案描述：京東首頁公共部分的頭部和尾部製作，京東首頁中間部分。 專案背景 現階段電商類網站很流行，很多同學畢業之後會進入電商類企業工作，同時電商類網站需要的技術也是較為複雜的，這裡用京東電商網站複習、總結、提高前

Web前端學習筆記——JavaScript之物件

物件 為什麼要有物件 function printPerson(name, age, sex....) { } // 函式的引數如果特別多的話，可以使用物件簡化 function printPerson(person) { console.log(perso

Web前端學習筆記——VueJS-APP案例

原始碼下載 將專案原始碼託管到oschina中 點選頭像 -> 修改資料 -> SSH公鑰 如何生成SSH公鑰 建立自己的空倉儲，使用 git config --global user.name "使用者名稱" 和 git config -

Web前端學習筆記——JavaScript 之函式進階

函式進階 函式的定義方式 函式宣告 函式表示式 new Function 函式宣告 function foo () { } 函式表示式 var foo = function () { } 函式宣告與函式表示式的區別 函式宣告必須有名字 函式宣告會函

Web前端學習筆記——JavaScript之面向物件程式設計

JavaScript 高階 基本概念複習 由於 JavaScript 高階還是針對 JavaScript 語言本身的一個進階學習，所以在開始之前我們先對以前所學過的 JavaScript 相關知識點做一個快速複習總結。 重新介紹 JavaScript J

Web前端學習筆記——Webpack結合VueJS使用、Mint-UI、MUI

注意： 有時候使用npm i node-sass -D裝不上，這時候，就必須使用 cnpm i node-sass -D 在普通頁面中使用render函式渲染元件 <!DOCTYPE html> <html lang="en"> <

Web前端學習筆記之安裝和使用PhantomJS

  0x00 安裝PhantomJS（linux環境安裝） 將PhantomJS下載在/usr/local/src/packet/目錄下（這個看個人喜好） 作業系統：CentOS 7 64-bit   1.下載地址：http://phantomjs.org/download.ht

Web前端學習筆記——CSS樣式、外觀、複合選擇器

CSS字型樣式屬性 font-size:字號大小 font-size屬性用於設定字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用畫素單位px，絕對長度單位使用較少。具體如下： font-family:字型 fo

Python學習筆記字典之keys()、values()和 items()方法

com png inf keys 學習筆記 修改 分享圖片 clas 沒有 隨筆記錄方便自己和同路人查閱。 #------------------------------------------------我是可恥的分割線--------------------------

Web前端學習筆記，詳細的Web前端學習路線圖

3.3 小米 教學視頻 前端工程 武漢 beyond 1.8 之前 1.5 前端就是後臺實現和視覺表現的橋梁，是貫穿在整個產品開發過程的紐帶，起到承上啟下的作用，一個好的前端工程師他能夠很好理解產品經理對用戶體驗的要求，也能夠很好地理解後臺工程師對數據邏輯，或者程序邏輯進行

Web前端學習筆記——構建前端自動化工作流環境

目錄 為什麼要有自動化的流程 在我們的開發過程中有大量的重複操作 DRY Don't repeat yourself 開發人員的精力應放在哪？創造，新的一切 前端開發的編譯操作 1.

Web前端學習筆記——Webpack

在網頁中會引用哪些常見的靜態資源？ JS .js .jsx .coffee .ts（TypeScript 類 C# 語言） CSS .css .less .sass .scss Images .jpg .png .g