petite-vue 基本使用指南

cnblogs 2024-06-28 16:11:00 阅读 82

前言

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({

// 暴露出的数据

count: 0,

// getter

get plusOne() {

return this.count + 1;

},

// methods

increment() {

this.count++;

},

}).mount();

</script>

<div v-scope>

<p>{{ count }}</p>

<p>{{ plusOne }}</p>

<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>

组件

使用组件可以复用逻辑但 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 文件内的组件无法复用. 故在此不作展示

<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()">

<ul v-show="!store.currentHash.includes('#4')">

<li v-show="store.currentHash.includes('#1-')">

<a href="javascript:;" >导航栏</a>

<dl>

<dd :>

<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>

参考链接

https://github.com/vuejs/petite-vue

上一篇： vue2 前端生成自定义二维码

下一篇： FreeRADIUS 和 Daloradius搭建radius认证服务器并实现Web管理

本文标签

Vue

声明

本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。