前言 petite-vue 是為漸進增強而優化的另一種 Vue 發行版。它提供與標準 Vue 相同的模板語法和反應性心智模型。 不過，它專門針對在由伺服器框架呈現的現有 HTML 頁面上“散佈”少量交互進行了優化。 petite-vue，它在提供 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({
// 暴露出的數據 直接寫在 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>
參考鏈接
https://github.com/vuejs/petite-vue
