- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) > JavaScript >
- 尤大大新活petite-vue的實(shí)現
打開(kāi)尤大大的GitHub，發(fā)現多了個(gè)叫 petite-vue 的東西，好家伙，Vue3 和 Vite 還沒(méi)學(xué)完呢，又開(kāi)始整新東西了？本著(zhù)學(xué)不死就往死里學(xué)的態(tài)度，咱還是來(lái)瞅瞅這到底是個(gè)啥東西吧，誰(shuí)讓他是咱的祖師爺呢！
從名字來(lái)看可以知道 petite-vue 是一個(gè) mini 版的vue，大小只有5.8kb，可以說(shuō)是非常小了。據尤大大介紹，petite-vue 是 Vue 的可替代發(fā)行版，針對漸進(jìn)式增強進(jìn)行了優(yōu)化。它提供了與標準 Vue 相同的模板語(yǔ)法和響應式模型：
下面對 petite-vue 的使用做一些介紹。
<body>
<script src="https://unpkg.com/petite-vue" defer init></script>
<div v-scope="{ count: 0 }">
<button @click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
</div>
</body>
通過(guò) script 標簽引入同時(shí)添加 init ，接著(zhù)就可以使用 v-scope 綁定數據，這樣一個(gè)簡(jiǎn)單的計數器就實(shí)現了。
了解過(guò) Alpine.js 這個(gè)框架的同學(xué)看到這里可能有點(diǎn)眼熟了，兩者語(yǔ)法之間是很像的。
<!-- Alpine.js -->
<div x-data="{ open: false }">
<button @click="open = true">Open Dropdown</button>
<ul x-show="open" @click.away="open = false">
Dropdown Body
</ul>
</div>
除了用 init 的方式之外，也可以用下面的方式：
<body>
<div v-scope="{ count: 0 }">
<button @click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
</div>
<!-- 放在body底部 -->
<script src="https://unpkg.com/petite-vue"></script>
<script>
PetiteVue.createApp().mount()
</script>
</body>
或使用 ES module 的方式：
<body>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp().mount()
</script>
<div v-scope="{ count: 0 }">
<button @click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
</div>
</body>
createApp 函數可以接受一個(gè)對象，類(lèi)似于我們平時(shí)使用 data 和 methods 一樣，這時(shí) v-scope 不需要綁定值。
<body>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
count: 0,
increment() {
this.count++
},
decrement() {
this.count--
}
}).mount()
</script>
<div v-scope>
<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>
</div>
</body>
<body>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
count: 0
}).mount('#app')
</script>
<div id="app">
{{ count }}
</div>
</body>
可以監聽(tīng)每個(gè)元素的生命周期事件。
<body>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
onMounted1(el) {
console.log(el) // <span>1</span>
},
onMounted2(el) {
console.log(el) // <span>2</span>
}
}).mount('#app')
</script>
<div id="app">
<span @mounted="onMounted1($el)">1</span>
<span @mounted="onMounted2($el)">2</span>
</div>
</body>
在 petite-vue 里，組件可以使用函數的方式創(chuàng )建，通過(guò)template可以實(shí)現復用。
<body>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
function Counter(props) {
return {
$template: '#counter-template',
count: props.initialCount,
increment() {
this.count++
},
decrement() {
this.count++
}
}
}
createApp({
Counter
}).mount()
</script>
<template id="counter-template">
<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>
</template>
<!-- 復用 -->
<div v-scope="Counter({ initialCount: 1 })"></div>
<div v-scope="Counter({ initialCount: 2 })"></div>
</body>
借助 reactive 響應式 API 可以很輕松的創(chuàng )建全局狀態(tài)管理
<body>
<script type="module">
import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
const store = reactive({
count: 0,
increment() {
this.count++
}
})
// 將count加1
store.increment()
createApp({
store
}).mount()
</script>
<div v-scope>
<!-- 輸出1 -->
<span>{{ store.count }}</span>
</div>
<div v-scope>
<button @click="store.increment">+</button>
</div>
</body>
這里來(lái)簡(jiǎn)單實(shí)現一個(gè)輸入框自動(dòng)聚焦的指令。
<body>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
const autoFocus = (ctx) => {
ctx.el.focus()
}
createApp().directive('auto-focus', autoFocus).mount()
</script>
<div v-scope>
<input v-auto-focus />
</div>
</body>
注意：v-for 不需要key，另外 v-for 不支持 深度解構
<body>
<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({
userList: [
{ name: '張三', age: { a: 23, b: 24 } },
{ name: '李四', age: { a: 23, b: 24 } },
{ name: '王五', age: { a: 23, b: 24 } }
]
}).mount()
</script>
<div v-scope>
<!-- 支持 -->
<li v-for="{ age } in userList">
{{ age.a }}
</li>
<!-- 不支持 -->
<li v-for="{ age: { a } } in userList">
{{ a }}
</li>
</div>
</body>
為了更輕量小巧，petite-vue 不支持以下特性：
以上就是對 petite-vue 的一些簡(jiǎn)單介紹和使用，拋磚引玉，更多新的探索就由你們去發(fā)現了。
總的來(lái)說(shuō)，prtite-vue 保留了 Vue 的一些基礎特性，這使得 Vue 開(kāi)發(fā)者可以無(wú)成本使用，在以往，當我們在開(kāi)發(fā)一些小而簡(jiǎn)單的頁(yè)面想要引用 Vue 但又常常因為包體積帶來(lái)的考慮而放棄，現在，petite-vue 的出現或許可以拯救這種情況了，畢竟它真的很小，大小只有 5.8kb，大約只是 Alpine.js 的一半。
到此這篇關(guān)于尤大大新活petite-vue的實(shí)現的文章就介紹到這了,更多相關(guān)vue petite內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
