uchcode
7/28/2016 - 2:43 PM

Vue.js component example

Vue.js component example

vue-component.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vue Component</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>
</head>
<body>

  <div id="viewport"></div>

<script>
var Components = {};

(function(Components){
  function _Base(id, source, options) {
    var newElement = document.createElement('div');
    newElement.innerHTML = source;
    var elm = newElement.childNodes[0];
    var target = document.getElementById(id.substr(1));
    target.appendChild(elm);
    options.el = elm;
    var self = this;
    return (function(){
      Vue.apply(self, arguments);
    })(options);
  }
  _Base.prototype = Vue.prototype;
  Components._Base = _Base;
})(Components);


(function(Components){
  function Label(id, options) {
    var source = '<span>{{ title }}</span>';
    var self = this;
    return (function(){
      Components._Base.apply(self, arguments);
    })(id, source, options);
  }
  Label.prototype = Components._Base.prototype;
  Components.Label = Label;
})(Components);


label = new Components.Label('#viewport', {
  data: {
    title: 'Hello Vue.js!'
  }
})
label.title = '本日は晴天なり'
</script>
</body>
</html>