Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tiny Vue</title>
</head>
<body>

  <div id="demo">
    <p v-html="message"></p>
    <input type="text" v-model="message" />
  </div>

<script id="jsbin-javascript">
// tiny vue
var Vue = function(option){
  this.el = option.el
  this.data = option.data
  this._init()
}

Vue.prototype = {
  _init: function(){
    var prop, Directive, element, dirName, i, l

    // 把 data 变成属性
    for(prop in this.data) {
      this._prop(prop)
    }

    // 遍历模板，解析Directive
    var children = this.el.children,
        directives = {
          'v-model': ModelDirective,
          'v-html': HtmlDirective
        }

    for(i=0,l=children.length; i<l; i++) {
      element = children[i]

      for(dirName in directives){
        prop = element.getAttribute(dirName)
        Directive = directives[dirName]

        this._addObserver(
          prop,
          new Directive(element, this, prop)
        )
      }
    }
  },

  // 属性观察者
  _observers: {},
  _addObserver: function(prop, observer) {
    if(this._observers[prop])
      this._observers[prop].push(observer)
    else
      this._observers[prop] = [observer]
  },

  // 声明属性
  _prop: function(prop) {
    Object.defineProperty(this, prop, {
      get: function(){
        return this.data[prop]
      },
      set: function(val){
        var oldVal = this.data[prop]
        this.data[prop] = val
        this._observers[prop].forEach(function(observer){
          observer.updateDom(val, oldVal)
        })
      }
    })
  }

}

function Directive(el, vm, prop) {
  this.el = el
  this.vm = vm
  this.prop = prop

  this.updateDom(vm[this.prop])

  if(this.bind) {
    this.bind()
  }
}

Directive.prototype = {
  updateDom: null,
  updateData: null
}

Directive.extend = function(proto) {
  var SubClass = function() {
    Directive.apply(this, Array.prototype.slice.call(arguments))
  }
  SubClass.prototype = proto
  return SubClass
}


// Model directive
var ModelDirective = Directive.extend({
  bind: function(){
    this.el.onkeyup = this.updateData.bind(this)
  },
  updateDom: function(val){
     this.el.value = val
  },
  updateData: function(event){
    this.vm[this.prop] = event.target.value
  }
})

// Html Directive
var HtmlDirective = Directive.extend({
  updateDom: function(val) {
    this.el.innerHTML = val
  }
})


// init
new Vue({
  el: document.getElementById('demo'),
  data: {
    message: 'Hello, Vue!'
  }
})
</script>


<script id="jsbin-source-javascript" type="text/javascript">// tiny vue
var Vue = function(option){
  this.el = option.el
  this.data = option.data
  this._init()
}

Vue.prototype = {
  _init: function(){
    var prop, Directive, element, dirName, i, l

    // 把 data 变成属性
    for(prop in this.data) {
      this._prop(prop)
    }

    // 遍历模板，解析Directive
    var children = this.el.children,
        directives = {
          'v-model': ModelDirective,
          'v-html': HtmlDirective
        }

    for(i=0,l=children.length; i<l; i++) {
      element = children[i]

      for(dirName in directives){
        prop = element.getAttribute(dirName)
        Directive = directives[dirName]

        this._addObserver(
          prop,
          new Directive(element, this, prop)
        )
      }
    }
  },

  // 属性观察者
  _observers: {},
  _addObserver: function(prop, observer) {
    if(this._observers[prop])
      this._observers[prop].push(observer)
    else
      this._observers[prop] = [observer]
  },

  // 声明属性
  _prop: function(prop) {
    Object.defineProperty(this, prop, {
      get: function(){
        return this.data[prop]
      },
      set: function(val){
        var oldVal = this.data[prop]
        this.data[prop] = val
        this._observers[prop].forEach(function(observer){
          observer.updateDom(val, oldVal)
        })
      }
    })
  }

}

function Directive(el, vm, prop) {
  this.el = el
  this.vm = vm
  this.prop = prop

  this.updateDom(vm[this.prop])

  if(this.bind) {
    this.bind()
  }
}

Directive.prototype = {
  updateDom: null,
  updateData: null
}

Directive.extend = function(proto) {
  var SubClass = function() {
    Directive.apply(this, Array.prototype.slice.call(arguments))
  }
  SubClass.prototype = proto
  return SubClass
}


// Model directive
var ModelDirective = Directive.extend({
  bind: function(){
    this.el.onkeyup = this.updateData.bind(this)
  },
  updateDom: function(val){
     this.el.value = val
  },
  updateData: function(event){
    this.vm[this.prop] = event.target.value
  }
})

// Html Directive
var HtmlDirective = Directive.extend({
  updateDom: function(val) {
    this.el.innerHTML = val
  }
})


// init
new Vue({
  el: document.getElementById('demo'),
  data: {
    message: 'Hello, Vue!'
  }
})</script></body>
</html>