安装UIkit后，将JavaScript文件添加到页面的<head> 中，将其包含在页面上。 您还可以选择使用defer 属性来延迟脚本执行。
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>UIkit正在侦听DOM操作，并且会在将组件插入DOM或从DOM中删除时自动初始化，连接和断开组件。因此，它可以轻易地与 Vue.js 和 React这一类的JavaScript框架一起使用。
注意 官方的UIkit网站及其文档是通过这种方式构建的。 这是如何集成UIkit和Vue.js的完美示例。 前往 Github仓库uikit/uikit-site 看看好的设置看起来是什么样子。本中文版是利用thinkphp 和官方md文件建设的。
您可以通过向HTML元素添加属性 uk-* 或 data-uk-* 属性来使用UIkit组件，这是UIkit使用其组件的最佳实践，应始终首先考虑。
<div uk-sticky="offset: 50;"></div>
<div data-uk-sticky="offset: 50;"></div>注意 React 仅适用于 data-uk-* 前缀。
您还可以通过JavaScript初始化组件，并将它们应用于文档中的元素。
var sticky = UIkit.sticky('#sticky', {
offset: 50
});您可以通过将选择器或元素作为第一个参数传递给组件函数来检索已初始化的组件。
var sticky = UIkit.sticky('#sticky');省略第二个参数不会重新初始化组件，而是充当getter（激活）功能。
每个组件都带有一组配置选项，您可以自定义它们的行为。可以在每个实例级别或全局级别上设置选项。
可以设置选项:
使用 key: value; 格式,
<div uk-sticky="offset: 50; top: 100;"></div>有效的 JSON 格式,
<div uk-sticky='{"offset": 50, "top": 100}'></div>单一属性,
<div uk-sticky offset="50" top="100"></div>或作用于带有 data-前缀的单一属性
<div uk-sticky data-offset="50" data-top="100"></div>对于 Primary options选项, 如果它是属性值中的唯一选项，则可以省略它的键。请查看特定的组件文档，以找到哪个选项是主要选项, 如果它是属性值中的唯一选项，则可以省略它的键。请查看特定的组件文档，以找到哪个选项是主要 Primary 选项。
<span uk-icon="home"></span>您还可以通过编程将选项传递给组件构造函数。
// 传递选项对象。
UIkit.sticky('.sticky', {
offset: 50,
top: 100
});
// 如果组件支持主选项的话。
UIkit.drop('#drop', 'top-left');通过component（组件）属性传递的选项拥有最高优先级，其次是单个属性，再然后是JavaScript。
<div uk-sticky="offset: 50;" offset="100"></div>
<!-- 偏移量为50 -->可以通过扩展组件来全局更改组件选项。
UIkit.mixin({
data: {
offset: 50,
top: 100
}
}, 'sticky');通过编程，可以使用JavaScript中的 element, options 参数格式来初始化组件。 element 数可以是任何 Node, selector 或者 jQuery object。您将收到初始化的组件作为返回值。 Functional Components (例如 Notification) 应忽略 element 参数。
// 传递选择器和选项对象。
var sticky = UIkit.sticky('.sticky', {
offset: 50,
top: 100
});
// 功能组件应省略“element”参数。
var notifications = UIkit.notification('MyMessage', 'danger');注意
选项名称必须用驼峰命名法表示，比如show-on-up 变成 showOnUp.
初始化后，您可以通过调用相同的初始化函数（省略options参数）来获取组件。
// Sticky 是之前初始化的组件
var sticky = UIkit.sticky('.sticky');注意
对css选择器使用 UIkit[componentName](selector) 将始终只返回第一个匹配项！如果需要访问所有实例，请先 querySelectorAll查询 元素。然后分别对每个元素应用 - UIkit[componentName](element).
以编程方式初始化组件使您可以直接调用其功能。
UIkit.offcanvas('#offcanvas').toggle();任何带下划线前缀的组件函数和变量均被视为内部API的一部分，它们可能会在任何给定时间更改。
每个组件都会触发您可以响应的DOM事件。 例如，当Modal为显示状态或 Scrollspy 元素变为可见时。
UIkit.util.on('#offcanvas', 'show', function () {
// do something
});组件的文档页面列出了其事件。
有时，诸如Grid或Tab之类的组件会隐藏在标记中。 与切换台Switcher, 模态组件Modal 或 Dropdown下拉组件结合使用时，可能会发生这种情况。 一旦可见，就需要调整或固定其高度和其他尺寸。
UIkit提供了几种更新组件的方法。 省略 type 参数将触发 update 事件。
// 调用在元素本身（父元素和子元素）上注册的组件的更新挂钩。
UIkit.update(element = document.body, type = 'update');
// 更新组件本身。
component.$emit(type = 'update');
如果需要确保某个组件已被正确销毁（例如，从DOM中删除后），则可以调用其 $destroy 函数。
// 销毁组件。 例如，取消绑定其事件监听器
component.$destroy();
// 同时销毁组件，从DOM中删除元素。
component.$destroy(true);# JavaScript
[安装UIkit](installation.md)后，将JavaScript文件添加到页面的`<head>` 中，将其包含在页面上。 您还可以选择使用`defer` 属性来延迟脚本执行。
```html
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>
```
***
## UIkit and reactive JavaScript frameworks-UIkit和响应式JavaScript框架
UIkit正在侦听DOM操作，并且会在将组件插入DOM或从DOM中删除时自动初始化，连接和断开组件。因此，它可以轻易地与 [Vue.js](http://vuejs.org/) 和 React这一类的JavaScript框架一起使用。
**注意** 官方的UIkit网站及其文档是通过这种方式构建的。 这是如何集成<em>UIkit和Vue.js</em>的完美示例。 前往 [Github仓库uikit/uikit-site](https://github.com/uikit/uikit-site) 看看好的设置看起来是什么样子。本中文版是利用thinkphp 和官方md文件建设的。
***
## Component usage-组件用法
您可以通过向HTML元素添加属性 `uk-*` 或 `data-uk-*` 属性来使用UIkit组件，这是UIkit使用其组件的最佳实践，应始终首先考虑。
```html
<div uk-sticky="offset: 50;"></div>
<div data-uk-sticky="offset: 50;"></div>
```
**注意** [React](https://facebook.github.io/react/) 仅适用于 `data-uk-*` 前缀。
您还可以通过JavaScript初始化组件，并将它们应用于文档中的元素。
```js
var sticky = UIkit.sticky('#sticky', {
offset: 50
});
```
您可以通过将选择器或元素作为第一个参数传递给组件函数来检索已初始化的组件。
```js
var sticky = UIkit.sticky('#sticky');
```
省略第二个参数不会重新初始化组件，而是充当getter（激活）功能。
***
## Component configuration-组件配置
每个组件都带有一组配置选项，您可以自定义它们的行为。可以在每个实例级别或全局级别上设置选项。
### 实例
可以设置选项:
使用 `key: value;` 格式,
```html
<div uk-sticky="offset: 50; top: 100;"></div>
```
有效的 JSON 格式,
```html
<div uk-sticky='{"offset": 50, "top": 100}'></div>
```
单一属性,
```html
<div uk-sticky offset="50" top="100"></div>
```
或作用于带有 `data-`前缀的单一属性
```html
<div uk-sticky data-offset="50" data-top="100"></div>
```
对于 _Primary_ options选项, 如果它是属性值中的唯一选项，则可以省略它的键。请查看特定的组件文档，以找到哪个选项是主要选项, 如果它是属性值中的唯一选项，则可以省略它的键。请查看特定的组件文档，以找到哪个选项是主要 _Primary_ 选项。
```html
<span uk-icon="home"></span>
```
您还可以通过编程将选项传递给组件构造函数。
```js
// 传递选项对象。
UIkit.sticky('.sticky', {
offset: 50,
top: 100
});
// 如果组件支持主选项的话。
UIkit.drop('#drop', 'top-left');
```
### 优先顺序
通过component（组件）属性传递的选项拥有最高优先级，其次是单个属性，再然后是JavaScript。
```html
<div uk-sticky="offset: 50;" offset="100"></div>
<!-- 偏移量为50 -->
```
### 全局
可以通过扩展组件来全局更改组件选项。
```js
UIkit.mixin({
data: {
offset: 50,
top: 100
}
}, 'sticky');
```
***
## Programmatic use-程序化使用
通过编程，可以使用JavaScript中的 `element, options` 参数格式来初始化组件。 `element` 数可以是任何 `Node`, `selector` 或者 `jQuery object`。您将收到初始化的组件作为返回值。 `Functional Components` (例如 `Notification`) 应忽略 `element` 参数。
```js
// 传递选择器和选项对象。
var sticky = UIkit.sticky('.sticky', {
offset: 50,
top: 100
});
// 功能组件应省略“element”参数。
var notifications = UIkit.notification('MyMessage', 'danger');
```
**注意**
选项名称必须用驼峰命名法表示，比如`show-on-up` 变成 `showOnUp`.
初始化后，您可以通过调用相同的初始化函数（省略options参数）来获取组件。
```javscript
// Sticky 是之前初始化的组件
var sticky = UIkit.sticky('.sticky');
```
**注意**
对css选择器使用 `UIkit[componentName](selector)` 将始终只返回第一个匹配项！如果需要访问所有实例，请先 [querySelectorAll查询](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) 元素。然后分别对每个元素应用 - `UIkit[componentName](element)`.
以编程方式初始化组件使您可以直接调用其功能。
```js
UIkit.offcanvas('#offcanvas').toggle();
```
任何带下划线前缀的组件函数和变量均被视为内部API的一部分，它们可能会在任何给定时间更改。
每个组件都会触发您可以响应的DOM事件。 例如，当Modal为显示状态或 Scrollspy 元素变为可见时。
```js
UIkit.util.on('#offcanvas', 'show', function () {
// do something
});
```
组件的文档页面列出了其事件。
有时，诸如Grid或Tab之类的组件会隐藏在标记中。 与切换台Switcher, 模态组件Modal 或 Dropdown下拉组件结合使用时，可能会发生这种情况。 一旦可见，就需要调整或固定其高度和其他尺寸。
UIkit提供了几种更新组件的方法。 省略 `type` 参数将触发 `update` 事件。
```js
// 调用在元素本身（父元素和子元素）上注册的组件的更新挂钩。
UIkit.update(element = document.body, type = 'update');
// 更新组件本身。
component.$emit(type = 'update');
```
如果需要确保某个组件已被正确销毁（例如，从DOM中删除后），则可以调用其 `$destroy` 函数。
```js
// 销毁组件。 例如，取消绑定其事件监听器
component.$destroy();
// 同时销毁组件，从DOM中删除元素。
component.$destroy(true);
```