為何捐款
API 探索器
How To Use Vue

Before you begin with Quasar, it is a good idea to get acquainted with ES6 and have a fairly good knowledge about how Vue 3 works. (Quick overview of ES6 and ES6 complete list of features – don’t worry, you don’t need to understand ALL of ES6). For devs experienced with reactive UIs, the Vue 3 documentation itself takes a half-day at most to read top-to-bottom and will help you understand how Quasar components can be used and configured.

TIP

If you are a total beginner to Vue and reactive UI libraries and want a good tutorial, we recommend you take a look at Vue and Quasar video tutorials.

After reading the Vue documentation, let’s clear up some of the most frequently asked questions, like “How can I use Quasar components, Vue properties, methods and events”.

Vue Single File Components (SFC)

You’ll be building your Quasar app using *.vue files which contain multiple sections: template (HTML), script (Javascript) and style (CSS/SASS/SCSS/Stylus/Less) all in the same file.

Currently, it is recommended to use Composition API with <script setup>. Check out Vue.js documentation for more information.

<template>
  <!-- you define your Vue template here -->
</template>

<script setup>
// This is where your Javascript goes
// to define your Vue component, which
// can be a Layout, a Page or your own
// component used throughout the app.
</script>

<style>
/* This is where your CSS goes */
</style>

But you can still use Composition API without <script setup> or Options API if you wish. The only difference is within the <script> tag.

<template>
  <!-- you define your Vue template here -->
</template>

<script>
// This is where your Javascript goes
// to define your Vue component, which
// can be a Layout, a Page or your own
// component used throughout the app.

export default {
  //
}
</script>

<style>
/* This is where your CSS goes */
</style>

CSS preprocessors

For the <style> tag, you can also use whatever CSS preprocessor you want. Sass/SCSS (recommended) is available out of the box.

You can specify you want your chosen preprocessor to handle the CSS code that you’re writing

<!-- notice lang="sass" -->
<style lang="sass">
.some-div
  font-size: 15px
</style>

<!-- notice lang="scss" -->
<style lang="scss">
.some-div {
  font-size: 15px;
}
</style>

Using Quasar Directives

Quasar comes with a few custom Vue Directives. These directives can be applied on almost any DOM element or Component.

Example of a Quasar directive

<div v-ripple>Click Me</div>

Notice how Ripple is used in the HTML template as v-ripple. Vue directives are prefixed with v-.

<div v-touch-pan="handler">...</div>
<div v-touch-swipe="handler">...</div>
<div v-ripple>Click me. I got ripples.</div>

Using Quasar Components

Quasar 元件的名稱都以 "Q" 開頭，例如 "QBtn" 或 "QElementResizeObserver"。為了使用它們，您需要在 /quasar.config 檔案中加入對它們的參考。

讓我們以 QBtn 和 QIcon 為例，然後看看如何在我們的應用程式中嵌入這些元件

<div>
  <q-btn @click="doSomething" label="Do something" />
  <q-icon name="alarm" />
</div>

請注意 QBtn 在 Vue HTML 模板中是如何以 <q-btn> 方式使用的。如果我們要導入 QElementResizeObserver，那麼我們會在模板中以 <q-element-resize-observer> 方式使用它。

使用 Quasar 插件

Quasar 插件是您可以在 Vue 檔案內外使用的功能，例如 Notify、BottomSheet、AppVisibility 等等。

警告

在您的應用程式中使用它們之前，您需要在 /quasar.config 檔案中加入對它們的參考（如下所示）。

framework: {
  plugins: [ 'Notify', 'BottomSheet' ]
}

讓我們以 Notify 作為範例，看看我們如何使用它。在 Vue 檔案中，您可以這樣寫（Composition API）

<template>
  <div>
    <q-btn
      @click="$q.notify('My message')"
      color="primary"
      label="Show a notification"
    />

    <q-btn
      @click="showNotification"
      color="primary"
      label="Show another notification"
    />
  </div>
</template>

<script>
import { useQuasar } from 'quasar'

export default {
  setup () {
    const $q = useQuasar()

    function showNotification () {
      $q.notify('Some other message')
    }

    return {
      showNotification
    }
  }
}
</script>

請注意在模板區域中，我們使用 $q.<plugin-name>。

以下是在 Options API 中等效的 script 區塊

export default {
  methods: {
    showNotification () {
      this.$q.notify('Some other message')
    }
  }
}

現在讓我們看看在 Vue 檔案之外使用 Notify 的範例

import { Notify } from 'quasar'

// ...
Notify.create('My message')

自我關閉標籤

警告

當您使用 Quasar UMD 版本時，請勿使用自我關閉標籤形式。您的瀏覽器會在 Vue 解析您的 DOM 元素之前先解析 HTML，因此您的 HTML 語法必須正確。未知的標籤（例如 Vue 元件）不能自我關閉，因為您的瀏覽器會將它們解釋為您正在開啟一個標籤但從未關閉它。

有些 Quasar 元件不需要您在其中包含 HTML 內容。在這種情況下，您可以將它們用作自我關閉標籤。以下是一個 QIcon 的範例

<q-icon name="cloud" />

自我關閉意味著上面的模板等同於

<q-icon name="cloud"></q-icon>

兩種形式都是有效的並且可以使用，但 UMD 除外，在 UMD 中您必須明確地關閉標籤。它與常規 DOM 元素的工作方式相同

<div class="col" />
<!-- equivalent to: -->
<div class="col"></div>

某些 eslint-plugin-vue 檢查規則實際上強制使用自我關閉語法。

處理 Vue 屬性

讓我們以一個虛構的 Quasar 元件（我們將其稱為 QBogus）為例，它支援以下屬性。我們將在以下章節中討論每種類型的 Vue 屬性。

