簡簡單單的Vue2（簡單語法，生命週期，元件）

HANS許發表於2019-01-15
Vue元件

既然選擇了遠方，便只顧風雨兼程！ __HANS許

系列：零基礎搭建前後端分離專案

 

 

在上面文章，我們簡單的講了前端框架的工程化，也就是MVVM,還有特別聊了下VUE的雙向繫結機制，那這篇文章我們就來講講Vue的語法與特點，路由與外掛，方便大家可以直接上手。

介於是基礎的嘛，可能來看的，沒接觸過前端，那可以先去看看我的前端系列，當然顧忌到大家可能是從JQuery的時代過來的，我的例子就直接沒有使用前端目錄那樣子了，每個例子一個一HTML，直接引用Vue.js,連結走起：像JQuery一樣引用的Vue例子(可以直接在目錄之前加上 “https://xhl592576605.github.io/markdown/” 就可以直接看到效果了)

簡單入手

首先要使用某個JS，肯定是要引用的JS，

  1. 直接開發，可一直直接<script src="https://unpkg.com/vue"></script>
  2. 前端流行開發，npm i vue&&import Vue from "vue";
  3. 這樣就可以開始使用了。

  • 來個例子

    <div id="app">
    {{ message }}
</div>

    var app = new Vue({
  el: `#app`,
  data: {
    message: `Hello Vue!`
  }
})

    這樣在瀏覽器就可以看到Hello Vue!的字樣了

  • 生命週期

咦，怎麼不講語法等等呢，怎麼直接跳到生命週期呢?我只能說語法這種大多類似，也很多，大家看下就會了，講生命週期，是覺得他比較重要。

例子：https://xhl592576605.github.io/markdown/零基礎搭建前後端分離專案/Code/Vue/sample/4生命週期.html
大家可以F12可以看下效果，如果有裝vue-devtools，可以試著改下值，然後再看下輸出:

 

enter description here
enter description here

 

每個東西其實都是有生命的，一次生命，一次週期

 

enter description here
enter description here

 

生命週期是由你想建立一個例項開始的，生命週期很簡單，都是在你做某件事前，會先執行一件（系列）事，然後再執行真正的操作。最後會再執行一件（系列）的事，最後會走上消亡。獲取做事情之前還會被先劫持一會，做一些特殊操作，如判斷，最後還是會回到正軌上來。

所以Vue的生命週期也很簡單，它由一系列的函式函式構成，它會在他們的週期，也就適當的時候被呼叫。

new Vue({
        el: `#app`,
        data: { message: "Hello Word!" },
        beforeCreate: function () {
            console.info(`在例項初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫。` + new Date().toLocaleString())
            console.log(this)
        },
        created: function () {
            console.info(`在例項建立完成後被立即呼叫。在這一步，例項已完成以下的配置： 資料觀測 (data observer)，屬性和方法的運算，watch/event 事件回撥。然而，掛載階段還沒開始，$el 屬性目前不可見。` + new Date().toLocaleString())
            console.log(this)
        },
        beforeMount: function () {
            console.info(`在掛載開始之前被呼叫：相關的 render 函式首次被呼叫。該鉤子在伺服器端渲染期間不被呼叫。` + new Date().toLocaleString())
            console.log(this)
        },
        ...
        })

下面是生命週期鉤子函式的表格：

 

enter description here
enter description here

 

元件

或許你玩過其他框架，或許你玩過微信小程式，或許你玩過支付寶小程式，再或者你玩過釘釘小程式，好吧，你都玩過-_-，他們都是有元件化的概念的。那Vue也有。
Vue元件，就是可以複用的Vue例項。
元件的Data必須是函式

例子：https://xhl592576605.github.io/markdown/零基礎搭建前後端分離專案/Code/Vue/sample/5元件化應用構建.html

  • 建立元件

    // 定義一個名為 button-counter 的新元件
    Vue.component(`button-counter`, {
      data: function () {
        return {
          count: 0
        }
      },
      template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    })

    <div id="components-demo">
     <button-counter></button-counter>
</div>

    new Vue({ el: `#components-demo` })

    這樣就建立了一個元件，並且使用了。元件有分全域性註冊與區域性註冊。顧名思義就是，全域性都可以用，區域性只有在器例項底下可以使用。

    1. 全域性 
      Vue.component(`component-a`, { /* ... */ })
Vue.component(`component-b`, { /* ... */ })
Vue.component(`component-c`, { /* ... */ })

new Vue({ el: `#app` })
    2. 區域性 
      new Vue({
       el: `#app`,
      components: {
        `component-a`: ComponentA,
        `component-b`: ComponentB
      }
    })

那大家都知道，有元件的概念，肯定就是子父元件的傳值，Vue是靠Prop給子元件傳值，而子元件是靠event給父元件傳值的

  • Prop

值得注意HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字元解釋為小寫字元。這意味著當你使用 DOM 中的模板時，camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名

例子：https://xhl592576605.github.io/markdown/零基礎搭建前後端分離專案/Code/Vue/sample/7子父元件的資料傳遞.html

  1. 簡單例子

    Vue.component(`blog-post`, {
  props: [`popTitle`],
  template: `<h3>{{ title }}</h3>`
})

    <blog-post pop-title="My journey with Vue"></blog-post>
<blog-post pop-title="Blogging with Vue"></blog-post>
<blog-post pop-title="Why Vue is so fun"></blog-post>

  2. 型別與驗證
    可以看到下面,很明顯type為型別，default為預設值，validator為驗證。

        Vue.component(`my-component`, {
  props: {
    // 基礎的型別檢查 (`null` 匹配任何型別)
    propA: Number,
    // 多個可能的型別
    propB: [String, Number],
    // 必填的字串
    propC: {
      type: String,
      required: true
    },
    // 帶有預設值的數字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有預設值的物件
    propE: {
      type: Object,
      // 物件或陣列預設值必須從一個工廠函式獲取
      default: function () {
        return { message: `hello` }
      }
    },
    // 自定義驗證函式
    propF: {
      validator: function (value) {
        // 這個值必須匹配下列字串中的一個
        return [`success`, `warning`, `danger`].indexOf(value) !== -1
      }
    }
  }
})

  3. 單向資料
    所有的 prop 都使得其父子 prop 之間形成了一個單向下行繫結：父級 prop 的更新會向下流動到子元件中，但是反過來則不行。這樣會防止從子元件意外改變父級元件的狀態，從而導致你的應用的資料流向難以理解。

  • 自定義事件

在瞭解自定義事件，需要先了解$emit這個函式，這個函式由Vue例項呼叫，是觸發一個事件。然後我們可以使用v-on來監聽

例子：https://xhl592576605.github.io/markdown/零基礎搭建前後端分離專案/Code/Vue/sample/8元件的事件傳遞資料.html

<button v-on:click="$emit(`enlarge-text`)">
  Enlarge text
</button>

<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>
  • 插槽

slot我覺得大家也應該不陌生，也就插槽，插槽可以定在在元件模板的任意位置，在使用元件的時候，需要插在元件內部的內容，也就插槽，就是讓開發自己定義的，值得一提，插槽是有名字的，名字不能重複，沒有名字的為預設插槽，一個元件且只有一個預設的。

  1. 元件內部

    <a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

  2. 形成內容

        <navigation-link url="/profile">
  <!-- 新增一個 Font Awesome 圖示 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

  3. 具名插槽

    <div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

那這邊文章就將這些吧 ，這些較為基礎，也最有用。都離不開他們的。

相關文章