百度开源的 MVVM 组件框架 SAN - 12.6K，兼容 IE6-JavaScript中文网-JavaScript教程资源分享门户

SAN是百度开源的一款轻量级MVVM组件框架，只有12.6K的文件大小，但提供了丰富的功能和兼容IE6的能力。本文将详细介绍SAN框架的特性以及如何使用。

SAN框架的特性

数据驱动视图

SAN采用了MVVM的模式，将数据与视图分离。通过组件中的数据定义实现数据与视图的绑定，当数据发生改变时，视图也会自动更新。

-- -------------------- ---- -------
---- ------ ---
----------
  ----------------------
-----------

--------
------ --- ---- -----

------ ------- ---------------------
  ------ -
    ------ -
      -------- ------- -----
    -
  -
--
---------

灵活的组件化思想

SAN采用组件化思想，将页面拆分为多个独立的组件，每个组件都可以包含自己的数据与逻辑，并可以嵌套、复用和组合成更大的组件。

-- -------------------- ---- -------
---- ----- ---
----------
  -----
    ---------------- --------------------- -----------------------------------------
  ------
-----------

--------
------ --- ---- -----
------ -------------- ---- ------------------

------ ------- ---------------------
  ----------- -
    ------------------ --------------
  --
  ------ -
    ------ -
      -------- ------- -----
    -
  --
  ------------- -
    -----------------
  -
--
---------

---- ----- ---
----------
  ---- ------------------------------------
-----------

--------
------ --- ---- -----

------ ------- ---------------------
  ---------- -
    ------ -
      -------- --
    -
  --
  --------- -
    ------------------
  -
--
---------

丰富的指令和事件

SAN提供了丰富的内置指令和事件，方便开发者实现各种交互效果。

指令

if：根据条件渲染DOM
for：循环渲染DOM
class：绑定class
style：绑定style
show：根据条件显示/隐藏DOM

-- -------------------- ---- -------
----------
  -----
    ---- ---------------- -- ---- ---- -- ----------
    ----
      --- ----------- -- -------------------
    -----
    ---- ------------------- -----------------
    ---- ------------------ ------------------
    ---- --------------------
  ------
-----------

事件

on-click：点击事件
on-mouseenter：鼠标进入事件
on-mouseleave：鼠标离开事件
on-change：表单元素值改变事件
on-submit：表单提交事件

<template>
  <div on-click="handleClick"></div>
  <input type="text" on-change="handleChange">
  <form on-submit="handleSubmit"></form>
</template>

如何使用SAN框架

安装

通过npm安装SAN：

npm install san --save

快速上手

在HTML中引入SAN的JS文件和开发的组件文件：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ---------- ------------
  ------- ----------------------------------------------
  ------- ------------------------
-------
------
  ---- ---------------
-------
-------

在JavaScript中定义并挂载一个根组件到DOM节点上：

import san from 'san'
import App from './App'

const app = new App()
app.attach

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/30958) ，转载请注明来源
[https://www.javascriptcn.com/post/30958](https://www.javascriptcn.com/post/30958)