Vue 3.x Composition API All In One
Vue 3.x Composition API All In One
SFC
Single-File Components / 单文件组件
- Vue 3 Composition API 使用
<script setup>
自动 expose 🚀
<script setup 🚀>
// import {createApp, ref, reactive} from "vue"
import { ref } from 'vue'
// data
const count = ref(0)
// methods
function increment() {
// .value is needed in JavaScript
count.value++
}
</script>
<template>
<button @click="increment">
{{ count }}
</button>
</template>
<!--
Vue 3 Composition API 使用 <script setup> 自动 expose 🚀
https://vuejs.org/guide/essentials/reactivity-fundamentals.html#script-setup
https://vuejs.org/guide/scaling-up/sfc.html
-->
- Vue 3 Composition API 使用 `setup()`` 需要手动 expose 💩
<script>
// import {createApp, ref, reactive} from "vue"
import { ref } from 'vue'
export default {
// `setup` is a special hook dedicated for the Composition API.
setup() {
const count = ref(0)
function increment() {
// .value is needed in JavaScript
count.value++
}
// expose the ref to the template
// don't forget to expose the function as well.
// 手动 expose 💩
return {
count,
increment
}
}
}
</script>
<template>
<button @click="increment">
{{ count }}
</button>
</template>
<!--
Vue 3 Composition API 使用 setup() 需要手动 expose 💩
https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref
https://codepen.io/xgqfrms/pen/KKbzLGM?editors=1111
-->
https://vuejs.org/guide/scaling-up/sfc.html
https://vuejs.org/api/sfc-spec.html
Vue
SFC
Playground
demos
cdn
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!
Composition API
official en-US docs ✅
https://vuejs.org/api/composition-api-setup.html
https://vuejs.org/guide/extras/composition-api-faq.html
official zh-Hans docs ✅
https://staging-cn.vuejs.org/api/composition-api-setup.html
https://staging-cn.vuejs.org/guide/extras/composition-api-faq.html
shit unofficial zh-Hans docs 💩
https://v3.cn.vuejs.org/api/composition-api.html#setup
https://v3.cn.vuejs.org/guide/composition-api-introduction.html#什么是组合式-api
refs
https://v3.vuejs.org/guide/composition-api-introduction.html
https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/
https://github.com/xgqfrms/Vue-3.x/issues/6#issuecomment-1700355372
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/14427549.html
未经授权禁止转载,违者必究!