유 대 신 활 petite-vue 의 실현
특히 큰 GitHub 를 열 어 보 니 petite-vue 라 는 것 이 더 많아 졌 습 니 다.좋 은 녀석,Vue 3 와 Vite 는 아직 배우 지 못 했 습 니 다.또 새로운 것 을 만 들 기 시 작 했 습 니까?죽지 않 으 면 죽 을 때 까지 배 우 는 태도 에 따라 이것 이 도대체 무엇 인지 보 자.누가 그 를 우리 의 조상 이 라 고 했 는 지!
간단 한 소개
이름 으로 볼 때 petite-vue 는 미니 버 전의 vue 이 고 크기 는 5.8kb 에 불과 하 며 매우 작다 고 할 수 있다.특히 petite-vue 는 Vue 의 대체 발행 판 으로 점진 적 인 강화 에 최적화 되 었 다.표준 Vue 와 같은 템 플 릿 문법 과 응답 모델 을 제공 합 니 다.
크기 는 5.8kb 에 불과 하 다.
Vue 호 환 모드 문법
DOM 기반,현지 전환응답 식 구동
일 을 시작 하 다
다음은 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>
Alpine.js 라 는 프레임 워 크 를 알 아 본 학생 들 은 이곳 을 보고 낯 이 익 었 을 것 이다.이들 의 문법 은 매우 비슷 하 다.
<!-- 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>
<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>
<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 함 수 는 대상 을 받 아들 일 수 있 습 니 다.평소 data 와 methods 를 사용 하 는 것 과 같 습 니 다.이 때 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>
모든 원소 의 생명주기 사건 을 감청 할 수 있다.
<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 에서 구성 요 소 는 함수 로 만 들 수 있 고 template 를 통 해 재 활용 할 수 있 습 니 다.
<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 를 통 해 전역 상태 관 리 를 쉽게 만 들 수 있 습 니 다.
<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>
입력 상자 가 자동 으로 초점 을 맞 추 는 명령 을 간단하게 실현 합 니 다.
<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>
<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 에 대한 간단 한 소개 와 사용 입 니 다.벽돌 을 던 져 옥 을 끌 어 올 리 고 더 많은 새로운 탐색 은 여러분 이 발견 하 실 수 있 습 니 다.
전체적으로 보면 prtite-vue 는 Vue 의 기본 적 인 특성 을 유지 하기 때문에 Vue 개발 자 들 이 원가 없 이 사용 할 수 있 습 니 다.예전 에 우리 가 작고 간단 한 페이지 를 개발 할 때 Vue 를 인용 하려 고 했 지만 가방 의 부피 에 대한 고려 로 포기 하 곤 했 습 니 다.지금 은 petite-vue 의 등장 으로 인해 이런 상황 을 구 할 수 있 을 것 입 니 다.왜냐하면 이것 은 정말 작고 크기 는 5.8kb 밖 에 안 되 기 때 문 입 니 다.대략 Alpine.js 의 절반 에 불과 합 니 다.
여기 서 유 대 롭 고 새로운 살 아 있 는 petite-vue 의 실현 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue petite 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
