html
} }
{}} -->
更新操作 js
let vm = new vue(
},computed:
},methods:
},})
//觀察者 (發布訂閱) 觀察者 被觀察者
class dep
//訂閱
addsub(watcher)
//發布
notify()
}class watcher
get()
update()
}}// vm.$watch(vm,'school.name',(newval)=>)
class observer
observer(data) }}
definereactive(obj, key, value) ,
set: (newval) => school={}
//把老的值改為新的
if (newval != value) }})
}}//基類
class compiler
//判斷是否是指令
isdirective(attrname)
//編譯元素 div ul span
compileelement(node) = attr; //獲取 name 屬性名 值 對應data的屬性
//判斷是不是指令
if (this.isdirective(name)) })}
//編譯空 text text內也可以是內容 大多都是
間隔這裡就是text
compiletext(node) } }
let content = node.textcontent;
//去除不需要的
if (/\\}/.test(content)) } }
// console.log(content, "內容");}}
//核心的編譯方法
compile(node) } v-的屬性
let childnodes = node.childnodes;//那到所有的子節點
// console.log(childnodes);
//childnodes只是個類陣列，使用[...arr]轉換為陣列
[...childnodes].foreach(child => else })}
//把節點移動到記憶體中
node2fragment(node)
return fragment;
}iselementnode(node)
}compileutil = , vm.$data);
},setvalue(vm, expr, value)
return data[current];
}, vm.$data);
},model(node, expr, vm) );
node.addeventlistener('input', (e) => )
// console.log(node, 'node', expr, "nodeexpr")
let value = this.getval(vm, expr);//返回值就是 需要的屬性值
fn(node, value);
},getcontentvalue(vm, expr) \}/g, (...args) => )
},on(node, expr, vm, eventname) )
},text(node, expr, vm) } } } => a b c
let fn = this.updater['textupdater'];
let content = expr.replace(/\\}/g, (...args) => } 都加上觀察者
new watcher(vm, args[1], () => )
return this.getval(vm, args[1]);
});//最終內容
fn(node, content);
},updater: ,
//處理文字節點的
textupdater(node, value)
}}class vue
})};
for (let key in methods) })}
//把資料獲取操作 vm上的操作都**到 vm.$data
this.proxyvm(this.$data);
console.log(this.$data);
new compiler(this.$el, this);}}
proxyvm(data) ,
set(newval) })}
}}
原生JS實現簡單的拖放
最近學到了js中的事件，感覺和windows的事件佇列和處理函式很相似哈。需要監聽事件然後要有處理事件的函式。然後做了乙個小練習，元素的拖放。廢話不說了，上效果。實現子元素任意框拖放。首先在布局上，三個大盒子中的元素都是絕對定位於他們的父元素，給三個大盒子相對定位。上html和css cnt 1sp...
使用vue實現簡單的品牌管理
引入bootstrap rel stylesheet href js bootstrap.min.css 搭建簡單頁面搭建出品牌的新增輸入框以及搜尋框和展示列表 class panel panel primary class panel heading class panel title 新增品牌h...
Ajax簡單原生使用原理
let xhr 由於存在相容問題,所以需要判斷是dom瀏覽器還是ie瀏覽器 第乙個引數 是get還是post請求,第二個引數,伺服器需要攔截的路由,第三個引數,ajax是否非同步,true為非同步,false為同步xhr.send null get請求 xhr.send options post請求...