«Эта статья участвовала в приказе о созыве Haowen, нажмите, чтобы просмотретьДвойные заявки на внутреннюю и внешнюю стороны, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!"
предисловие
Откройте Youda's GitHub и убедитесь, что есть ещеpetite-vueВещи, приятель, еще не изучил Vue3 и Vite и снова начал что-то новое? В соответствии с отношением к обучению умереть, если вы не учитесь, давайте посмотрим, что это за штука, которая сделала его нашим дедушкой!
Введение
Из названия вы можете понять, что petite-vue — это мини-версия vue размером всего 5,8 КБ, что можно назвать очень маленьким. По словам Юды, petite-vue — это альтернативный дистрибутив Vue, оптимизированный для прогрессивного улучшения. Он предоставляет тот же синтаксис шаблона и реактивную модель, что и стандартный Vue:
- Размер всего 5,8 КБ
- Синтаксис модели, совместимый с 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>
Инициируйте через тег script и добавьте init, а затем вы можете использовать v-scope для привязки данных, поэтому реализован простой счетчик.
Студенты, изучившие фреймворк 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>
В дополнение к использованию метода 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:
<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 может принимать объект аналогично тому, как мы обычно используем данные и методы.В настоящее время 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 компоненты можно создавать с помощью функций и повторно использовать с помощью шаблонов.
<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>
глобальное управление состоянием
Легко создавайте глобальное управление состоянием с помощью реактивного 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>
встроенные директивы
- v-model
- v-if / v-else / v-else-if
- v-for
- v-show
- v-html
- v-text
- v-pre
- v-once
- v-cloak
Примечание: v-for не требует ключа, а 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 не поддерживает следующие функции:
- ref(), вычислено
- функция рендеринга, потому что у petite-vue нет виртуального DOM
- Он не поддерживает Map, Set и другие типы ответов.
- Transition, KeepAlive, Teleport, Suspense
- v-on="object"
- v-is &
- v-bind:style auto-prefixing
Суммировать
Вышеизложенное является кратким введением и использованием petite-vue, и вы откроете для себя больше новых исследований.
В целом, prtite-vue сохраняет некоторые базовые функции Vue, что позволяет разработчикам Vue использовать его бесплатно.В прошлом, когда мы разрабатывали небольшие и простые страницы и хотели ссылаться на Vue, но часто из-за объема пакета Теперь petite-vue может спасти эту ситуацию, в конце концов, он действительно маленький, всего 5,8 КБ, примерно вдвое меньше, чем Alpine.js.
напиши в конце
Кодировать слова непросто. Если эта статья вам чем-то поможет, добро пожаловать.подобно, ваши лайки - движущая сила моего творчества!