iv模板引擎
iv(全称iceView)是一套用于构建用户界面的渐进式JavaScript模板引擎，易于上手，性能强悍，吸取了Vue和微信小程序的优点，能通过简单的API来实现双向数据绑定，某个变量改变，并不会重新渲染整个视图，而是对应的「局部」视图发生改变，这保证了页面数据交互时的丝滑，而不会导致页面卡顿和闪烁。如果你用惯了vue或微信小程序的话，那么使用她的时候会非常顺手。在编写她之前我努力的研究了Vue的底层设计，最后编写出iceView，不过iceView更加干净高效，我修改了一些编写方式，向微信小程序靠拢了很多，也使其编写更加自由，一切花括号内皆为js原生表达式，你可以按照你的习惯随意编写逻辑和输出内容，无论条件判断，还是变量输出、函数输出都能满足你的要求。
iv名字依然惯用了ICEUI其它插件的命名方式，小驼峰书写方式，ice为前缀，而使用过程中所有的前缀皆为 i- ，i代表着ice的首字母，就像vue中的 v-
是一个道理，请熟知。
iv支持一个页面多个场景使用，第一个参数为选择器，用于指定某个容器，第二个参数为渲染数据，如果第一个参数直接为数据列表的话，将默认渲染class为iceView的元素
如何使用
我的名字：{{name}}
我的职业：{{occupation}}
我的爱好：{{intro.hobby}}
喜欢宠物：{{intro.pets}}
我的梦想：{{intro.dream('就这样')}}
运行代码
模板语法
数据绑定最常见的形式就是使用
{{...}}（双大括号）的文本插值，不仅可以放置变量，也可以放置函数，以及三元运算，在大括号中皆为表达式！你可以用你最喜欢的原生方式来写，没有任何局限性，但是一定要记住，要有返回值，返回值为最后一个变量或者字符串，不然将以false返回。
下面的使用方式是完全合法的，重要的事情说三遍，双大括号中皆为表达式，原生逻辑随意写。
注意：定义变量或者函数的名称第一位不能为$
{{name}}
{{10+5}}
{{arr.title}}
{{arr['content']}}
{{arr.fn('冰清玉洁')}}
{{ok ? 'yes' : 'no'}}
{{var a = 10;num+a}}
{{time.split('-').join('/')}}
{{ var a = 10; function b(){ return a + 5; } function c(){ return b() + 3 } c() + d }}
运行代码
条件语句
条件判断使用i-if指令，根据返回值true 或
false来判断是否显示，也可以使用i-show，两者的区别在于if的显示隐藏是通过增删node节点完成的，而show只是通过样式的display来控制现实隐藏。
看到我了吗？数字s = {{s}}
a大于3我才会显示
b大于5我才会显示
运行代码
循环语句
循环使用
i-for指令，绑定一个object或者array，默认数组的当前项的下标变量名默认为index，可通过i-index指令来重新命名；数组当前项的变量名默认为item，可通过i-item指令来重新命名；循环支持无限嵌套，也支持条件语句，支持宽松模式，花括号不是必须的，但是尽量写上。
基本展示
- 下标：{{index}} 姓名：{{item.name}} 年龄：{{item.age}}
多维数组展示，可自定义item名称
- {{item.name}}：{{info.name}}
自定义index名称
- 索引值：{{index}} {{item.name}}： 索引值：{{key}}名称：{{info.name}}
运行代码
绑定事件
绑定事件使用i-onclick指令，该on指令支持原生的所有on事件，i-onmouseover、i-onmouseout……同时支持.stop阻止冒泡和.prevent阻止默认事件，语法为：i-onclick.stop。
绑定值可以为函数，也可以为表达式，请注意，如果为自定义函数，
{{num}}
运行代码
图片渲染
img的src如果绑定变量，尽量使用i-src，这种方式不会引起浏览器抛出url的404错误。
运行代码
html渲染
使用i-html渲染html，主要用于html模板，一处编写，多处复用。
运行代码
表单数据绑定
使用i-model指令来实现双向数据绑定，支持input、textarea、radio、checkbox、select等元素。
提示：iceView的i-model十分强大，不仅可以直接绑定多维数组，也可以在for循环中直接通过item动态绑定自身变量，这是小程序和vue所不具有的，至少你无需再通过监听事件来获取数组的索引值然后再修改数据，请看下面的示例。
除了i-model指令，还有一个i-bind指令，目前仅支持select元素，用于绑定一个数组来格式化select下拉选择项，这会十分方便，至少你不需要再select下写option的i-for循环了，而i-bind指令上还附带两个属性，i-value和i-name，i-value用于指定数组对象的字段名，这个字段名对应的字段值会放入option的value中，i-name同理，会将值放入option中，用于展示下拉选择项的名称，如果不指定i-value和i-name，会使用数组对象中的value和name值，具体请看下面的示例。
普通写法的select：{{select}}
使用i-for循环生成option的select：{{cateValue}}
使用i-bind的select：{{arrValue1}}
使用i-bind绑定其它格式的select：{{arrValue2}}
input：{{input}}
数组中的input，动态给数组赋值，无需写任何一行代码
- 姓名：{{item.name}} 爱好：{{item.love}}
textarea：{{textarea}}
radio：{{radio}}
checkbox：{{checkbox[0]}}{{checkbox[1]}}
运行代码
生命周期
生命周期为onload函数，这个函数是由用户自定义的，可传可不传，onload会在程序初始结束后开始调用，常用于写异步获取数据接口。
{{text}}
运行代码
ajax异步调用数据
数据调用为ajax函数，支持POST、GET，自定义header请求头。
/**
* ajax请求
* @param json：如果为string字符串时，则为url，如果为json对象时，参数说明如下：
* url： 请求地址
* type： 请求类型，默认为post，可选值：post，get
* timeout： 网络超时，默认为15000毫秒
* async： 异步，默认为true
* data： 要求为Object或String类型的参数，发送到服务器的数据
* json： 是否将请求过来的数据自动转为json对象，默认为true
* success： 请求成功之后的回调函数
* error： 请求失败之后的回调函数
* complete： 不管请求成功还是失败，都会调用
* @param data：json传参为string字符串时此参数有效，等同于json.data
* @return {object}
*/
ice.view({
onload: function(){
//第一种写法
this.ajax({
url: 'https://iceui.cn/doc/data/table.json',
data: {cid: 2},
success(res){
console.log(res);
}
})
//第二种写法，支持Promise
this.ajax('https://iceui.cn/doc/data/table.json',{cid: 2}).then(res=>{
console.log(res);
})
},
})
文章列表
{{item.title}}
运行代码
如何调用iv内部自定义的方法或数据？
很多情况下外部程序需要调用iv中的方法或数据，这应该如何操作呢？其实很简单，iv其实会返回内部数据的，请看下面的示例。
运行代码