### **1.UOkay实例**
#### **创建一个实例**
UOkay采用简洁的语法将数据渲染进DOM系统。
1.渲染文本数据
~~~
<div id = "app">
{{message}}
</div>
~~~
~~~
new Okay({
ele:'app',
data:{
message:'Hello World'
}
})
~~~
输出结果：
~~~
<div id = "app">
Hello World
</div>
~~~
2.渲染DOM属性
~~~
<div id = "app">
<img src = "{{src}}" />
<p style = "color:{{color}};font-size:1.2rem;">Hello World</p>
</div>
~~~
~~~
var app =new Okay({
ele:'app',
data:{
color:'red',
src:'avatar.jpg'
}
})
~~~
输出结果：
~~~
<div id = "app">
<img src = "avatar.jpg" />
<p style = "color:red;font-size:1.2rem;">Hello World</p>
</div>
~~~
至此，我们已经实现了UOkay的文本应用和属性应用，看起来似乎好像和模板解析类似，但是实际我们UOkay实现了数据与DOM的关联，数据的修改将反馈至数据的更新。接下来我们可以试图修改data数据查看视图是否更新。在控制台输入：
~~~
app.data.color = 'blue'
~~~
UOkay与其他框架的区别在于UOkay不会将数据绑定到Okay实例上，原因在于我们能更好的区分是Okay数据还是Action数据。
这里需要注意的是UOkay接受配置项ele只能允许DOM id属性或Element对象，UOkay不接受其他css选择器。
### **2.条件标签**
UOkay定义了IF标签，开发者可以像写javascript脚本一样编写脚本
~~~
<div id = "app">
<if condition = "case == 1">
case为1
<else>
<if condition = "case == 2">
case为2
<else>
case不为1也不为2
</else>
</if>
</else>
</if>
</div>
~~~
~~~
var app = new Okay({
ele:'app',
data:{
case:3
}
})
~~~
输出结果：
~~~
<div id = "app">
case不为1也不为2
</div>
~~~
条件标签支持IF与ELSE，不支持ELSE IF语句，但可以嵌套使用IF/ELSE，当条件变量发生变化时，条件标签也会做出相应的响应，因此条件标签也是响应式的。
### **3.循环标签**
UOkay定义了FOR标签，可以实现列表视图与数组数据的绑定。
~~~
<div id = "app">
<for expre = "v of arr">
<div>
{{v.name}}
</div>
</for>
</div>
~~~
~~~
var app = new Okay({
ele:'app',
data:{
arr: [{
name: 'Baidu'
},{
name:'Google'
}]
}
})
~~~
输出结果：
~~~
<div id = "app">
<div>
Baidu
</div>
<div>
Google
</div>
</div>
~~~
### **4.组件视图**
~~~
<div id = "app">
<ucomponent></ucomponent>
</div>
~~~
~~~
var app = new Okay({
ele:'app',
components: {
ucomponent: {
template: "<div>{{ message }}</div>",
data: function () {
return {
message: 'Hello World'
}
}
}
}
})
~~~
输出结果：
~~~
<div id = "app">
<ucomponent>
<div>Hello World</div>
</ucomponent>
</div>
~~~
### **5.路由视图**
路由视图详情请见路由模块
