Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="compile base 2 - regex replace save origin template">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
    {{message}}
  </div>
  
  <button id="changeBtn">change</button>
</body>
</html>
 
const TOKEN_REG = /\{\{(\w+)\}\}/g
class Vue {
  constructor (config) {
    this.config = config
    this.template = config.el.innerHTML
    this._init()
  }
  
  _init () {
    this.render()
  }
  
  render () {
    let data = this.config.data
    this.config.el.innerHTML = this.template.replace(TOKEN_REG, function (_, val) {
      return data[val.trim()]
    })
  }
}
let vm = new Vue({
  el: app,
  data: {
    message: 'Hello Vue.js!'
  }
})
changeBtn.addEventListener('click', handleChange)
function handleChange () {
  vm.config.data.message = 'Hello world!'
  vm.render()
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ningshenpro
0viewers