Vue.jsサンプルコードまとめ・覚えた事など記録

Vue.jsの勉強を始めたので記録しておきます。

Udemyを初めて登録して使っています。↓

以下にUdemyで実践した結果を残しておきます。

Vue.js基本動作

• v-if
• v-show
• v-for
• v-model
• 双方向データバインディング
• Vue.component

上記を全て使用したサンプルが以下です。jsfiddleで簡単に試す事が出来ました。

https://jsfiddle.net/hase_done/gcpoxvy6/

HTML

<div id="app">
<hello-component></hello-component>
<hello-component></hello-component>
  <button v-on:click="onclick">
  Click!
  </button>
  <p>
    {{ now }}
  </p>
  <input type="text" v-model="message" />
  <input type="text" v-model="message" />
  <pre>
    {{ $data }}
  </pre>

<input type="text" v-bind:value="message" />
  <p v-if="toggle">
    if Hello
  </p>
  <p v-show="toggle">
    show Hello
  </p>
  <p>
    {{ message }}
  </p>
  <ol>
    <li v-for="color in colors">
      {{ color }}
    </li>
  </ol>
  <ul>
    <li v-for="value in user">{{value}}</li>
  </ul>
  <hr>
  <ul>
    <li v-for="(value, key) in user">{{ key }}: {{ value }}</li>
  </ul>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

js

Vue.component('hello-component', {
template: '<p>Hello Component</p>'
})

var app = new Vue({
  el: '#app',
  data: {
    now: '',
    message: 'Hello Vue.js!',
    toggle: true,
    colors: ['Red', 'Green', 'Blue'],
    user: {
      firstName: 'Taro',
      LastName: 'Yamada',
      age: 28
    }
  },
  methods: {
    onclick: function() {
      // alert('onclick!')
      this.now = new Date().toLocaleString();
    }
  }
})

Vue.jsでのTODOリスト

https://jsfiddle.net/hase_done/jndgqwy3/

HTML

<div id="app">
  <h2>
    TODO List Vue.js
  </h2>
  <form v-on:submit.prevent>
    <input type="text" v-model="newItem">
    <button v-on:click="addItem">
        Add
    </button>
  </form>
  <ul>
    <li v-for="(todo, index) in todos">
      <input type="checkbox" v-model="todo.isDone">
      <span v-bind:class="{ done: todo.isDone }">{{ todo.item }}</span>
      <button v-on:click="deleteItem(index)">
      Delete
      </button>
    </li>
  </ul>
  <pre>{{ $data }}</pre>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

js

var app = new Vue({
  el: '#app',
  data: {
    newItem: '',
    todos: []
  },
  methods: {
    addItem: function(event) {
      //	alert();
      if (this.newItem == '') return
      var todo = {
        item: this.newItem,
        isDone: false
      }

      this.todos.push(todo)
      this.newItem = ''
    },
    deleteItem: function(index) {
    	// alert(index)
      this.todos.splice(index, 1)
    }
  }
})

他のサンプルコード

• v-once
• v-pre
• v-html
• v-cloak
• v-text
• フィルタ
• 算出プロパティ
• 監視プロパティ
• getter setter

以下のリンクでサンプルコード一覧の動きが確認出来ます。

https://jsfiddle.net/user/hase_done/fiddles/

.