Vue3 最常用的函数或指令-查询

介绍

Vue 是一套用于构建用户界面的渐进式框架

  • Vue 3.x 官方文档 (cn.vuejs.org)
  • Vue Router 4.x 官方文档 (router.vuejs.org)
  • Vue 2 备忘清单

注意:Vue 3.x 版本对应 Vue Router 4.x 路由版本

创建应用

已安装 16.0 或更高版本的 Node.js

$ npm init vue@latest

指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具

Project name: <your-project-name>

Add TypeScript? No/Yes

Add JSX Support? No/Yes

Add Vue Router for Single Page Application development? No/Yes

Add Pinia for state management? No/Yes

Add Vitest for Unit testing? No/Yes

Add Cypress for both Unit and End-to-End testing? No/Yes

Add ESLint for code quality? No/Yes

Add Prettier for code formatting? No/Yes

Scaffolding project in ./<your-project-name>...

Done.

安装依赖并启动开发服务器

$ cd <your-project-name>

$ npm install

$ npm run dev

当你准备将应用发布到生产环境时,请运行:

$ npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本

应用实例

import { createApp } from 'vue'

const app = createApp({

  data() {

    return { count: 0 }

  }

})

app.mount('#app')

挂载应用

<div id="app">

  <button @click="count++">

    {{ count }}

  </button>

</div>

通过 CDN 使用 Vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>

  const { createApp } = Vue

  createApp({

    data() {

      return {

        message: 'Hello Vue!'

      }

    }

  }).mount('#app')

</script>

使用 ES 模块构建版本

<div id="app">{{ message }}</div>

<script type="module">

  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({

    data() {

      return {

        message: 'Hello Vue!'

      }

    }

  }).mount('#app')

</script>

模板语法

文本插值

<span>Message: {{ msg }}</span>

使用的是 Mustache 语法 (即双大括号),每次 msg 属性更改时它也会同步更新

原始 HTML

<p>Using text interpolation: {{ rawHtml }}</p>

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

双大括号{{}}会将数据解释为纯文本,使用 v-html 指令,将插入 HTML

Attribute 绑定

<div v-bind:id="dynamicId"></div>

简写

<div :id="dynamicId"></div>

布尔型 Attribute

<button :disabled="isButtonDisabled">

  Button

</button>

动态绑定多个值

data() {

  return {

    objectOfAttrs: {

      id: 'container',

      class: 'wrapper'

    }

  }

}

通过不带参数的 v-bind,你可以将它们绑定到单个元素上

<div v-bind="objectOfAttrs"></div>

使用 JavaScript 表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

仅支持表达式(例子都是无效)

<!-- 这是一个语句,而非表达式 -->

{{ var a = 1 }}

<!-- 条件控制也不支持,请使用三元表达式 -->

{{ if (ok) { return message } }}

调用函数

<span :title="toTitleDate(date)">

  {{ formatDate(date) }}

</span>

指令 Directives

<p v-if="seen">Now you see me</p>

参数 Arguments

<a v-bind:href="url"> ... </a>

<!-- 简写 -->

<a :href="url"> ... </a>

绑定事件

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->

<a @click="doSomething"> ... </a>

动态参数

<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->

<a :[attributeName]="url"> ... </a>

这里的 attributeName 会作为一个 JS 表达式被动态执行

动态的事件名称

<a v-on:[eventName]="doSomething"> ... </a>

<!-- 简写 -->

<a @[eventName]="doSomething">

修饰符 Modifiers

<form @submit.prevent="onSubmit">

  ...

</form>

.prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()

指令语法

v-on:submit.prevent="onSubmit"

──┬─ ─┬──── ─┬─────  ─┬──────

                   Value 解释为JS表达式

           Modifiers 由前导点表示

     Argument 跟随冒号或速记符号

  Name v- 开头使用速记时可以省略

响应式基础

声明状态

<div>{{ count }}</div>


export default {

  data() {

    return {

      count: 0

    }

  },

}

声明方法

<button @click="increment">

  {{ count }}

</button>


export default {

  data() {

    return {

      count: 0

    }

  },

  methods: {

    increment() {

      this.count++

    }

  }

}

有状态方法

import { debounce } from 'lodash-es'

export default {

  created() {

    // 每个实例都有了自己的预置防抖的处理函数

    this.debouncedClick = debounce(this.click, 500)

  },

  unmounted() {

    // 最好是在组件卸载时

    // 清除掉防抖计时器

    this.debouncedClick.cancel()

  },

  methods: {

    click() {

      // ... 对点击的响应 ...

    }

  }

}

API 参考

全局 API - 应用实例

createApp()

#

createSSRApp()

#

app.mount()

#

app.unmount()

#

app.provide()

#

app.component()

#

app.directive()

#

app.use()

#

app.mixin()

#

app.version

#

app.config

#

app.config.errorHandler

#

app.config.warnHandler

#

app.config.performance

#

app.config.compilerOptions

#

app.config.globalProperties

#

app.config.optionMergeStrategies

#

全局 API - 通用

version

#

nextTick()

#

defineComponent()

#

defineAsyncComponent()

#

defineCustomElement()

#

组合式 API - setup()

基本使用

#

访问 Props

#

Setup 上下文

#

与渲染函数一起使用

#

组合式 API - 响应式: 工具

isRef()

#

unref()

#

toRef()

#

toRefs()

#

isProxy()

#

isReactive()

#

isReadonly()

#

组合式 API - 生命周期钩子

onMounted()

组件挂载完成后执行 #

onUpdated()

状态变更而更新其 DOM 树之后调用 #

onUnmounted()

组件实例被卸载之后调用 #

onBeforeMount()

组件被挂载之前被调用 #

onBeforeUpdate()

状态变更而更新其 DOM 树之前调用 #

onBeforeUnmount()

组件实例被卸载之前调用 #

onErrorCaptured()

捕获了后代组件传递的错误时调用 #

onRenderTracked()

组件渲染过程中追踪到响应式依赖时调用 #

onRenderTriggered()

响应式依赖的变更触发了组件渲染时调用 #

onActivated()

若组件实例是 <KeepAlive> 缓存树的一部分,当组件被插入到 DOM 中时调用 #

onDeactivated()

若组件实例是 <KeepAlive> 缓存树的一部分,当组件从 DOM 中被移除时调用 #

onServerPrefetch()

组件实例在服务器上被渲染之前调用 #

组合式 API - 依赖注入

provide()

#

inject()

#

组合式 API - 响应式: 核心

ref()

#

computed ()

#

reactive()

#

readonly()

#

watchEffect()

#

watchPostEffect()

#

watchSyncEffect()

#

watch()

#

选项式 API - 状态选项

data

#

props

#

computed

#

methods

#

watch

#

emits

#

expose

#

选项式 API - 生命周期选项

beforeCreate

#

created

#

beforeMount

#

mounted

#

beforeUpdate

#

updated

#

beforeUnmount

#

unmounted

#

errorCaptured

#

renderTracked

#

renderTriggered

#

activated

#

deactivated

#

serverPrefetch

#

选项式 API - 其他杂项

name

显式声明组件展示时的名称 #

inheritAttrs

默认的组件 attribute 透传行为 #

components

#

directives

#

选项式 API - 渲染选项

template

#

render

#

compilerOptions

#

选项式 API - 组件实例

$data

#

$props

#

$el

#

$options

#

$parent

#

$root

#

$slots

#

$refs

#

$attrs

#

$watch()

#

$emit()

#

$forceUpdate()

#

$nextTick()

#

选项式 API - 组合选项

provide

#

inject

#

mixins

#

extends

#

内置内容 - 指令

v-text

#

v-html

#

v-show

#

v-if

#

v-else

#

v-else-if

#

v-for

#

v-on

#

v-bind

#

v-model

#

v-slot

#

v-pre

#

v-once

#

v-memo

#

v-cloak

#

内置内容 - 组件

<Transition>

#

<TransitionGroup>

#

<KeepAlive>

#

<Teleport>

#

<Suspense>

#

内置内容 - 特殊 Attributes

key

#

ref

#

is

#

内置内容 - 特殊元素

<component>

#

<slot>

#

单文件组件 - 语法定义

总览

#

相应语言块

#

自动名称推导

#

预处理器

#

Src 导入

#

注释

#

单文件组件 - <script setup>

基本语法

#

响应式

#

使用组件

#

使用自定义指令

#

defineProps() 和 defineEmits()

#

defineExpose

#

useSlots() 和 useAttrs()

#

与普通的 <script> 一起使用

#

顶层 await

#

针对 TypeScript 的功能

#

限制

#

单文件组件 - CSS 功能

组件作用域 CSS

#

CSS Modules

#

CSS 中的 v-bind()

#

进阶 API - 渲染函数

h()

#

mergeProps()

#

cloneVNode()

#

isVNode()

#

resolveComponent()

#

resolveDirective()

#

withDirectives()

#

withModifiers()

#

进阶 API - 服务端渲染

renderToString()

#

renderToNodeStream()

#

pipeToNodeWritable()

#

renderToWebStream()

#

pipeToWebWritable()

#

renderToSimpleStream()

#

useSSRContext()

#

进阶 API - TypeScript 工具类型

PropType<T>

#

ComponentCustomProperties

#

ComponentCustomOptions

#

ComponentCustomProps

#

CSSProperties

#

进阶 API - 自定义渲染

createRenderer()

#

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值