如何使用Vue

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

TIP

如果您是Vue和反应式UI库的初学者,并且想要一个好的教程,我们建议您看看Vue和Quasar视频教程

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

Vue单个文件组件(SFC)

您将使用包含多个部分的*.vue文件构建您的Quasar应用程序:template (HTML)、 script (Javascript) and style (CSS/SASS/SCSS/Stylus/Less) 全部在同一个文件。

目前,建议使用<script setup>的Composition 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>

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预处理器

对于<style>标签,您可以使用您想要的任何CSS预处理器。 Sass/SCSS (推荐)和Stylus 开箱即用。 对于SCSS/SASS或LESS,您需要安装他们的Webpack加载器(例如:yarn add --dev less-loader)。

您可以指定你选择的预处理器来处理您正在编写的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>Click Me</div>

请注意如何在HTML模板中将Ripple用作v-ripple。 Vue指令以v-为前缀。

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

<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.js中添加对它们的引用。

让我们在以下示例中使用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等。

WARNING

在你的应用程序中使用它们之前,你需要在/quasar.config.js中添加对它们的引用(如下所示)。

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中的一个等效的脚本部分:

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

现在让我们看一个Vue文件:

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" />
<!-- equivalent to: -->
<div class="col"></div>

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

处理Vue属性

让我们举一些伪Quasar组件(我们将其称为QBogus)来支持下面的属性。 我们将在下面的部分中讨论每种类型的Vue属性。

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

布尔属性

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

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'}" />
  <!-- 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>
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引用。 这是一个例子:

<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>

And here is the same example, but with 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 references
}
</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>