とりあえず試してみたいって方のための Vue.js 入門

9 years ago

Vue.js 入門です. 1.0 対応してます.

説明うんぬんよりもとりあえず触ってみたいって方向けの入門エントリーです.
Runstant を使って, 今すぐに Vue.js 始めちゃいましょう♪

「これ何やってんの？」とか「どういう意図で？？」などありましたら気軽に下のコメントや Twitter にて質問してください.

Runstant

デモです. input box の内容を変更すると
上のメッセージが連動して変わるのがわかるかと思います.

Runstant で作ってあるので, 実際にコードをイジって試せます.

Vue.js の使い方

1. Vue.js を読み込もう

cdn 経由で読み込んじゃいます.

<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script>

これで準備完了. 手軽で良いですね♪

2. Vue.js を実際に使ってみる

html 側に

<body>  
  <div id="demo">
    <p>{{message}}</p>
    <input v-model="message">
  </div>
</body>

javascript 側に

window.onload = function() {  
  var demo = new Vue({
    el: '#demo',
    data: {
      message: 'Hello Vue.js!'
    }
  });
};

と書いてみてください.

data がそのままモデルになり, input に v-model="message" とすることでデータをひも付けています.

たったこれだけで, データバインディングが実現できます.

Vue.js Tips

tips です.

全て Runstant のサンプルがあるので実際に動かしたりイジったりしながら試せます.

List

リスト表示です.

html

<body>  
  <div id="app">
    <ul>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</body>

javascript

new Vue({  
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})

v-for 属性にリストを渡すことでリスト展開して表示してくれます.

runstant

Event

イベント登録です.

html

<body>  
  <div id="app">
    <p>{{ message }}</p>
    <button v-on:click="showMessage">alert</button>
  </div>
</body>

javascript

new Vue({  
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    showMessage: function () {
      alert(this.message);
    }
  }
})

v-on:イベント名 という属性に methods に登録している関数名を渡すことでイベントを登録することができます.

runstant

todo demo

公式にあった簡単な todo をちょっとイジったやつです.

html

<body>  
  <div id="app">
    <input v-model="input" v-on:keyup.enter="add">
    <ul>
      <li v-for="todo in todos">
        <span>{{ todo.text }}</span>
        <button v-on:click="remove($index)">x</button>
      </li>
    </ul>
  </div>
</body>

javascript

new Vue({  
  el: '#app',
  data: {
    input: '',
    todos: [
      { text: 'Add some todos' }
    ]
  },
  methods: {
    add: function () {
      var text = this.input.trim()
      if (text) {
        this.todos.push({ text: text })
        this.input = ''
      }
    },
    remove: function (index) {
      this.todos.splice(index, 1)
    },
  }
})

runstant

Component

コンポーネント作れます♪

html

<body>  
  <div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
  </div>
</body>

javascript

window.onload = function() {  
  var Child = Vue.extend({
    template: '<div>A custom component!</div>'
  });

  new Vue({
    el: '#app',
    components: {
      'my-component': Child,
    }
  });
};

Vue.extend(...) でコンポーネントを作成し, それを components にタグ名と一緒に指定するとそれを展開してくれます.

runstant

phi

phiaryjust a creator

とりあえず試してみたいって方のための Vue.js 入門

Runstant

Vue.js の使い方

1. Vue.js を読み込もう

2. Vue.js を実際に使ってみる

Vue.js Tips

List

Event

todo demo

Component