初学者简介

在开始使用Quasar之前,最好熟悉ES6,并且对Vue的工作原理有相当了解。 (快速浏览ES6完整说明 - 不用担心,您不需要了解所有的ES6)。对于具有reactive UI的开发经验的开发者,Vue文档从头到尾阅读最多只需要半天的时间,并且可以帮助您了解Quasar组件如何使用和配置。

如果你是Vue和reactive UI库的初学者,并且想要一个好的教程,我们建议你看一下Udemy Course - Vue JS 2 - 完整指南

阅读Vue文档后,我们来澄清一些最常见的问题,例如“我如何使用Quasar组件、Vue属性、方法和事件”。

单个文件Vue组件

您将使用包含多个部分的* .vue文件构建您的Quasar应用程序:’template’(HTML),’script’(Javascript)和’style’(CSS)。

<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预处理器。 Stylus开箱即用。 对于SCSS/SASS或LESS,您需要安装Webpack装载器(例如:yarn add --dev less-loadernpm install --save-dev less-loader)。

在安装你需要的加载器(记住Stylus已经为你安装)后,你可以指定你希望你选择的预处理器处理你正在编写的CSS代码:

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

在上面的例子中,你会用你选择的预处理器替换stylus

使用Quasar指令

Quasar带有一些自定义Vue指令。 这些指令可以应用于几乎任何DOM元素或组件。

Quasar指令的例子:

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

请注意,纹波在HTML模板中用作“v-ripple”。 Vue指令的前缀是v-

为了让您使用Quasar提供的任何指令,您首先需要告诉Quasar您希望它嵌入。 打开/quasar.conf.js文件并添加以下参考:

framework: {
directives: ['Ripple']
}

我们再举一个例子。 我们现在也想要TouchPan和TouchSwipe指令,所以我们也将它们添加到/quasar.conf.js:

framework: {
directives: ['Ripple', 'TouchPan', 'TouchSwipe']
}

现在我们可以在你的Vue文件模板中写入:

<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”或“QElementResizeObservable”。 为了使用它们,您需要在/quasar.conf.js中添加对它们的引用。

让我们以QBtn和QIcon作为例子,然后我们将看到如何将这些组件嵌入到我们的应用程序中:

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

请注意,QBtn在Vue HTML模板中是如何使用的(以<q-btn>的方式)。 如果我们要导入QElementResizeObservable,那么我们将在模板中以<q-element-resize-observable>的方式使用它。

现在在/quasar.conf.js上,你可以添加:

framework: {
components: ['QBtn', 'QIcon']
}

使用Quasar插件

Quasar插件是可以同时在Vue文件之中或之外使用的功能,例如Notify,ActionSheet,AppVisibility等。

为了使用它们,你需要在/quasar.conf.js中添加对它们的引用:

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

我们以Notify为例,看看我们如何使用它。 在Vue文件中,你会写这样的东西:

<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>
export default {
methods: {
showNotification () {
this.$q.notify('Some other message')
}
}
}
</script>

请注意,在模板区域中,我们使用$q.<plugin-name>,在脚本中我们使用this.$q.<plugin-name>

现在让我们看一个在Vue文件之外使用Notify的例子:

import { Notify } from 'quasar'

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

导入所有组件和指令以进行快速测试

当您只想进行快速测试时,导入所有Quasar组件,指令和插件可能会令人厌倦。 在这种情况下,你可以通过编辑/quasar.conf.js来告诉Quasar导入它们:

framework: 'all'

重要
不会对tree shaking带来好处,因为导入不必要/未使用的代码导致您的包变得臃肿。 不建议用于生产版本。 仅用于快速测试目的。

自闭合标签

一些Quasar组件不需要你在其中包含HTML内容。 在这种情况下,您可以将它们用作自闭合标签。 以下是QIcon的一个例子:

<q-icon name="cloud" />

自闭合意味着上述模板等同于:

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

这两种形式都是有效的,可以使用。 它与常规DOM元素一样工作:

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

一些eslint-plugin-vue校验规则实际上使用自闭合语法来强制执行。

处理Vue属性

您将在整个文档中注意到Quasar组件有一个名为“Vue属性”的部分。这些通常在Vue文档中被称为Props。例如:

Vue属性 类型 说明
infinite 布尔 无限幻灯片滚动
size 字符串 加载杆的厚度。
speed 数字 加载栏更新其值的速度有多快(以毫秒为单位)。
columns 对象 定义列的对象(请参阅下面的“列定义”)。
offset 数组 有两个数字的数组。水平和垂直偏移(以像素为单位)。

让我们来看一些支持上述属性的伪Quasar组件(我们将其称为QBogus)。我们将在下面的章节中讨论每种Vue属性。

布尔属性

布尔属性意味着它只接受一个严格的布尔值。赋给它的值不会转换为布尔值,所以您必须确保您使用的是真布尔值。

如果您试图控制该属性并在运行时动态更改它,请将其绑定到您范围内的变量:

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

<script>
export default {
data () {
return {
myInfiniteVariable: false
}
}
}
</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>
export default {
data () {
return {
// notice String as value
mySize: '16px'
}
}
}
</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>
export default {
data () {
return {
// notice Number as value
myNumber: 50
}
}
}
</script>

对象属性

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

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

<script>
export default {
data () {
return {
myColumns: {
key: 'value',
anotherKey: 'another value'
}
}
}
}
</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 {
data () {
return {
myOffset: [10, 20]
}
}
}
</script>

处理Vue方法

在整个文档中您会注意到一些Quasar组件有一个名为“Vue Methods”的部分。 例如:

Vue方法 说明
next() 转到下一张幻灯片。
previous(doneFn) 转到上一张幻灯片。
toggleFullscreen() 切换全屏模式。

为了让您访问这些方法,您需要首先在组件上设置Vue引用。 这是一个例子:

<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 references
}
</script>

处理Vue事件

在整个文档中您会注意到一些Quasar组件有一个名为“Vue事件”的部分。 请勿将这些Vue事件与全局事件总线混淆,因为这两者没有任何共同之处。

文档中“Vue事件”部分的示例:

事件名称 说明
@open 在Modal打开后立即触发。
@close 在Modal关闭后立即触发。

为了让您捕获这些事件,当它们被触发时,您需要在HTML模板中的组件本身上为它们添加侦听器。 这是一个例子:

<template>
<q-bogus @open="doSomething" @close="doSomethingElse" />
</template>

<script>
export default {
methods: {
doSomething () {
// this method has been called (in this case)
// because @open event was triggered by QBogus component
},
doSomethingElse () {
// this method has been called (in this case)
// because @close event was triggered by QBogus component
}
}
}
</script>

有时您还需要访问Quasar组件上的原生DOM事件,例如原生@click。 不要将原生事件与组件发出的Vue事件混淆。 他们是不同的东西。 我们举一个例子:假设我们有一个组件(QBogus),它发出@open@close,但不会发出@click事件。 @click是一个原生DOM事件,我们仍然可以用.native修饰符来捕获它:

<!-- Notice "@click.native" -->
<q-bogus @click.native="myMethod" />