Upgrade to Pro — share decks privately, control downloads, hide ads and more …

チンパンジーでもわかるVue.js

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on.

 チンパンジーでもわかるVue.js

デジコン合宿

Avatar for Fukuda Naoto

Fukuda Naoto

August 29, 2018

More Decks by Fukuda Naoto

Other Decks in Technology

Transcript

  1. とりあえず手を動かせ index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>

    チンパンジーでもわかるVue.js</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script src="script.js"></script> </body> </html>
  2. クリックしたときのアクション <div id="app"> <input v-model="message" /> <button v-on:click="deleteString"> 削除</button> <p>{{

    message }}</p> </div> const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { deleteString: function(){ this.message = ''; } } })
  3. 要素の表示・非表示を操れ methods: { deleteString: function(){ this.message = ''; }, toggleVisible:

    function(){ this.isVisible = !this.isVisible; } } <button @click="toggleVisible">{{ isVisible ? ' 非表示' : ' 表示' <p v-if="isVisible">{{ message }}</p>
  4. 超便利!配列を展開する <ol> <li v-for='animal in animals'>{{ animal }}</li> </ol> data:

    { message: 'Hello Vue!', maxLength: 20, animals:[' チンパンジー',' ゴリラ',' サル'] }