- A+
所属分类：Web前端
前言
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/petite-vue@0.4.1/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({ // 暴露出的数据 直接写在 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"; // 定义单独一个对象存放数据 需要 reactive 来转为响应式数据 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> 组件
使用组件可以复用逻辑 但 petite-vue 的组件并不那么好用
按照 Vue 的习惯, 也可以使用一个 js 文件作为一个组件
// footer.js // 可以传递 props export default function (props) { return { // 组件模板 $template: `<footer>页脚组件</footer>`, msg: "A message", print() { console.log(props); }, }; } 如果创建了一个独立的 js 文件作为组件, 则模板只能为字符串形式
在官方的 README 中模板有template元素的用法. 但那种只能写在 html 文件中, 而写在 html 文件内的组件无法复用. 故在此不作展示
<!-- index.html --> <!-- 使用组件 传递参数200 且在挂载时触发方法 --> <div v-scope="footer(200)" @vue:mounted="print"></div> <script type="module" src="src/lib/petite-vue.js" defer int></script> <script type="module"> import { createApp } from "../lib/petite-vue.js"; // 引入组件 import footer from "../components/footer.js"; createApp({ footer, // 注入组件 }).mount(); </script> 需要注意的是 @vue:mounted="print" 这个print方法的作用域是组件内的print
基本示例
<!-- 在页面载入时执行函数 --> <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> 
