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

本番環境にVue.jsを使った話 / Use Vue.js at production

Hiromi Kimura
August 02, 2017
1.3k

本番環境にVue.jsを使った話 / Use Vue.js at production

Hiromi Kimura

August 02, 2017
Tweet

Transcript

  1. )FMMP7VF <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script

    src="https://unpkg.com/vue"></script> <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script>
  2. <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>

    <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> OFX7VF 7VFΠϯελϯεΛ࡞੒ )FMMP7VF
  3. <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>

    <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> FM؅ཧ͍ͨ͠%0.ͷJEΛࢦఆ )FMMP7VF
  4. <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>

    <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> EBUB7VFΠϯελϯε಺ʹอ࣋͢ΔσʔλΛએݴ )FMMP7VF
  5. <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>

    <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> NFUIPETॲཧΛ͢ΔϝιουΛ࣮૷ IUNMଆ͔Β΋7VFΠϯελϯε಺Ͱ΋ݺͼग़͠Մೳ )FMMP7VF
  6. <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>

    <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> )FMMP7VF
  7. <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>

    <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> ɾid=“vue-app”͔ͩΒ7VFKT͔͍ͭͬͯΔͷͩͳ ɾv- Ͱ࢝·͍ͬͯΔ͔ΒԿ͔ॲཧʹ͔͍ͭͬͯΔͷͩͳ ɾv-show ͸දࣔ੾Γସ͑Λ͢Δ΍ͭͩͳ ɾv-on:click ΫϦοΫͨ࣌͠ʹԿ͔͍ͯ͠Δͳ )5.-͔ΒಡΈऔΕΔ৘ใ͕ଟ͍ʂ )FMMP7VF
  8. K2VFSZ <div> <h1 id="hidden-h1" style="display: none;">hello!</h1> <button id="h1-show">show hello</button> </div>

    <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> ɾid="hidden-h1"Կʹ࢖͍ͬͯΔJEͳͷͩΖ͏ ɾstyle="display: none;" DTTʹҠ͍͚ͨ͠ͲҠ͢ͱ
 ɹI͕࠷ॳ͔Βফ͑ͯΔ͜ͱ͕Θ͔Βͳ͘ͳΔͳ ɾid="h1-show" ͸ͨͿΜΫϦοΫͨ͠ΒIΛද͍ࣔͯ͠ΔΜͩΖ͏ +BWB4DSJQU΍$44Λ֬ೝ͠ͳ͍ͱΘ͔Βͳ͍ʂ ˠ։ൃεϐʔυ͕μ΢ϯɺอक΋͠ʹ͍͘