【Vue.js】Vue.jsを使ってみた

f:id:duo-taro100:20160218004611p:plain

Angular派(2系はろくに使ったことないから、Angular派ともいえないが)だった僕が、ついにVue.jsに手を出した。

jp.vuejs.org

ここに沿って、適当に触ってみた。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vueチュートリアル</title>
  <!-- CDN利用 -->
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <p>テスト</p>
  <div id="app">
    これは{{message}}
  </div>
  <div id="app2">
    <span v-if="!seen">
      見える
    </span>
    <span v-if="seen">
      見えない
    </span>
    <span v-for="(todo,index) in todos">
      <p>{{index}},{{todo.text}}</p>
    </span>
  </div>
  <div class="appClass">
    これは{{message}}1
  </div>
  <div class="appClass">
    これは{{message}}2
  </div>
  <div class="appClass">
    これは{{message}}3
  </div>
  <div class="appClass">
    これは{{message}}4
  </div>
</body>
<script>
var app = new Vue({
  el: '#app',
  data : {
    message : 'Hello Vue1!'
  }
})

var app2 = new Vue({
  el: '#app2',
  data : {
    message : 'Hello Vue2!',
    seen: false,
    todos: [
      {text : '1つ目'},
      {text : '2つ目'},
      {text : '3つ目'}
    ]
  }
})

var app3 = new Vue({
  el : '.appClass',
  message : 'classでもできる？'
})
</script>
</html>

あー、いい。
まだちょっとしか触ってないけど、ものすごい入りやすい。

■ Vueインスタンスの範囲
上記の例だと指定したid要素の中で、データが使える。

■elに指定する値
上記ソースだと、一部エラーが出ている。
elで複数あるclass名を指定したけど、1個目だけ反映されて、それ以降には反映されずエラー。
いけるんじゃないかと思ってやってみたけど、できなかった。
つまり、「el」に指定する値は、idとかclassとかとは意味合いが違うってことだね。
言葉にするの難しいけど、僕がやろうとしたことが、Vue.jsのやりたいことではないのは分かった。

f:id:duo-taro100:20170913114415p:plain