VUE基礎之概述

VUE是什麼

Vue (讀音 /vjuː/，類似于 view) 是一套用于建構使用者界面的漸進式架構。Vue 的核心庫隻關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。

元件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可複用的元件建構大型應用。仔細想想，幾乎任意類型的應用界面都可以抽象為一個元件樹。

元件

在 Vue 裡，一個元件本質上是一個擁有預定義選項的一個 Vue 執行個體。

注冊元件

元件的注冊分為全局注冊和局部注冊,下面的注冊是全局注冊。

// 定義名為 todo-item 的新元件
Vue.component('todo-item', {
  template: '<li>這是個待辦項</li>'
})
           

1.使用元件，并通過父元件往子元件傳遞參數。

Vue.component('todo-item', {
  // todo-item 元件現在接受一個
  // "prop"，類似于一個自定義特性。
  // 這個 prop 名為 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})


var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什麼人吃的東西' }
    ]
  }
})

<div id="app-7">
  <ol>
    <!--
      現在我們為每個 todo-item 提供 todo 對象
      todo 對象是變量，即其内容可以是動态的。
      我們也需要為每個元件提供一個“key”，稍後再
      作詳細解釋。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>
           

元件複用

有如下的元件：

// 定義一個名為 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' })
           

因為元件是可複用的 Vue 執行個體，是以它們與new Vue接收相同的選項，例如data computed watch methods 以及生命周期鈎子等，僅有的特殊例外像el這樣的根執行個體特有選項

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

注意當點選按鈕時，每個元件都會各自獨立維護它的 count。因為你每用一次元件，就會有一個它的新執行個體被建立

data必須是一個函數

一個元件的data選項必須是一個函數，是以每個執行個體可以維護一份被傳回對象的獨立的拷貝,如果 Vue 沒有這條規則，點選一個按鈕就可能會影響到其它所有執行個體

通過 Prop 向子元件傳遞資料

Prop 是你可以在元件上注冊的一些自定義特性。當一個值傳遞給一個 prop 特性的時候，它就變成了那個元件執行個體的一個屬性。為了給博文元件傳遞一個标題，我們可以用一個props選項将其包含在該元件可接受的 prop 清單中。

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

一個元件預設可以擁有任意數量的 prop，任何值都可以傳遞給任何 prop。

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

正在的應用場景如下：

//真實的資料應該是一個數組
new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

<blog-post v-for "post in posts" 
    v-bind:key="post.id" v-bind:title="post.title">
</blog-post>
           

單個根元素

每個元件都需要有且僅有一個元素。

并且傳遞的資料需要盡量友善。

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})
           

傳輸的資料需要盡可能友善：

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>

而不是按照如下規則進行：
<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
  v-bind:content="post.content"
  v-bind:publishedAt="post.publishedAt"
  v-bind:comments="post.comments"
></blog-post>
           

向父元件傳遞資料

<!--在父元件上聲明布局-->
new Vue({
    el:'enlarge-text-demo',
    postFontSize:20
})

<div id='enlarge-text-demo'>
    <blog-post style="{font-size: postFontSize + 'em'}" v-for:"post in posts" :key="post.id" :post="post" v-on:enlarge-text="postFontSize += 0.1">
    </blog-post>
<div>


<!--子元件-->
<!--注冊元件-->
Vue.component('blog-post',{
    props:['post'],
    templete:`
        <div class='blog-post'>
        <h3>{{ post.title }}</h3>
          <button v-on:click="$emit('enlarge-text')">
            Enlarge text
          </button>
          <div v-html="post.content"></div>
        </div>
    `
})
           

子控件往父控件傳遞參數

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

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>
或者，如果這個事件處理函數是一個方法：

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}
           

使用v-model

V-model是雙選綁定，上面的内容是單向綁定

<input v-model="searchText"/>
等效于
<input :value="searchText"
@input="searchText=$event.target.value"/>

是以，要想使用v-model,必須按照如下方式使用：
<custom-input
  v-bind:value="searchText" //自定義屬性
  v-on:input="searchText = $event" //自定義屬性
></custom-input>

vue的子元件的寫法如下：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)" //回傳屬性
    >
  `
})


是以 可以使用v-model
<custom-input v-model="searchText"></custom-input>
           

通過插槽分發内容

和 HTML 元素一樣，我們經常需要向一個元件傳遞内容，像這樣：

<alert-box>
  Something bad happened.
</alert-box>

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})
           

輸出結果：

Error! Something bad happened.

t:插槽傳遞内容

動态元件

有的時候，在不同元件之間進行動态切換是非常有用的，比如在一個多标簽的界面。

<component v-bind:is="currentTabComponent"></component>