vuejs
Pocket

Reactを主に勉強してますが、Vueとかもちょこっと触ってみたいなと思ったので、簡単なサンプルを作ってみました。

環境構築などは特にせず、CDNでVueを読み込んでお手軽に試したものです。

Reactでやってみたこの記事から、いくつかやってみます。

【React】Hello Worldから簡単なTodoアプリまでReactでいろいろ書いてみる

もくじ
  1. Hello World
  2. カウントアップ
  3. Facebook Likeボタン風なカウント
  4. 追加・削除までの簡単なTodoアプリを作ってみる

Hello World

とりあえずHello World

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./app.js"></script>
</body>
</html>

app.js

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

カウントアップ

ボタンをクリックすると単純に数字が増えていくだけのものです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>{{ count }}</p>
    <button v-on:click="count += 1">追加</button>
  </div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./app.js"></script>
</body>
</html>

app.js

new Vue({
  el: '#app',
  data: {
    count: 0
  }
})

Facebook Likeボタン風なカウント

次はFacebookのいいねみたいに、クリックすると増えて、もう一回押すと減るやつです。また、カウントアップはメソッドを直接HTMLに書きましたが、今回はJSで書いてます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>いいね : {{ count }}</p>
    <button v-on:click="counter">いいね</button>
  </div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./app.js"></script>
</body>
</html>

app.js

new Vue({
  el: '#app',
  data: {
    state: true,
    count: 1000
  },
  methods: {
    counter: function(event) {
      if (this.state == true) {
        this.count += 1
        this.state = false
      } else {
        this.count -= 1
        this.state = true
      }
    }
  }
})

追加・削除までの簡単なTodoアプリを作ってみる

フォームに文字を入れてボタンを押すとTodo追加。リストの隣の削除ボタンを押すとそのTodoを削除するまでです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <form>
      <input type="text" v-model="newtodo">
      <button v-on:click="addTodo">追加</button>
    </form>
    <ul>
      <li v-for="todo in todos">
        {{todo.item}}
        <button v-on:click="deleteTodo(todo)">削除</button>
      </li>
    </ul>
  </div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./app.js"></script>
</body>
</html>

app.js

new Vue({
  el: '#app',
  data: {
    newtodo: "",
    todos: []
  },
  methods: {
    addTodo: function(event) {
      event.preventDefault();
      if (this.newtodo == "") return;
      this.todos.push({
        item: this.newtodo
      });
      this.newtodo = "";
    },
    deleteTodo: function(todo) {
      var index = this.todos.indexOf(todo);
      this.todos.splice(index, 1)
    }
  }
})

さいごに

基礎中の基礎みたいな単純なサンプルですが、JSのコードも分かりやすくていいなと思いました。

Pocket

カテゴリー: タグ: