Vuejs 소개🐎🐎🐎

Vuejs를 사용했거나 여전히 혼란스럽습니까?

오늘은 Vuejs에 대해 간단한 방법과 사용법을 설명하기 위해 왔습니다.
긴 단락을 읽는 대신 코드를 작성하여 학습을 시작해 보겠습니다.

이를 위해 codepen을 사용하고 있습니다.
먼저 id 앱으로 div 태그를 작성하는 것으로 시작했습니다.

<div id="app"></div>

이제 Vuejs 코드를 작성해 보겠습니다.
Vue는 객체를 인수로 사용하는 새로운 Vue 인스턴스를 제공합니다.

let app = new Vue({
  el:'#app'
})

위의 코드가 하는 일은 vue에 의해 제어되는 div 요소 내부에 코드를 작성하는 것입니다.

첫 번째 속성은 Vue가 대상으로 지정해야 하는 HTML 코드의 요소를 의미하는 el입니다.

Data Property: Vue 내부의 상태를 관리합니다.

Methods 속성: 함수를 정의할 수 있는 곳입니다.

이제 데이터 속성과 메서드를 작성해 보겠습니다.

var app = new Vue({
  el:'#app',
  data:{
    name:'Welcome to Vuejs',
    show:true,
    persons:['Gowtham','Aaron','Tonny']
  },
  methods:{
     changeme(){
       this.show = !this.show
    }
  }
})

data 및 methods 속성은 객체입니다.

데이터 속성에서 일부 정적 데이터를 정의하고 메서드 속성에서 changeme 함수를 선언했습니다.

이제 div 요소 내에서 이러한 속성을 사용하겠습니다.

<div id="app">
  <h1 v-if="show">{{name}}</h1>

  <ul v-for="person in persons" v-if="show">
    <li>{{person}}</li>
  </ul>
  <button @click="changeme">
    {{show ? 'Hide' : 'Show'}}
  </button>
</div>

v-if 지시문을 사용하여 h1 요소를 정의했습니다. 이미 Vue 인스턴스의 데이터 속성 내부에 정의된 show 속성을 사용했습니다.

v-if가 하는 일은 주어진 조건이 참일 때만 dom에 표시된다는 것입니다.

두 번째로 v-for 지시문과 함께 순서가 지정되지 않은 목록을 사용했습니다.

v-for는 Vue 인스턴스의 데이터 속성 내부에 이미 정의된 people 배열을 사용했기 때문에 배열을 반복하는 데 도움이 됩니다.

Vue는 데이터 바인딩 구문과 같은 템플릿을 사용하기 때문에 이중 중괄호를 사용했습니다.

버튼 요소인 마지막 것은 클릭 핸들러를 등록했습니다.
이를 위해 v-on:click의 약어인 @click 지시문을 사용했습니다.
당신은 그들 중 하나를 사용할 수 있습니다.

최종 출력은



작은 앱이나 큰 앱에서 Vue를 사용하거나 Vue로 완전한 단일 페이지 앱을 만들 수 있습니다.

여러분이 이것을 좋아하기를 바랍니다. Vuejs에 대해 더 알고 싶다면 문서를 확인하세요.

자원
Vue Docs
Vue Directives
Event Handiling in vuejs