Vue 屬性類型描述
infiniteBoolean無限滑動捲軸
sizeString載入條的粗細。
speedNumber載入條更新其值的速度（以毫秒為單位）。
columnsObject定義欄位的物件（請參閱下面的「欄位定義」）。
offsetArray包含兩個數字的陣列。水平和垂直方向的偏移量（以像素為單位）。

布林屬性

布林屬性意味著它只接受嚴格的布林值。這些值不會被轉換為布林值，因此您必須確保您使用的是真正的布林值。

TIP

在 Quasar 中，所有布林屬性的預設值都是 false。因此，您不必明確地將 false 值賦予它們。

如果您嘗試控制該屬性並在運行時動態更改它，則將其綁定到您作用域中的變數

<template>
  <q-bogus :infinite="myInfiniteVariable" />
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const myInfiniteVariable = ref(false)
    return {
      myInfiniteVariable
    }
  }
}
</script>

另一方面，如果您知道這個布林值不會改變，您可以像元件屬性一樣使用變數的簡寫版本並直接指定它。換句話說，如果您不將變數綁定到元件作用域中的變數，它將始終為 true

<template>
  <q-bogus infinite />

  <!--
    the following is perfectly valid,
    but it's a longer version
  -->
  <q-bogus :infinite="true" />
</template>

字串屬性

您可以想像，字串是此類型屬性所需的值。

<template>
  <!--
    direct assignment, no need for
    a variable in our scope
  -->
  <q-bogus size="24px" />

  <!--
    we can also bind it to a variable
    in our scope so we can dynamically
    change it
  -->
  <q-bogus :size="mySize" />
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    // notice String as value
    const mySize = ref('16px')
    return {
      mySize
    }
  }
}
</script>

數字屬性

<template>
  <!--
    Case 1. Direct assignment.
    Notice the colon (":") before property name.
  -->
  <q-bogus :speed="50" />

  <!-- Case 2. Assignment through a scope variable -->
  <q-bogus :speed="myNumber" />
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    // notice Number as value
    const myNumber = ref(50)
    return {
      myNumber
    }
  }
}
</script>

物件屬性

<template>
  <!-- Case 1. Direct assignment. -->
  <q-bogus :columns="{key: 'value', anotherKey: 'another value'}" />

  <!-- Case 2. Assignment through a scope variable -->
  <q-bogus :columns="myColumns" />
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const myColumns = ref({
      key: 'value',
      anotherKey: 'another value'
    })

    return { myColumns }
  }
}
</script>

陣列屬性

<template>
  <!-- Case 1. Direct assignment. -->
  <q-bogus :offset="[10, 20]" />

  <!-- Case 2. Assignment through a scope variable -->
  <q-bogus :offset="myOffset" />
</template>

<script>
export default {
  setup () {
    return {
      myOffset: [10, 20]
    }
  }
}
</script>

處理 Vue 方法

您會在整個文件中注意到，某些 Quasar 元件具有可以呼叫的方法。範例

Vue 方法描述
next()前往下一個幻燈片。
previous(doneFn)前往上一個幻燈片。
toggleFullscreen()切換全螢幕模式。

為了讓您存取這些方法，您需要先在元件上設定 Vue 參考。以下是 Composition API 的範例

<template>
  <!--
    Notice ref="myRef". We will use the name
    assigned to "ref" in the script part below
  -->
  <q-bogus ref="myRef" />
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup () {
    const myRef = ref(null)

    // after the component has mounted into DOM:
    onMounted(() => {
      // we call "next()" method of our component
      myRef.value.next()
    })
    // calling before mount point might result in errors
    // as Vue hasn't yet prepared the Vue reference

    // we expose myRef to the scope so Vue
    // can use it in the template as well
    return { myRef }
  }
}
</script>

這是相同的範例，但使用 Options API

<template>
  <!--
    Notice ref="myRef". We will use the name
    assigned to "ref" in the script part below
  -->
  <q-bogus ref="myRef" />
</template>

<script>
export default {
  // we can now access `this.$refs.myRef`
  // an example on the mounted() Vue component hook
  mounted () {
    // calling "next()" method:
    this.$refs.myRef.next()
  }
  // calling before mount point might result in errors
  // as Vue hasn't yet prepared the Vue reference
}
</script>

處理 Vue 事件

您會在整個文件中注意到，某些 Quasar 元件有一個名為「Vue 事件」的章節。

「Vue 事件」範例

事件名稱描述
@show在 Modal 顯示後立即觸發。
@hide在 Modal 隱藏後立即觸發。

為了讓您捕獲這些事件（當它們被觸發時），您需要在 HTML 模板中的元件本身上為它們添加監聽器。這是一個範例

<template>
  <q-bogus @show="doSomething" @hide="doSomethingElse" />
</template>

<script>
export default {
  setup () {
    function doSomething () {
      // this method has been called (in this case)
      // because @show event was triggered by QBogus component
    }

    function doSomethingElse () {
      // this method has been called (in this case)
      // because @hide event was triggered by QBogus component
    }

    return {
      doSomething,
      doSomethingElse
    }
  }
}
</script>
發現錯誤？在瀏覽器中編輯此頁面
1. 簡介
2. Vue 單文件組件 (SFC)
2.1. CSS 預處理器
3. 使用 Quasar 指令
4. 使用 Quasar 元件
5. 使用 Quasar 插件
5.1. 自我關閉標籤
6. 處理 Vue 屬性
6.1. 布林屬性
6.2. 字串屬性
6.3. 數字屬性
6.4. 物件屬性
6.5. 陣列屬性
7. 處理 Vue 方法
8. 處理 Vue 事件
MIT 授權條款隱私權政策
版權所有 © 2015-至今 PULSARDEV SRL, Razvan Stoenescu
本網站由 Dreamonkey Srl 協同設計