이 Vue.js 시리즈에서는 Vue 문서를 파헤칠 것입니다. 먼저 Vue tutorial에 대해 살펴보겠습니다.

지금은 Vue를 사용하여 브라우저에서 작업하고 있으므로 이 튜토리얼에는 Vue.js를 설정하는 방법이 포함되지 않습니다.

스크립트 및 템플릿 태그 사용 - 선언적 렌더링

스크립트 태그에서 우리는 JS 코드와 HTML로 확장되는 파일의 스크립트를 작성합니다. 여기에서 상태를 사용하고 HTML을 변경합니다.

아래에 data(){}가 표시되며 여기에 데이터가 저장됩니다. 무언가를 반환해야 합니다. 그렇지 않으면 작동하지 않습니다. HTML이 머무는 <template> 태그 내부의 data()에서 값을 사용할 수 있습니다.

<script>
export default {
  data () {
    return {
      msg: "Hello Vue!" // msg is property key || "Hello Vue!" is property value
    }
  }
}
</script>

<template>
  <h1> {{msg}} !</h1>
</template>

데이터에서 값을 사용하려면 이 경우 이중 중괄호(일명 콧수염 구문)로 속성 키 msg를 입력해야 합니다.

바인딩 속성

아래 코드에는 titleClass라는 속성 키가 있고 속성 값은 "title" 입니다. title는 style 태그에서 스타일을 가져옵니다. 스타일 태그에서 CSS 기술을 빛내보세요 :)

<script>
export default {
  data() {
    return {
      titleClass: "title",
    };
  },
};
</script>

<template>
  <h1 v-bind:class="titleClass">Change the color of this title</h1>
</template>

<style>
.title {
  color: red;
}
</style>

v-bind의 줄임말은 :입니다.

Vue에서 속성을 바인딩하기 위해 v- 접두사를 사용합니다. 따라서 특성을 바인딩하려면 콜론v-bind:이 인수 뒤에 오는 코드:를 사용해야 합니다.

이벤트 리스너

Vue에서 이벤트 리스너를 사용하려면 v-on:를 사용하십시오. 나 게으른데 지름길 있어? 네, @ 입니다. 따라서 v-on:click 를 입력하는 대신 @ 를 입력할 수 있습니다. 이번에는 v-on의 바로 가기 버전으로 이동합니다.

<script>
export default {
  data() {
    return {
      count: 0
        }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  }
</script>

<template>
  <!-- make this button work -->
  <button @click="increment">count is: {{ count }}</button>
</template>

위의 코드 블록에는 버튼이 있습니다. 클릭할 때 increment 메서드를 호출합니다( @ 또는 v-on:click 기억하십니까?). data(){}에서 속성 키에 액세스하려면 this 키워드를 사용하여 메서드에서 가져와야 합니다. 그렇지 않으면 Vue는 당신이 말하는 것을 알 수 없습니다. 내가 옵션 스타일로 코딩하고 있기 때문에 여기에 대해 자세히 설명하지 않겠습니다. :)

v-on 및 v-bind 또는 v-model 사용 - 양식 바인딩

아래 코드에서 입력 내부에 무언가를 입력하고 그 값을 렌더링(화면에 값 가져오기)하려면 v-on: 및 v-bind 의 조합이 필요합니다. v-bind:를 사용하여 text 값에 액세스하고 v-on:를 사용하여 event를 매개변수로 사용하는 onInput 메서드를 호출합니다. 필요한 값을 얻으려면 something.target.value . 우리의 매개변수는 event e 입니다. 말하자면 e.target.value 입력 내부의 값을 가져오는 것입니다. 또한, text 속성 키(처음에는 빈 문자열임)가 입력 내부의 값에 할당됩니다.

<script>
export default {
  data() {
    return {
      text: "",
    };
  },
  methods: {
    onInput(e) {
      this.text = e.target.value;
    },
  },
};
</script>

<template>
  <input v-bind:value="text" v-on:input="onInput" placeholder="Type here" />
  <p>{{ text }}</p>
</template>

그러나 Vue.js는 우리를 위해 일을 더 간단하게 만들고 v-model:와 v-bind:를 결합한 v-on:를 제공합니다. v-model: 를 사용하면 함수를 명시적으로 호출할 필요가 없습니다. 여기 있습니다:

<script>
export default {
  data() {
    return {
      text: "",
    };
  },
  methods: {
    onInput(e) {
      this.text = e.target.value;
    },
  },
};
</script>

<template>
  <input v-model="text" placeholder="Type here" />
  <p>{{ text }}</p>
</template>

즉, v-on:를 완전히 제거하고 v-bind를 v-model=로 변경했습니다.

조건부 렌더링

v-if=""v-else=""를 사용하고 조건부 렌더링에 더 많은 조건v-else-if이 있는 경우 사용하십시오. 조건이 만족되지 않으면 Vue는 렌더링하지 않습니다. 이것이 v-if 와 v-show 의 주요 차이점입니다. v-show는 어떤 경우에도 렌더링됩니다.

<script>
export default {
  data() {
    return {
      awesome: true,
    };
  },
  methods: {
    toggle() {
      this.awesome = !this.awesome;
    },
  },
};
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Svelte are coming!</h1>
</template>

awesome가 true인 경우 <h1 v-if="awesome">Vue is awesome!</h1> 렌더링, 그렇지 않으면 <h1 v-else>Svelte are coming!</h1> 렌더링

부분을 ​​마치기 전에 이 라인this.awesome = !this.awesome에 대해 이야기하고 싶습니다. 즉, 이벤트 리스너가 트리거될 때 다음 값은 현재 값의 반대가 됩니다. 현재 값이 거짓이면 다음 값은 참이고 그 반대도 마찬가지입니다.

요약하자면 이 부분에서는 선언적 렌더링(mustache syntax), 바인딩 속성(v-bind), 이벤트 리스너(v-on), 양식 바인딩(v-model), 조건부 렌더링(v-if, v -else, v-else-if)

여기까지가 1부의 끝이고, 다음 파트에서 v-for에 대해 다루겠습니다.

};

비녀장

Vue는 굉장합니다!

날씬이가 온다!

If `awsome` is `true ` render `<h1 v-if="awesome">Vue is awesome!</h1>`, else render `<h1 v-else>Svelte are coming!</h1>`

Before I finish part, I want to talk about this line `this.awesome = !this.awesome`. This means, next value will be opposite of the current value when event listener is triggered. If current value is falsy, mext value will be truthy and vice verca.

To sum it up, in this part we talked about declarative rendering (mustache syntax), bind attributes (v-bind), event listeners (v-on), Form Bindings (v-model), conditional rendering (v-if, v-else, v-else-if)

This is the end of part 1, I will go over `v-for` in the next part.