Vue.jsの勉強を始めたので記録しておきます。
Udemyを初めて登録して使っています。↓
以下にUdemyで実践した結果を残しておきます。
Vue.js基本動作
- v-if
- v-show
- v-for
- v-model
- 双方向データバインディング
- Vue.component
上記を全て使用したサンプルが以下です。jsfiddleで簡単に試す事が出来ました。
https://jsfiddle.net/hase_done/gcpoxvy6/
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<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> |
js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
Vue.component('hello-component', { template: ' Hello Component '}) 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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> |
js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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/
.