0
轻量级MVVM的JS库Strve.js
黄粱一梦2024-03-067
引用官网介绍
Strve 是一个可以将字符串转换为视图（用户界面）的 JavaScript 库。Strve 不仅易于使用，而且可以灵活地拆解不同的代码块。使用模板字符串开发用户界面，主要是利用 JavaScript 的能力，只关注 JavaScript 文件。
::: tip
Strve.js 是一款轻量级的MVVM框架
:::
-
官方文档：
NPM：
Github：
Strve.js
一个可以将字符串转换为视图的JS库。
- 快速地
超快的虚拟 DOM。
- 空间小
源代码文件大小仅仅4kb。
- 灵活地
易于灵活地拆装不同的代码块。
介绍
Strve.js是一个可以将字符串转换为视图的JS库。这里的字符串指的是模板字符串，所以你仅需要在JavaScript中开发视图。Strve.js不仅易于上手，还便于灵活拆装不同的代码块。如果您想上手项目，那么请看下面怎么安装它吧！
安装
CDN
如果你使用原生 ES Modules。
<script type="module">
import { Strve, render, updateView } from 'https://cdn.jsdelivr.net/npm/strvejs/dist/strve.esm.min.js';
</script>
npm i strvejs
命令行工具安装
create-strve-app
一套快速搭建Strve.js项目的命令行工具。与早期的脚手架 Create Strve 相比，Create Strve App 更胜一筹，可直接输入命令快速创建Strve项目。Create Strve App是用Vite来构建的，它是一种新型前端构建工具，能够显著提升前端开发体验。
npm
npm init strve-app@latest
yarn
yarn create strve-app
pnpm
pnpm create strve-app
Create Strve 是基于Strve.js的项目构建工具，您可以使用它更方便灵活地搭建页面。
全局安装
npm install create-strve -g
查看版本
create-strve -v
初始化项目
create-strve init <projectName>
快速上手
尝试 Strve.js 最简单的方法是使用直接引入CDN链接。你可以在浏览器打开它，跟着例子学习一些基础用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Strve.js</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import { Strve, updateView, render } from 'https://cdn.jsdelivr.net/npm/strvejs/dist/strve.esm.js';
const state = {
arr: ['1', '2'],
msg: 'hello',
a: 1
};
function App() {
return render`
<div class='inner'>
<p>{state.msg}</p>
<p>${state.a + state.a}</p>
<button id='btn2' οnclick=${usePush}>push</button>
<ul>
${state.arr.map((todo) => render`<li key=${todo}>${todo}</li>`)}
</ul>
</div>
`;
}
function usePush() {
updateView(() => {
state.arr.push('3');
});
}
Strve('#app', {
data: { state },
template: App
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Strve.js</title>
</head>
<body>
<script type="module">
import {
html,
setData,
createApp,
} from "https://fastly.jsdelivr.net/npm/strve-js@6.0.2/dist/strve.full-esm.js";
const state = {
count: 0,
};
let module = {
type: 'custrom'
}
function add() {
setData(() => {
state.count++;
});
}
let moduleClick = () => {
setData(() => {
module.type += '!'
})
}
function App() {
return html`
<div>
<h1 onClick=${add}>${state.count}</h1>
<button class="cas" onClick=${moduleClick}>${module.type}</button>
</div>
`;
}
const app = createApp(App);
app.mount("#app");
</script>
</body>
</html>
更多用法api文档
版权声明
本文系作者 @黄粱一梦 转载请注明出处,文中若有转载的以及参考文章地址也需注明。\(^o^)/~
Preview