新框架又出来了，你还卷的动吗？

前端已经有许多框架了，比如Ract、Vue、Angular、Svelte等等。

但是最近又出来一个新框架,一个号称可能会改变您的网络开发方式的新东西——Nue.JS

Nue.JS

Nue是一个让前端开发变得更加愉快的工具集。官方宣称这是对Vue、React和Svelte等生态系统以及Vite、Next.js和Astro等 Web 开发框架的彻底改革。

特点

• Nue 使用渐进增强、关注点分离和语义 Web 设计来提供新水平的性能、更好的可扩展性和大幅改进的开发体验。
• Nue 是一个非常小的巧JavaScript 库，压缩后 仅2.3kb。
• Nue没有hooks, effects, props, portals, watchers, provides, injects, suspension 这些抽象概念。了解 HTML、CSS 和 JavaScript 的基础知识，就可以轻松上手。
• 消除了 TCP 慢启动算法和渐进增强带来的 “地狱”
• 使用基于 HTML 的模板语法
• 具有响应式和异构组件模型，适合创建各种类型应用程序
• 允许在单个文件中定义多个组件来简化依赖管理
• 简化工具链：包含了 render 函数进行服务器端渲染以及 compile 函数生成浏览器端组件，在开发环境无需复杂打包工具如 Webpack 或 Vite 也能正常运行

安装使用

创建nue

# 下载项目
git clone https://github.com/nuejs/create-nue.git --depth 1

# 进入到项目内
cd create-nue

# 安装依赖
npm install

# 启动服务
npm run start

服务启动成功后就可以访问：http://localhost:8080

nue语法

Nue 使用基于 HTML 的模板语法：

<div class="{ type }">
  <img src="{ img }">
  <aside>
    <h3>{ title }</h3>
    <p :if="desc">{ desc }</p>
    <slot/>
  </aside>
</div>

控制流:

<b :if="type == 'A'">A</b>

<b :else-if="type == 'B'">B</b>

<b :else-if="type == 'C'">C </b>

<b :else>Not A/B/C</b>

循环

<li :for="(item, index) in items">
  { index }: { item.text }
</li>

自定义语法

组件是 HTML 片段，其组件名称在 @name 属性中给出

<div @name="media-object" class="{ class }">
  <img src="{ img }">
  <aside>
    <h3>{ title }</h3>
    <p>{ desc }</p>
  </aside>
</div>

还可以在组件文件上使用任何您想要的扩展名，使用.nue 扩展名。

事件处理

定义 实例方法

<dialog>
  <button @click="close">Close</button>

  <script>
    close() {
      this.root.close()
      location.hash = ''
    }
  </script>
</dialog>

修饰符

Nue 提供了一些方便的快捷方式来处理常见的 DOM 事件操作功能。例如，@submit.prevent

<form @submit.prevent="onSubmit"></form>

<a @click.stop.prevent="doThat"></a>

<form @submit.prevent></form>

支持以下修饰符：

• prevent防止事件的默认行为发生
• stop防止事件进一步传播
• selfevent.target仅在元素本身时触发处理程序
• once事件最多触发一次
• enter捕获“Enter”和“Return”
• delete捕获“Delete”和“Backspace”键
• esc捕获“Esc”和“Escape”
• space捕获“空格键”、“ ”、“空格键”
• up捕获“向上”和“向上箭头”
• down捕获“Down”和“ArrowDown”
• left捕获“向左”和“向左箭头”
• right捕获“右”和“右箭头”

nue目标

nue目标是打造一个生态系统，是一项工程尝试，旨在为普遍存在的前端疲劳带来长期解决方案。

nue发布计划如下：

• Nuekit: 用于用更少的代码构建网站和web应用
• Nuemark: 一个用于丰富和交互式内容的markdown风格
• Nue CSS: 用于代替CSS-in-JS、Tailwind和SASS的级联样式
• Nue MVC: 用户构建单页应用
• Nue UI: 用于创建可重用的组件以快速进行UI开发