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

vue-example

maeken2010
December 11, 2019

 vue-example

maeken2010

December 11, 2019
Tweet

More Decks by maeken2010

Other Decks in Programming

Transcript

  1. Object-base <template> <div @click="plus">{{ count }} {{ double }}</div> </template>

    <script> export default { data: function() { return { count: 0 } }, computed: { double: function() { return this.count * 2 } }, methods: { plus: function() { this.count++ } } } </script>
  2. Composition <template> <div @click="plus">{{ state.count }} {{ state.double }}</div> </template>

    <script> import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function plus() { state.count++ } return { state, plus } } } </script>
  3. Class-base <template> <div @click="plus">{{ count }} {{ double }}</div> </template>

    <script> import Vue from 'vue' export default class App extends Vue { count = 0 get double() { return this.count * 2 } plus() { this.count++ } } </script>
  4. <template> <div @click="plus">{{ count }} {{ double }}</div> </template> <script>

    export default { data: function() { return { count: 0 } }, computed: { double: function() { return this.count * 2 } }, methods: { plus: function() { this.count++ } } } </script> <template> <div @click="plus">{{ count }} {{ double }}</div> </template> <script> import Vue from 'vue' export default class App extends Vue { count = 0 get double() { return this.count * 2 } plus() { this.count++ } } </script> <template> <div @click="plus">{{ state.count }} {{ state.double }}</div> </template> <script> import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function plus() { state.count++ } return { state, plus } } } </script> Object-base Class-base Composition