할머니의 콤퓨타 도전기

[Vue.js] 뷰 데이터 (data) 와 메소드 (methods) 본문

Web Front-end/Vue.js

[Vue.js] 뷰 데이터 (data) 와 메소드 (methods)

ji.o.n.e 2020. 10. 27. 16:53
  • 코드 구현
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Study</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id = "app">
        {{greeting('jione')}}
    </div>
    <script>
        new Vue({
            el: '#app',
            data:{
                age: 23
            },
            methods:{
                greeting(name){ // greeting: function()으로도 선언 가능
                    return 'Hello ' + name + ' !';
                }
            }
        })
    </script>
</body>
</html>

 

  • 실행 화면

저작자표시

'Web Front-end > Vue.js' 카테고리의 다른 글

[Vue.js] 데이터 양방향 바인딩 (Data Two Way Binding - v-model)  (0) 2020.10.28
[Vue.js] 이벤트 (Events)  (0) 2020.10.27
[Vue.js] 데이터 바인딩 (Data Binding)  (0) 2020.10.27
[Vue.js] 뷰 인스턴스(instance) 생성하기  (0) 2020.10.27
Vue.js 기본  (0) 2020.10.26
'Web Front-end/Vue.js' Related Articles more
Comments