在开始学习 Quasar 之前，建议先掌握 Vue 3 的基础知识。对于有响应式 UI 开发经验的开发者来说，Vue 3 文档最多只需半天时间就可以通读，这对理解如何使用和配置 Quasar 组件非常有帮助。
TIP
如果您是 Vue 和响应式 UI 库的初学者，想找一份好教程，推荐您看看 Vue 和 Quasar 视频教程。
在阅读 Vue 文档后，让我们来解答一些常见问题，比如 “如何使用 Quasar 组件、Vue 属性、方法和事件”。
Vue 单文件组件 (SFC)
您将使用 *.vue 文件来构建 Quasar 应用，每个文件包含多个部分：template（HTML）、script（Javascript）和 style（CSS/SASS/SCSS/Stylus/Less），它们都在同一个文件中。
目前，推荐使用组合式 API 配合 <script setup> 语法。更多信息请查看 Vue.js 文档。
<template>
<!-- 在此定义 Vue 模板 -->
</template>
<script setup>
// 在这里编写 JavaScript，
// 定义您的 Vue 组件，
// 可以是布局、页面或您自己的
// 可复用组件。
</script>
<style>
/* 在此编写 CSS */
</style>当然，您也可以使用不带 <script setup> 的组合式 API 或选项式 API。唯一的区别在 <script> 标签内部。
<template>
<!-- 在此定义 Vue 模板 -->
</template>
<script>
// 在这里编写 JavaScript，
// 定义您的 Vue 组件，
// 可以是布局、页面或您自己的
// 可复用组件。
export default {
//
};
</script>
<style>
/* 在此编写 CSS */
</style>CSS 预处理器
在 <style> 标签中，您可以使用任意 CSS 预处理器。Sass/SCSS（推荐）是开箱即用的。
您可以指定使用哪种预处理器来处理 CSS 代码：
<!-- 注意 lang="sass" -->
<style lang="sass">
.some-div
font-size: 15px
</style>
<!-- 注意 lang="scss" -->
<style lang="scss">
.some-div {
font-size: 15px;
}
</style>使用 Quasar 指令
Quasar 提供了一些自定义 Vue 指令，几乎可以用在任何 DOM 元素或组件上。
Quasar 指令示例：
<div v-ripple>点击我</div>注意在 HTML 模板中 Ripple 以
v-ripple的形式使用。Vue 指令都以v-为前缀。
<div v-touch-pan="handler">...</div>
<div v-touch-swipe="handler">...</div>
<div v-ripple>点击我，会有涟漪效果</div>使用 Quasar 组件
Quasar 组件的名称以 “Q” 开头，如 “QBtn” 或 “QElementResizeObserver”。要使用它们，需要在 /quasar.config 文件中添加引用。
以 QBtn 和 QIcon 为例，看看如何在应用中嵌入这些组件：
<div>
<q-btn @click="doSomething" label="Do something" />
<q-icon name="alarm" />
</div>注意在 Vue HTML 模板中 QBtn 以
<q-btn>的形式使用。如果导入 QElementResizeObserver，则在模板中使用<q-element-resize-observer>。
使用 Quasar 插件
Quasar 插件是可以在 Vue 文件内外使用的功能，如 Notify、BottomSheet、AppVisibility 等。
WARNING
在使用前，需要在 /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 中等价的 script 部分：
export default {
methods: {
showNotification() {
this.$q.notify("Some other message");
},
},
};在 Vue 文件之外使用 Notify 的示例：
import { Notify } from "quasar";
// ...
Notify.create("My message");自闭合标签
WARNING
在使用 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" />
<!-- 等价于: -->
<div class="col"></div>某些 eslint-plugin-vue 的规则实际上会强制使用自闭合语法。
处理 Vue 属性
假设有一个虚构的 Quasar 组件 QBogus，支持以下属性。我们将在下面的章节中逐一讨论每种类型的 Vue 属性。
| Vue 属性 | 类型 | 描述 |
|---|---|---|
infinite | Boolean | 是否启用无限滚动 |
size | String | 加载条的厚度 |
speed | Number | 加载条更新速度（毫秒） |
columns | Object | 列定义对象（见下方 “Columns Definition” 部分） |
offset | Array | 包含两个数字的数组，表示水平和垂直偏移量（像素） |
布尔属性
布尔属性只接受严格的布尔值，不会发生自动类型转换，因此您必须确保传入的是真正的布尔值。
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 />
<!--
下面的写法也完全正确，
只是更长一些
-->
<q-bogus :infinite="true" />
</template>字符串属性
字符串属性需要传入一个字符串值。
<template>
<!--
直接赋值，不需要
在作用域中定义变量
-->
<q-bogus size="24px" />
<!--
也可以绑定到作用域中的变量，
这样就能动态修改它
-->
<q-bogus :size="mySize" />
</template>
<script>
import { ref } from "vue";
export default {
setup() {
// 注意值是字符串
const mySize = ref("16px");
return {
mySize,
};
},
};
</script>数字属性
<template>
<!--
情况 1：直接赋值。
注意属性名前的冒号（":"）。
-->
<q-bogus :speed="50" />
<!-- 情况 2：通过作用域变量赋值 -->
<q-bogus :speed="myNumber" />
</template>
<script>
import { ref } from "vue";
export default {
setup() {
// 注意值是数字
const myNumber = ref(50);
return {
myNumber,
};
},
};
</script>对象属性
<template>
<!-- 情况 1：直接赋值 -->
<q-bogus :columns="{key: 'value', anotherKey: 'another value'}" />
<!-- 情况 2：通过作用域变量赋值 -->
<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>
<!-- 情况 1：直接赋值 -->
<q-bogus :offset="[10, 20]" />
<!-- 情况 2：通过作用域变量赋值 -->
<q-bogus :offset="myOffset" />
</template>
<script>
export default {
setup() {
return {
myOffset: [10, 20],
};
},
};
</script>处理 Vue 方法
在文档中，您会注意到某些 Quasar 组件提供了可调用的方法。例如：
| Vue 方法 | 描述 |
|---|---|
next() | 跳转到下一张幻灯片 |
previous(doneFn) | 跳转到上一张幻灯片 |
toggleFullscreen() | 切换全屏模式 |
要访问这些方法，首先需要在组件上设置一个 Vue 引用。以下是组合式 API 的示例：
<template>
<!--
注意 ref="myRef"。我们将在下方的
script 部分使用 "ref" 对应的名称
-->
<q-bogus ref="myRef" />
</template>
<script>
import { ref, onMounted } from "vue";
export default {
setup() {
const myRef = ref(null);
// 在组件挂载到 DOM 之后：
onMounted(() => {
// 调用组件的 "next()" 方法
myRef.value.next();
});
// 在挂载前调用可能会出错，
// 因为 Vue 尚未准备好 Vue 引用
// 将 myRef 暴露到作用域中，以便
// Vue 也能在模板中使用它
return { myRef };
},
};
</script>以下是相同示例的选项式 API 版本：
<template>
<!--
注意 ref="myRef"。我们将在下方的
script 部分使用 "ref" 对应的名称
-->
<q-bogus ref="myRef" />
</template>
<script>
export default {
// 现在可以访问 `this.$refs.myRef`
// 以下是在 mounted() Vue 组件钩子中的示例
mounted() {
// 调用 "next()" 方法：
this.$refs.myRef.next();
},
// 在挂载前调用可能会出错，
// 因为 Vue 尚未准备好 Vue 引用
};
</script>处理 Vue 事件
在文档中，您会注意到某些 Quasar 组件有一个 “Vue Events” 部分。
“Vue Events” 示例：
| 事件名称 | 描述 |
|---|---|
@show | 模态框显示后立即触发 |
@hide | 模态框隐藏后立即触发 |
要捕获这些事件，需要在 HTML 模板中的组件上添加监听器。示例如下：
<template>
<q-bogus @show="doSomething" @hide="doSomethingElse" />
</template>
<script>
export default {
setup() {
function doSomething() {
// 当 QBogus 组件触发 @show 事件时
// 这个方法会被调用
}
function doSomethingElse() {
// 当 QBogus 组件触发 @hide 事件时
// 这个方法会被调用
}
return {
doSomething,
doSomethingElse,
};
},
};
</script>