"Vue.js methods"의 두 판 사이의 차이

(새 문서: ==개요== ;Vue.js methods <source lang='html'> <div id="app"> <span>{{ count }}</span> <button @click="increment">+</button> </div> <script src="//unpkg.com/vue"></script> <scr...)
 
 
(사용자 2명의 중간 판 12개는 보이지 않습니다)
2번째 줄: 2번째 줄:
;Vue.js methods
;Vue.js methods


<source lang='html'>
<syntaxhighlight lang='html' line highlight='8-12'>
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>
</syntaxhighlight>
 
----
<syntaxhighlight lang='html' run>
<div id="app">
<div id="app">
   <span>{{ count }}</span>
   <span>{{ count }}</span>
8번째 줄: 29번째 줄:
</div>
</div>


<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script>
<script>
new Vue({
new Vue({
17번째 줄: 38번째 줄:
   methods: {
   methods: {
     increment() {
     increment() {
    this.count++
      this.count++
       console.log(this.count)
       console.log(this.count)
  }
    }
   }
   }
})
})
</script>
</script>
</source>
</syntaxhighlight>
<jsfiddle>8gq042te</jsfiddle>


==같이 보기==
==같이 보기==
* [[Vue.js data]]
* [[Vue.js mounted]]
* [[Vue.js async method]]
* [[Vue.js 카운터 예제]]
* [[Vuex 시작하기]]
* [[Vuex 시작하기]]


[[분류: vue.js]]
[[분류: vue.js]]

2023년 5월 4일 (목) 15:25 기준 최신판

1 개요[ | ]

Vue.js methods
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<div id="app">
  <span>{{ count }}</span>
  <button @click="increment">+</button>
</div>

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++
      console.log(this.count)
    }
  }
})
</script>

2 같이 보기[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}