Vue?使用?setup?語法糖的示例詳解
更新時間：2023年10月11日 09:55:31 作者：小吳吳吳呀
在 setup 語法糖中通過 import 引入的內(nèi)容，也可以直接在 template 標簽中使用，這篇文章主要介紹了Vue?使用?setup?語法糖,需要的朋友可以參考下
setup 語法糖在書寫上更加方便簡潔，可以直接在 script 標簽中書寫 setup 的內(nèi)容，并且無需使用 return 返回。
基礎(chǔ)使用：
<script setup> </script>
注：setup 語法糖中不能存在 `export default {}` ，否則會報錯的。
特性一：定義響應式數(shù)據(jù)：
<template>
<h3>{{ sum }}</h3>
<h3>{{ info.name }} : {{ info.age }}</h3>
</template>
<script setup>
// 引入 reactive 和 ref 函數(shù)
import { reactive, ref } from "vue";
// 創(chuàng)建 ref 數(shù)據(jù)
let sum = ref(0);
// 創(chuàng)建 reactive 數(shù)據(jù)
let info = reactive({ name: "張三", age: 18 });
</script>注：在 setup 語法糖中定義的數(shù)據(jù)，可以直接在 template 標簽中使用。
特性二：定義方法與計算屬性：
<template>
<h3>{{ sum }}</h3>
<p>價格：￥{{ price }}</p>
<button @click="add()">點擊+1</button>
</template>
<script setup>
// 引入 computed 和 ref 函數(shù)
import { computed, ref } from "vue";
// 創(chuàng)建 ref 數(shù)據(jù)
let sum = ref(0);
// 創(chuàng)建方法
let add = () => {
sum.value++;
}
// 創(chuàng)建計算屬性
let price = computed(() => {
return sum.value.toFixed(2);
})
</script>注：在 setup 語法糖中定義的方法、計算屬性等，都可以直接在 template 標簽中使用。
特性三：引入組件：
<template> <h3>我是父組件</h3> <hr /> <Child></Child> </template> <script setup> // 引入組件 import Child from '../components/Child'; </script>
注：在 setup 語法糖中通過 import 引入的內(nèi)容，也可以直接在 template 標簽中使用。
到此這篇關(guān)于Vue 使用 setup 語法糖的文章就介紹到這了,更多相關(guān)Vue setup 語法糖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了淺談vue.watch的觸發(fā)條件是什么？具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
如何使用el-table實現(xiàn)純前端導出(適用于el-table任意表格)
我們?nèi)粘Ｗ鲰椖?特別是后臺管理系統(tǒng),常常需要導出excel文件,這篇文章主要給大家介紹了關(guān)于如何使用el-table實現(xiàn)純前端導出的相關(guān)資料,本文適用于el-table任意表格,需要的朋友可以參考下2024-03-03
解決vite+vue3項目打包后圖片不顯示或者請求路徑多了一個undefined問題
這篇文章主要介紹了解決vite+vue3項目打包后圖片不顯示或者請求路徑多了一個undefined問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-05-05
vue使用require.context實現(xiàn)動態(tài)注冊路由
這篇文章主要介紹了vue使用require.context實現(xiàn)動態(tài)注冊路由的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
基于cropper.js封裝vue實現(xiàn)在線圖片裁剪組件功能
這篇文章主要介紹了基于cropper.js封裝vue實現(xiàn)在線圖片裁剪組件功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue-cli工程webpack的基本用法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
下面小編就為大家整理了一篇解決vue打包項目后刷新404的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue3在setup組合式API中使用全局掛載的屬性,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06
這篇文章主要介紹了vue+vant實現(xiàn)商品列表批量倒計時功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
使用Vue-scroller頁面input框不能觸發(fā)滑動的問題及解決方法
這篇文章主要介紹了使用Vue-scroller頁面input框不能觸發(fā)滑動的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08