petite-vue 基本使用指南
前言
petite-vue 是为渐进增强而优化的另一种 Vue 发行版。它提供与标准 Vue 相同的模板语法和反应性心智模型。
不过，它专门针对在由服务器框架呈现的现有 HTML 页面上“散布”少量交互进行了优化。
petite-vue，它在提供 vue 基本功能的同时，还能一个轻量级，简单应用的微框架，这样也能保证开发者有一个不错的使用体验。
- 只有 ~6kb
- 兼容 Vue 的模板语法
- 基于 DOM，就地变化
- 由 @vue/reactivity 驱动
- 无需构建
引入项目
CDN 引入
<div v-scope="{ count: 0 }">
{{ count }}
<button @click="count++">inc</button>
</div>
<script
src="https://unpkg.com/[email protected]/dist/petite-vue.iife.js"
defer
init
></script>
当然也可以把该地址内部代码全部赋值到本地 js 文件中使用
-
defer属性可使脚本在文档被解析后执行如不使用 defer 则需手动初始化
PetiteVue.createApp().mount() -
init属性会告诉 petite-vue 自动查询和初始化页面上所有具有 v-scope 的元素 -
v-scope标记页面上需要使用 petite-vue 渲染的地方
根作用域
使用 createApp 在页面上注册一个根作用域, 内容在 html 代码中可用. 可以理解为在 Vue 中的暴露至 template
<script type="module">
import { createApp } from "../lib/petite-vue.js";
createApp({
// 暴露出的数据
count: 0,
// getter
get plusOne() {
return this.count + 1;
},
// methods
increment() {
this.count++;
},
}).mount();
</script>
<div v-scope>
<!-- 经典的插值表达式 -->
<p>{{ count }}</p>
<p>{{ plusOne }}</p>
<!-- v-on也是可用的 -->
<button @click="increment">increment</button>
</div>
全局状态管理
<script type="module">
import { createApp, reactive } from "../lib/petite-vue.js";
const store = reactive({
count: 1,
});
function inc() {
store.count++;
}
// 执行一次
inc();
createApp({
store,
inc,
}).mount();
</script>
<div v-scope="{ localCount: 0 }">
<p>Global {{ store.count }}</p>
<button @click="inc">增加全局数据</button>
<p>Local {{ localCount }}</p>
<button @click="localCount++">增加局部变量</button>
</div>
生命周期
可以监听挂载与卸载事件
<div
v-if="show"
@vue:mounted="console.log('mounted on: ', $el)"
@vue:unmounted="console.log('unmounted: ', $el)"
></div>
示例
<!-- 在页面载入时执行函数 -->
<body v-scope @vue:mounted="loadArticle()">
<!-- v-show 显示控制 -->
<ul v-show="!store.currentHash.includes('#4')">
<li v-show="store.currentHash.includes('#1-')">
<a href="javascript:;" class="nav-header">导航栏</a>
<dl>
<!-- v-on 与 class 的绑定 -->
<dd :class="{'layui-this':store.currentHash === '#1-1'}">
<a href="#1-1">1-1</a>
</dd>
</dl>
</li>
</ul>
<script type="module" src="src/lib/petite-vue.js" defer int></script>
<script type="module">
import "../lib/layui/layui.js";
import { createApp, reactive } from "../lib/petite-vue.js";
// 全局响应式数据
const store = reactive({
currentHash: "",
});
function loadArticle() {
// do ...
}
// 当页面哈希改变时执行操作
window.onhashchange = () => loadArticle();
// 创建根作用域
createApp({
store,
loadArticle,
}).mount();
</script>
</body>