web editor 사용법

web editor

• 원래는 여기서도 html의 script에 코드를 넣어줘야하지만 더 편리하게 작성할 수 있다

vue js setting(vue js 를 web editor에 연결)

js의 설저어튼을 눌러서 cnd의 특정 모듈을 다운받을 수 있다

예제

1. html에 app에 대한 div를 만들어준다
2. js코드에서 vue에 대한 instance를 만들어준다

new Vue({
  el: '#app',
  data: {
    msg: 'Hello vue'
  }
})

위 코드의 의미

• APP이라는 ID값을 가지는 요소에 대해서 vue를 적용하겠다
• vue안에서 쓸 특정한 데이터를 정의한다
• hello vue라는 문자데이터를 가지고 있는 변수 msg를 vue가 적용되는 element인 app에서 사용가능해야한다
• html에서 {{}} 라는 식안에 변수를 써주면 사용할 수 있다

그 외의 web editor

• jsbin : javascript에서 vue를 직접연결해주는 기능을 제공하지 않는다. html에서 연결해야한다

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

• jsfiddle

vue js란

• 간단한 템플릿 구문을 사용해 DOM(html의 각 요소들)에 data를 렌더링하는 것
  = 반응형 : js코드에 있는 data를 바꾸면 즉각적으로 html에있는 data가 변경되는 것