hello foo bar Saba note | Vue.jsの使い方 (はじめての人)

Vue.jsの使い方 (はじめての人)

2018.5.23 (水)

https://jp.vuejs.org/
Vue.jsを触ってみました。Documentがしっかりしているのでほとんど何も準備はいらないです。

Hello Vue!

html

<div id="app">
  {{ message }}
</div>

vue

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

Hello Vue!が表示されます。

Bladeとの競合

phpのテンプレートエンジンのblade(主にLaravel)ではvueと同じ{{foo}}という使い方に近いかたちで{{$foo}}を使います。全く質の異なるものですが、同じ記号を使うことで競合しPHPの方でエラーが出てしまいます。なので、Bladeの方で{{foo}}をそのまま出力してあげる設定で、

@{{foo}}

と書いてあげるとVueのレンダリングが出来ます。

Sample code

最もミニマムだとこんなかたちになります。

<html>
<head>
  <meta charset="utf-8">
</head>

<body>
  <div id="app">
    {{ message }} hogehgehoge
  </div>

  <ul id="example-1">
    <li v-for="item in items">
      {{ item.message }}
    </li>
  </ul>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });

  var example1 = new Vue({
    el: '#example-1',
    data: {
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    }
  });
</script>
</html>