Vue.js - 1

by Kim Ara

HTML

<div id="app">
         {{message}}
      </div>      
      <div id="app-2">
         <span v-bind:title="message">
            하이하이~~~~방가방가~~~~ 뷰뷰뷰~~~~
         </span>
      </div>      
      <div id="app-3">
         <p v-if="seen">보기</p>
      </div>
      <div id="app-4">
         <ol>
            <li v-for="todo in todos">
               {{ todo.text }}
            </li>
         </ol>
      </div>
      <div id="app-5">
         <p>{{message}}</p>
         <button v-on:click="reverseMessage">메시지 뒤집기</button>
      </div>
      <div id="app-6">
         <p>{{message}}</p>
         <input v-model="message">
      </div>

JavaScript

var app  = new Vue({
   el:'#app',
   data:{
      message:'안녕하세요.'
   }
})
var app2 = new Vue({
   el:'#app-2',
   data:{
      message:'이 페이지는'+ new Date() +'에 로드 되었습니다.'
   }
})
var app3 = new Vue({
   el:'#app-3',
   data:{
      seen: true
   }
})  
var app4 = new Vue({
   el:'#app-4',
   data:{
      todos:[
         {text:'김김김김김김'},
         {text:'아아아아아아'},
         {text:'라라라라라라'}
      ]
   }
})
var app5 = new Vue({
   el:'#app-5',
   data:{
      message: '안냥안냥 Vue~~!'
   },
   methods:{
      reverseMessage: function(){
         this.message = this.message.split('').reverse().join('')
      }
   }
})
var app6 = new Vue({
   el:'#app-6',
   data:{
      message: 'Vue'
   }
})