Vue

by ChangJoo Park

HTML

<div id="app">
  <input type="text" v-model="text">
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
    el: '#app',
    data () {
    	return {
      	text: '헬로월드'
			}
    },
    beforeCreate () {
    	console.log('beforeCreate')            
    },
    created () {
    	console.log('created')        
    },
    beforeMount () {
    	console.log('beforeMount')        
    },
    mounted () {
    	console.log('mounted')    
    },
    beforeUpdate () {
    	console.log('beforeUpdate')
    },
    updated () {
    	console.log('updated')
    },
    watch: {
        text: {
        	immediate: true,
          handler (val) {
          	console.log('handler')
					}
        }
    }
});