petite-vue怎么使用
这篇文章主要介绍“petite-vue怎么使用”,在日常操作中,相信很多人在petite-vue怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”petite-vue怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联主要从事网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务师宗,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
前言
打开尤大大的GitHub,发现多了个叫 petite-vue 的东西,好家伙,Vue3 和 Vite 还没学完呢,又开始整新东西了?本着学不死就往死里学的态度,咱还是来瞅瞅这到底是个啥东西吧,谁让他是咱的祖师爷呢!
简介
从名字来看可以知道 petite-vue 是一个 mini 版的vue,大小只有5.8kb,可以说是非常小了。据尤大大介绍,petite-vue 是 Vue 的可替代发行版,针对渐进式增强进行了优化。它提供了与标准 Vue 相同的模板语法和响应式模型:
大小只有5.8kb
Vue 兼容模版语法
基于DOM,就地转换
响应式驱动
上活
下面对 petite-vue 的使用做一些介绍。
简单使用
{{ count }}
通过 script 标签引入同时添加 init ,接着就可以使用 v-scope 绑定数据,这样一个简单的计数器就实现了。
了解过 Alpine.js 这个框架的同学看到这里可能有点眼熟了,两者语法之间是很像的。
Dropdown Body
除了用 init 的方式之外,也可以用下面的方式:
{{ count }}
或使用 ES module 的方式:
{{ count }}
根作用域
createApp 函数可以接受一个对象,类似于我们平时使用 data 和 methods 一样,这时 v-scope 不需要绑定值。
{{ count }}
指定挂载元素
{{ count }}
生命周期
可以监听每个元素的生命周期事件。
1 2
组件
在 petite-vue 里,组件可以使用函数的方式创建,通过template可以实现复用。
{{ count }}
全局状态管理
借助 reactive 响应式 API 可以很轻松的创建全局状态管理
{{ store.count }}
自定义指令
这里来简单实现一个输入框自动聚焦的指令。
内置指令
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 不需要key,另外 v-for 不支持 深度解构
{{ age.a }} {{ a }}
不支持
为了更轻量小巧,petite-vue 不支持以下特性:
ref()、computed
render函数,因为petite-vue 没有虚拟DOM
不支持Map、Set等响应类型
Transition, KeepAlive, Teleport, Suspense
v-on="object"
v-is &
v-bind:style auto-prefixing
到此,关于“petite-vue怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
文章名称:petite-vue怎么使用
当前网址:http://ybzwz.com/article/jgoihe.html