egoist
8/15/2016 - 8:45 AM

esnextbin sketch

esnextbin sketch

transpiled.js
content_copyfile_download
'use strict';

var _autosize = require('autosize');

var _autosize2 = _interopRequireDefault(_autosize);

var _vue = require('vue');

var _vue2 = _interopRequireDefault(_vue);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var AutosizeTextarea = {
  props: ['handleChange', 'value'],
  template: '<textarea @input="handleChange" >{{ value }}</textarea>',
  ready: function ready() {
    (0, _autosize2.default)(this.$el);
  }
};

var app = {
  template: '<autosize-textarea :handle-change="handleChange" :value="text"></autosize-textarea>',
  components: {
    AutosizeTextarea: AutosizeTextarea
  },
  data: function data() {
    return {
      text: 'hi'
    };
  },

  methods: {
    handleChange: function handleChange(e) {

      this.text = e.target.value;
      console.log(this.text);
    }
  }
};

new _vue2.default({
  el: 'body',
  components: { app: app }
});
package.json
content_copyfile_download
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "autosize": "3.0.17",
    "vue": "1.0.26"
  }
}
index.js
content_copyfile_download
import autosize from 'autosize'
import Vue from 'vue'

const AutosizeTextarea = {
  props: ['handleChange', 'value'],
  template: `<textarea @input="handleChange" >{{ value }}</textarea>`,
  ready() {
    autosize(this.$el)
  }
}

const app = {
  template: '<autosize-textarea :handle-change="handleChange" :value="text"></autosize-textarea>',
  components: {
    AutosizeTextarea
  },
  data() {
    return {
      text: 'hi'
    }
  },
  methods: {
    handleChange(e) {
      
      this.text = e.target.value
      console.log(this.text)
    }
  }
}

new Vue({
  el: 'body',
  components: {app}
})
index.html
content_copyfile_download
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
  <app></app>
  <!-- put markup and other contents here -->
</body>
</html>
esnextbin.md
content_copyfile_download
  • Rendered
  • Source

made with esnextbin