欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?使用?setup?語法糖的示例詳解

 更新時間：2023年10月11日 09:55:31   作者：小吳吳吳呀  
在 setup 語法糖中通過 import 引入的內容，也可以直接在 template 標簽中使用，這篇文章主要介紹了Vue?使用?setup?語法糖,需要的朋友可以參考下

setup 語法糖在書寫上更加方便簡潔，可以直接在 script 標簽中書寫 setup 的內容，并且無需使用 return 返回。

 基礎使用：

<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 引入的內容，也可以直接在 template 標簽中使用。

到此這篇關于Vue 使用 setup 語法糖的文章就介紹到這了,更多相關Vue  setup 語法糖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論