1.3 数据更新如何与dom更新同步
由于vue的数据渲染是异步的。因此当数据更新后，页面dom并不一定就会按照我们期望的那样来渲染。好在vue里提供了一套处理机制。
虚拟节点vnode参数中有一个上下文对象context，它用来表示宿主对象所在的组件对象。那么借助$nextTick就可以实现数据更新后，dom跟着渲染。
1.4 使用指令配置控制数据
/**
* [handleInput 在输入阶段的处理逻辑] * @param {[DOM]} ele [当前指令操作的dom对象] * @param {[虚拟节点]} vnode [当前指令渲染的虚拟节点] * @param {[指令信息]} rel [当前指令的所有指令信息] * @param {[校验类型]} type [输入阶段的校验类型] * "number": 仅支持输入数字
* "float": 仅支持数字和小数点
*/
function handleInput(ele,vnode,rel){
let rule;
switch(true) {
case rel.modifiers.float: // 浮点型
rule = /[^d.]/g; break;
default: //默认仅支持输入数字
rule = /D/g;
}
let val = ele.value.replace(rule,"");
let maxLen = vnode.data.attrs && vnode.data.attrs['max-len'] ? vnode.data.attrs['max-len'] :0;
if(maxLen>0){val = val.substr(0,maxLen)}
setValueWithExpressionVue({
currObj:vnode.context.$data,
expression:rel.expression,
value:val,
key:vnode.key,
arg:rel.arg,
toString:rel.modifiers.string || rel.modifiers.float
})
}从上边截图，可以看出，目前为该指令赋予了以下功能：
支持纯数字，浮点型，字符串类型数字3种格式，必要时可以自定义扩充
支持最大字符数控制，超出禁止输入
支持数据作用域的灵活处理（主要针对类似for循环这种渲染操作）
更多功能完善中……
截图红框里的内容可以参照3.2指令配置项来理解。关于属性的配置，借助了虚拟dom节点里的data.attr属性。
1.5 数据更新和dom更新
/**
* [setValueWithExpressionVue 更新数据模型] * @param {Boolean} toString [是否转化为字符串] * @param {[type]} currObj [当前的数据模型] * @param {[type]} expression [指令表达式] * @param {[type]} value [指令的值] * @param {[type]} key [用于批量渲染时的跟踪键] * @param {[type]} arg [指令的参数] */
function setValueWithExpressionVue (option) {
let expression = option.expression.split('.')
expression.forEach(function (item, i) {
if (i < expression.length - 1) {
option.currObj = option.currObj[item] } else {
if(option.key !== undefined){
option.currObj[item][option.key][option.arg] = (option.value === "" || option.toString) ? option.value : option.value*1
