드디어 Vue.js를 배우기 시작했습니다. 음, 시작은 학습의 어려운 부분입니다. 오늘은 Vue CDN을 통합하고 Vue 속성을 프로젝트에 추가하는 방법에 대해 배웠습니다.
Html 파일 끝에 Vue CDN을 추가하기만 하면 됩니다. Vue를 사용할 준비가 되었습니다.

뷰 CDN

<script src="https://unpkg.com/vue@next" defer></script>

특정 HTML 섹션에 Vue 속성 추가

app.js(외부 JS 파일) 파일에서 Vue 앱을 생성하고 특정 섹션에 마운트해야 합니다. 변수를 사용하여 Vue 앱을 선언할 수 있습니다.

const app = Vue.createApp({});

이 Vue 앱을 HTML 코드에 추가하려면 이 객체에 마운트 기능을 사용해야 합니다. Mount는 이 Vue 코드가 적용되는 CSS 선택기의 문자열 값을 허용합니다. 여기에는 #user-goal이라는 ID가 있는 섹션이 있습니다.

const app = Vue.createApp({});
app.mount('#user-goal');

멋진 ! Vue는 해당 섹션에 마운트됩니다.

Vue 객체의 "data" 속성

"데이터"는 Vue 앱의 모든 변수를 보유하는 Vue 객체의 미리 정의된 속성입니다. "data"속성은 항상 키-값 쌍의 변수 이름 및 값 모음을 보유하는 객체를 반환합니다. 변수 값은 무엇이든 될 수 있습니다. 문자열, 숫자
, 부울 등

const app = Vue.createApp({
   data(){
      return {
        variable_name : "variable_value"
     }
  }
});
app.mount('#user-goal');

데이터 속성 값을 표시하는 "보간법"

변수 값을 HTML로 표시하려는 경우 "보간"은 멋진 핸들바 이름입니다. 이중 중괄호를 사용하고 data 속성에 선언한 변수 이름을 작성하십시오.

    <p>{{ variable_name }}</p>

"보간"은 Vue에 변수 이름을 실제 값으로 바꾸라고 지시합니다. 따라서 Vue 마운트 섹션 외부에서 "보간"을 사용할 수 없습니다.

Vue의 "v-bind" 속성

음, 때때로 우리는 Html 속성에 값을 전달해야 합니다. 예를 들어 앵커 태그 'href' 속성에 대한 링크를 반환하려고 하지만 "보간"을 사용하면 작동하지 않는다고 가정해 보겠습니다. 이를 위해서는 "v-bind"속성을 사용해야 합니다.
"v-bind"는 Html 속성을 Vue 변수에 바인딩하는 데 도움이 되는 Vue 속성입니다. 예시 :

    <p> <a v-bind:href="variable_name">Link </a></p>

P.S: v-bind의 더 많은 용도가 있고 우리는 v-bind의 더 짧은 버전을 사용할 수 있지만 지금은 이것에 충실합시다.

Vue의 "v-html" 속성

이제 변수를 사용하여 Html 코드를 표시하려고 한다고 가정해 보겠습니다. "보간법"만 사용하면 마크업 값이 표시되고 목적을 달성하지 못합니다. 이를 위해서는 v-html 속성을 사용해야 합니다.
예시:
app.js에서

const app = Vue.createApp({
   data(){
      return {
        variable_name : "<h1> Hello this is value </h1>"
     }
  }
});
app.mount('#user-goal');

index.html에서

     <p v-html="variable_name"></p>

Vue 객체의 "methods" 속성

지금까지는 정적 데이터만 사용했습니다. 여기에 다이나믹한 느낌을 더할 필요가 있습니다. 이를 위해서는 Vue 객체의 "methods"속성을 사용해야 합니다. "메서드"는 함수 모음을 보유하는 JS 객체만 허용하는 미리 정의된 속성입니다.

const app = Vue.createApp({
   data(){
      return {
        variable_name : "<h1> Hello this is value </h1>"
     }
  },
methods: {
    function_name: function () {
     //do something
    }
  }
});
app.mount('#user-goal');

"보간법"에서 직접 방법을 사용할 수 있습니다.
index.html에서

     <p> {{ function_name() }}</p>

"데이터" 속성을 "메서드"에 사용

기본적으로 "$this"키워드를 사용하기 위해 메소드에 변수를 사용해야 합니다.

const app = Vue.createApp({
   data(){
      return {
        variable_name : "<h1> Hello this is value </h1>"
     }
  },
methods: {
    function_name: function () {
      $this.variable_name = "new value"
    }
  }
});
app.mount('#user-goal');

Github 연습 코드

Tahsin-Ahmed 52225 / Vue와 함께하는 100일