Vue基礎篇二：Vue元件的核心概念

系列文章目錄

Vue基礎篇一：編寫第一個Vue程式

Vue基礎篇二：Vue元件的核心概念

文章目錄

• ​​系列文章目錄​​
• ​​一、Vue元件的組成--屬性​​
• ​​二、Vue元件的組成--事件​​
• ​​三、Vue元件的組成--插槽​​
• ​​總結​​

一、Vue元件的組成–屬性

• 屬性可分為：

1. 自定義屬性 props

export default {
  <!-- 屬性todo,list,isVisible -->      

1. 原生屬性 attrs

• 沒有聲明的屬性，預設自動挂載到元件根元素上

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Hello Vue!" />
    <ol>
      <TodoItem
        <!-- 原生屬性 -->
        title="清單項目"
        v-for="item in list"
        v-bind:todo="item"
        v-bind:key="item.id"
      ></TodoItem>
    </ol>
  </div>
</template>      

• 設定inheritAttrs為false可以關閉自動挂載

export default {
  <!--關閉自動挂載 -->      

1. 特殊屬性 class、style

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <!-- 特殊屬性 -->
    <HelloWorld msg="Hello Vue!"style="color:red" />
    <ol>
      <TodoItem
        title="清單項目"
        v-for="item in list"
        v-bind:todo="item"
        v-bind:key="item.id"
      ></TodoItem>
    </ol>
  </div>
</template>      

二、Vue元件的組成–事件

• Vue元件的事件分類兩類：

1. 普通事件： @click,@input,@change,@xxx等事件，通過this.$emit(‘xxx’,…)觸發

在這裡插入代碼片      

<template>
  <div>
    <!-- 普通事件@change -->
    <input type="checkbox" :value="checked" @change="onChange" />
    <a :class="{active:index === 1}">{{ todo.text }}</a>
  </div>
</template>
<script>export default {
  inheritAttrs: false,
  props: {
    todo: Object,
    list: {
      type: Array,
      default: () => [],
    },
    checked: {
      type: Boolean,
      default: false,
    },
    index: {
      type : Number,
      default: -1
    }
  },
  methods: {
    onChange(e) {
      console.log(e.target.checked)
      if (e.target.checked==true){
          this.index=1
      }else{
          this.index =-1
      }
    },
  },
};</script>

<style scoped>.active {
  color: red;
}</style>      

1. 修飾符事件：@input.trim,@click.stop,@submit.prevent等，一般用于原生HTML元素，自定義元件需要自行開發支援

三、Vue元件的組成–插槽

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- 插槽 -->
    <slot name="button"/>
  </div>
</template>

<script>export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}</script>      

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Hello Vue!"style="color:red"> 
    <h2>老文法</h2>  
    <input slot="button" type="submit" value="點選進行送出" /> 
    </HelloWorld>
     <HelloWorld msg="Hello Vue!"style="color:red"> 
    <h2>新文法</h2>  
    <template v-slot:button>
       <input  type="submit" value="點選進行送出" />
    </template>
    </HelloWorld>
    <ol>
      <TodoItem
        title="清單項目"
        v-for="item in list"
        v-bind:todo="item"
        v-bind:key="item.id"
      ></TodoItem>
    </ol>
  </div>
</template>      

總結

• Vue元件主要有屬性、事件、插槽三大核心概念：