小型php框架_强大的小型Web组件框架/库

最新推荐文章于 2021-03-22 07:18:22 发布

cuk5239

最新推荐文章于 2021-03-22 07:18:22 发布

阅读量196

点赞数

文章标签： python js vue java php ViewUI

原文链接：https://vuejsexamples.com/a-mighty-tinny-web-components-framework-library/

版权

小型php框架

奥克斯 (Oxe)

A mighty tiny web components framework/library.

一个强大的小型Web组件框架/库。

API (API)

Api documentation can be found at API.md.

可以在API.md中找到Api文档。

版 (VERSION)

Breaking version changes can be found at VERSION.md.

可以在VERSION.md中找到重要的版本更改。

特征 (Features)

Small size
小尺寸
Front end routing
前端路由
Configuration based
基于配置
Dynamic import polyfill
动态导入polyfill
Template string polyfill
模板字符串polyfill
In browser Template and Import/Export rewrites
在浏览器中的模板和导入/导出重写

Polyfill (Polyfill)

poly.min.js includes everything need except shadow poly code.
poly.min.js包括除影子多边形代码之外的所有内容。
- customElements
  customElements
- DocumentFragment
  文档片段
- URL, Promise, fetch
  URL，承诺，获取
- HTMLTemplateElement
  HTMLTemplateElement
- Event, CustomEvent, MouseEvent constructors and Object.assign, Array.from
  Event，CustomEvent，MouseEvent构造函数以及Object.assign，Array.from
poly.shadow.min.js includes everything.
poly.shadow.min.js包含所有内容。
- Webcomponentsjs
  Webcomponents.js
- DocumentFragment
  文档片段
- URL, Promise, fetch
  URL，承诺，获取

支持 (Support)

IE10~
IE10〜
IE11
IE11
Chrome
Chrome
Firefox
火狐浏览器
Safari 7
Safari 7
Mobile Safari
移动版Safari
Chrome Android
Chrome Android

总览 (Overview)

Live examples vokeio.github.io/oxe/.

实时示例vokeio.github.io/oxe/ 。

安装 (Install)

npm i oxe --save
npm i oxe --save
Script dst/poly.min.js
脚本dst/poly.min.js
UMD dst/oxe.min.js
UMD dst/oxe.min.js

例 (Example)

// home.js

export default {
	path: '/',
	title: 'Home',
	component: {
		name: 'r-home',
		template: `
			<h1 o-text="title"></h1>
			<button o-on-click="greet">Greet</button>
		`,
		model: {
			greeting: 'Old Hello World'
		},
		methods: {
			greet: function () {
				console.log(this.model.greeting);
			}
		},
		created: function () {
			console.log(this.model.greeting);
			this.model.greeting = 'New Hello World';
		}
	}
};

// index.js

import './elements/e-menu.js';
import Home from './home.js';

Oxe.setup({
	loader: {
		type: 'es' // required to rewrite import exports
	},
	router: {
		routes: [
			Home,
			'error' // dynamically loads and resolves to /routes/error.js
		]
	}
}).catch(console.error);

<!-- index.html -->

<html>
<head>

	<base href="/">
	<script src="./poly.min.js" defer></script>
	<script src="./oxe.min.js" o-setup="./index.js, es" defer></script>

</head>
<body>

	<e-menu>
		<ul>
			<li><a href="/home">Home</a></li>
		</ul>
	</e-menu>

	<o-router></o-router>

</body>
</html>