在开始使用 Quasar 之前，最好先熟悉 ES6 并对 Vue 3 的工作原理有相当好的了解。（ES6 快速概述 和 ES6 功能完整列表 – 不用担心，你不需要理解 ES6 的所有内容）。对于有反应式 UI 经验的开发人员，Vue 3 文档 本身最多需要半天时间从头到尾阅读，并将帮助你了解如何使用和配置 Quasar 组件。
提示
如果你完全不了解 Vue 和反应式 UI 库，并且想要一个好的教程，我们建议你查看 Vue 和 Quasar 视频教程。
阅读完 Vue 文档后，让我们澄清一些最常见的问题，例如“如何使用 Quasar 组件、Vue 属性、方法和事件”。
Vue 单文件组件 (SFC)
你将使用 *.vue 文件构建你的 Quasar 应用程序，这些文件包含多个部分：template（HTML）、script（Javascript）和 style（CSS/SASS/SCSS/Stylus/Less）都位于同一个文件中。
目前，建议使用带有 <script setup> 的组合式 API。查看 Vue.js 文档 以获取更多信息。
<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>但如果你愿意，你仍然可以使用不带 <script setup> 的组合式 API 或选项式 API。唯一的区别在于 <script> 标签内。
<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 预处理器
对于 <style> 标签，你也可以使用任何你想要的 CSS 预处理器。Sass/SCSS（推荐）开箱即用。
你可以指定你希望选择的预处理器处理你正在编写的 CSS 代码
<!-- notice lang="sass" -->
<style lang="sass">
.some-div
font-size: 15px
</style>
<!-- notice lang="scss" -->
<style lang="scss">
.some-div {
font-size: 15px;
}
</style>使用 Quasar 指令
Quasar 带有几个自定义的 Vue 指令。这些指令几乎可以应用于任何 DOM 元素或组件。
Quasar 指令示例
<div v-ripple>Click Me</div>请注意，Ripple 如何在 HTML 模板中用作
v-ripple。Vue 指令以v-为前缀。
<div v-touch-pan="handler">...</div>
<div v-touch-swipe="handler">...</div>
<div v-ripple>Click me. I got ripples.</div>使用 Quasar 组件
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 文件中和 Vue 文件外部使用的功能，例如 Notify、BottomSheet、AppVisibility 等。
警告
**在你的应用程序中使用它们之前**，你需要在 /quasar.config 文件中添加对它们的引用（如下所示）。
framework: {
plugins: [ 'Notify', 'BottomSheet' ]
}让我们以 Notify 为例，看看我们如何使用它。在 Vue 文件中，你会这样写（组合式 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>。
选项式 API 中等效的脚本部分
export default {
methods: {
showNotification () {
this.$q.notify('Some other message')
}
}
}现在让我们看看 Notify 在 Vue 文件外部使用的示例
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，你必须显式关闭标签。它与常规 DOM 元素的工作方式相同
<div class="col" />
<!-- equivalent to: -->
<div class="col"></div>一些 eslint-plugin-vue 规则实际上强制使用自闭合语法。
处理 Vue 属性
让我们以一些虚构的 Quasar 组件（我们将其称为 QBogus）为例，该组件支持以下属性。我们将在下面的章节中讨论每种类型的 Vue 属性。
| Vue 属性 | 类型 | 描述 |
|---|---|---|
infinite | 布尔值 | 无限滑动滚动 |
size | 字符串 | 加载条的厚度。 |
speed | 数字 | 加载条更新其值的速度（以毫秒为单位）。 |
columns | 对象 | 定义列的对象（请参阅下面的“列定义”）。 |
offset | 数组 | 包含两个数字的数组。水平和垂直偏移量（以像素为单位）。 |
布尔属性
布尔属性意味着它只接受严格的布尔值。值不会转换为布尔值，因此你必须确保你使用的是真正的布尔值。
提示
在 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 | 在模态框显示后立即触发。 |
@hide | 在模态框隐藏后立即触发。 |
为了在这些事件触发时捕获它们，您需要在 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>