1.1.vue的引入
先看下面这样一个简单的例子,实现了这样一个功能
数据的双向绑定:也就是数据的同步修改
逻辑分析:1.我们需要一个UI元素和属性相互绑定的方法2.我们需要监视属性和UI元素的变化3.我们需要让所有绑定的对象和元素都能感知到变化
1.1.1.vue与js的对比
1.1.1.1.js的实现(了解)
!DOCTYPEhtml
html
head
metacharset=UTF-8
titleDemo/title
/head
body
div
h4数据的双向绑定----js的实现/h4
inputtype=textdata-bind-1=name/
inputtype=textdata-bind-1=name/
/div
/body
/html
script
functionDataBinder(object_id){
//CreateasimplePubSubobject
varpubSub={
callbacks:{},
on:function(msg,callback){
this.callbacks[msg]=this.callbacks[msg]
[];
this.callbacks[msg].push(callback);
},
publish:function(msg){
this.callbacks[msg]=this.callbacks[msg]
[];
for(vari=0,len=this.callbacks[msg].length;ilen;i++){
this.callbacks[msg][i].apply(this,arguments);
}
}
},
data_attr=data-bind-+object_id,
message=object_id+:input,
timeIn;
changeHandler=function(evt){
vartarget=evt.target
evt.srcElement,//IE8