網站開發(fā)開票內容寫什么產品關鍵詞大全
vue3前端開發(fā),感受一下組合式api和VUE2選項式的差異!今天開始,正式開始,進入學習Vue3的內容。以后代碼,案例分享,都會采用組合式api的模式為大家做展示。
今天是第一節(jié),帶大家感受一下,Vue3的組合式api和之前傳統(tǒng)的vue2版本選項式api的差別。
首先,大家需要提前使用npm,腳手架,在本地搭建好一個基礎的Vue3項目。然后看下面的代碼分享。
<template><h3>入口文件</h3><Base /></template><script setup>
import Base from './components/Base.vue'</script>
以上代碼是入口文件app.VUE的內容。里面很簡單,調用了一個自定義組件,Base.vue??吹贸鰜?#xff0c;不需要再使用components對象包裹了。直接import就可以拿去使用了。
<template><h3>初步了解vue3組合式api</h3><p>{{ count }}</p><button @click="addHandle">加法運算</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
const addHandle = () => count.value++
//this.$refs.username
</script>
這個代碼是Base.vue的內容,里面很簡單。定義了一個變量。count。一個按鈕,點擊事件。讓變量count的值自增1.
如圖,是可以正常執(zhí)行如果,大家要是使用之前Vue2版本的代碼,需要寫很長。
<template><h3>初步了解vue3組合式api</h3><p>{{ count }}</p><button @click="addHandle">加法運算</button>
</template>
<script>
//vue3組合式api樣式如下
// import { ref } from 'vue'
// const count = ref(0)
// const addHandle = () => count.value++
//vue2選項式如下所示:
export default{data(){return {count:0}},methods:{addHandle(){this.count++}}
}
</script>
這段代碼是使用了vue2版本選項式api風格編輯的??梢悦黠@看到,內容較多。
vue3 的是script標簽里,寫一個setup.是新語法糖效果,可以省去一些麻煩。它會知道默認導入哪些你需要的文件。