<div id="readability-page-1" class="page"><div>
<ul>
<li><a href="https://joshua1988.github.io/vue-camp/">https://joshua1988.github.io/vue-camp/</a></li>
<li><a href="https://v3.ko.vuejs.org/">https://v3.ko.vuejs.org/</a></li>
<li><a href="http://www.yes24.com/Product/Goods/101926719">http://www.yes24.com/Product/Goods/101926719</a></li>
</ul>
<h2>사용자 입력</h2>
<pre><code>&lt;div id="event-handling"&gt;
  &lt;p&gt;{{ message }}&lt;/p&gt;
  &lt;button v-on:click="reverseMessage"&gt;Reverse Message&lt;/button&gt;
&lt;/div&gt;</code></pre>
<pre><code>const EventHandling = {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}</code></pre>
<p><code>v-on:event</code>를 통해서 이벤트를 제어 한다.</p>
<pre><code>&lt;input @keyup.enter="submit" /&gt;</code></pre>
<p>vuejs에서는 기본적인 key 이벤트를 제공한다. </p>
<ul>
<li>enter</li>
<li>tab</li>
<li>delete</li>
<li>esc</li>
<li>space</li>
<li>up</li>
<li>down</li>
<li>left</li>
<li>right</li>
</ul>
<p>Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 <code>v-model</code> 디렉티브를 제공한다.</p>
<pre><code>&lt;div id="two-way-binding"&gt;
  &lt;p&gt;{{ message }}&lt;/p&gt;
  &lt;input v-model="message" /&gt;
&lt;/div&gt;</code></pre>
<pre><code>const TwoWayBinding = {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}</code></pre>
<p>양방향 바인딩이 뭔지 좀 더 찾아봐야 한다. react는 단반향 바인딩만 지원 하기 때문에, vuejs랑 다르다.</p>
<p>Model에서 데이터를 정의한 후 View와 연결하면 Model, View 중 어느 한쪽에서 변경이 일어났을 때, 다른 한쪽에 자동으로 반영 되는 것을 데이터 양방향 바인딩이라고 한다.</p>
<h3>조건문과 반복문</h3>
<pre><code>&lt;div id="conditional-rendering"&gt;
  &lt;span v-if="seen"&gt;이제 나를 볼수 있어요&lt;/span&gt;
&lt;/div&gt;</code></pre>
<pre><code>const ConditionalRendering = {
  data() {
    return {
      seen: true
    }
  }
}</code></pre>
<p>조건문의 경우 <code>v-id</code>를 이용하면 된다. Vue 엘리먼트가 Vue에  삽입/업데이트/제거 될때 자동으로 전환 효과 적용 된다고 한다. ref. <a href="https://v3.ko.vuejs.org/guide/transitions-enterleave.html">https://v3.ko.vuejs.org/guide/transitions-enterleave.html</a></p>
<pre><code>&lt;div id="list-rendering"&gt;
  &lt;ol&gt;
    &lt;li v-for="todo in todos"&gt;
      {{ todo.text }}
    &lt;/li&gt;
  &lt;/ol&gt;
&lt;/div&gt;</code></pre>
<pre><code>const ListRendering = {
  data() {
    return {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  }
}</code></pre>
<p><code>v-for</code>는 반복문 directive이다. 반복문 시에는 <code>v-bind:key</code>를 필수적으로 지정 해주어야 한다.</p>
<h3>컴포넌트 조립</h3>
<pre><code>const TodoList = {
  data() {
    return {
      groceryList: [
        { id: 0, text: '야채' },
        { id: 1, text: '치즈' },
        { id: 2, text: '사람이 먹을수 있는거라면 뭐든지' }
      ]
    }
  }
}

const app = Vue.createApp(TodoList)

app.component('todo-item', {
  props: ['todo'],
  template: `&lt;li&gt;{{ todo.text }}&lt;/li&gt;`
})

app.mount('#todo-list-app')</code></pre>
<pre><code>&lt;div id="todo-list-app"&gt;
  &lt;ol&gt;
    &lt;!--
      이제 할일 todo-item 에 할일을 전달합니다.
      콘텐츠는 동적으로 포현됩니다.
      여기에서 "key"를 또 전달하고 있는데
      이것에 대해서는 나중에 설명하겠습니다.
    --&gt;
    &lt;todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    &gt;&lt;/todo-item&gt;
  &lt;/ol&gt;
&lt;/div&gt;</code></pre>
<p>컴포넌트에 <code>v-bind</code>를 통해서 데이터를 전달 할 수 있다.</p>
<pre><code>&lt;template&gt;
&lt;/template&gt;

&lt;script&gt;
    export default {
        name: '' // 컴포넌트 이름
        components: {}, // 외부 컴포넌트를 사용하게 되면, 해당 컴포넌트를 import한 후 등록 해주어야 한다.
        data() {
            return {

            };
        }, // 전역 데이터 선언 (html, js간의 양방향 데이터 바인딩 가능하며, 데이터 프로퍼티에서는 this로 접근 해야 한다.)
        setup() {}, // 컴포지션 API를 구현하는 메소드
        created() {}, // 컴포넌트 생성시, 실행
        mounted() {}, // template에 정의된 html코드가 렌더링 된 후 실행
        unmounted() {}, // unmount 이후 실행 
        methods: {} // 컴포넌트 내에서 사용할 메소드 정의
    }
&lt;/script&gt;</code></pre>
<p>문자열 데이터 바인딩 </p>
<pre><code>    &lt;h1&gt;Hello, {{ title }}&lt;/h1&gt;</code></pre>
<p><code>{{}}</code>로 감싸주면 된다.</p>
<pre><code>    &lt;h1 v-once&gt;Hello, {{ title }}&lt;/h1&gt;</code></pre>
<p><code>v-once</code> 디렉티브를 사용하면, 데이터가 변경 되어도 갱신 되지 않는 렌더를 보장 할 수 있으나, 같은 노드의 바인딩에도 영향을 준다.</p>
<p>raw HTML 데이터 바인딩</p>
<pre><code>&lt;template&gt;
    &lt;h1&gt;Hello, {{ title }}&lt;/h1&gt;
    &lt;div v-html="htmlString"&gt;&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
    data() {
        return {
            title: "DataBinding",
            htmlString: '&lt;p style="color:red"&gt;This is a red string&lt;/p&gt;'
        }
    }
}
&lt;/script&gt;
</code></pre>
<p><code>v-html</code> 디렉티브를 사용하면 html도 렌더링시 적용 되도록 할 수 있다.</p>
<pre><code>&lt;div v-bind:id="dynamicID"&gt;&lt;/div&gt;</code></pre>
<p>이중 중괄호 구문은 HTML 속성에 사용할 수 없다. 대신, <code>v-bind</code>를 사용할 수는 있다.</p>
<h3>전달 인자</h3>
<p>일부 디렉티브는 디렉티브 명 뒤에 콜론으로 표기되는 전달인자를 가질 수 있다. </p>
<pre><code>&lt;a v-bind:href="url"&gt;&lt;/a&gt;</code></pre>
<h3>동적 전달인자</h3>
<pre><code>&lt;a v-bind:[attributeName]="url"&gt;&lt;/a&gt;</code></pre>
<p>JavaScript 표현식을 대괄호로 묶어 디렉티브 전달인자로 사용할 수 있다.</p>
<p>동적인자는 null을 제외하고 string으로 변환되어야 한다.</p>
<pre><code>&lt;!-- 컴파일러 경고가 발생합니다. --&gt;
&lt;a v-bind:['foo' + bar]="value"&gt; ... &lt;/a&gt;</code></pre>
<p>위와 같은 경우 computed 속성을 이용하면 된다. ref. <a href="https://v3.ko.vuejs.org/guide/computed.html#%E1%84%80%E1%85%B5%E1%84%87%E1%85%A9%E1%86%AB-%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A6">https://v3.ko.vuejs.org/guide/computed.html#%E1%84%80%E1%85%B5%E1%84%87%E1%85%A9%E1%86%AB-%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A6</a></p>
<pre><code>&lt;!--
in-DOM 템플릿에서는 이 부분이 v-bind:[someattr]로 변환됩니다. 인스턴스에 "someattr" 속성이 없는 경우, 이 코드는 동작하지 않습니다.
--&gt;
&lt;a v-bind:[someAttr]="value"&gt; ... &lt;/a&gt;</code></pre>
<h3>수식어</h3>
<p>디렉티브를 특별한 방법으로 바인딩해야 함을 나타낸다. </p>
<pre><code>&lt;form v-on:submit.prevent="onSubmit"&gt;&lt;/form&gt;</code></pre>
<p><code>.prevent</code>의 경우 트리거 된 이벤트에서 <code>event.preventDefault()</code>를 호출하도록 명시하는 것이다.</p>
<h3>약어</h3>
<p><code>v-bind</code>, <code>v-on</code>에 대한 약어를 제공한다.</p>
<pre><code>&lt;!-- 전체 문법 --&gt;
&lt;a v-bind:href="url"&gt; ... &lt;/a&gt;

&lt;!-- 약어 --&gt;
&lt;a :href="url"&gt; ... &lt;/a&gt;

&lt;!-- 동적 전달인자와 함께 쓴 약어 --&gt;
&lt;a :[key]="url"&gt; ... &lt;/a&gt;</code></pre>
<pre><code>&lt;!-- 전체 문법 --&gt;
&lt;a v-on:click="doSomething"&gt; ... &lt;/a&gt;

&lt;!-- 약어 --&gt;
&lt;a @click="doSomething"&gt; ... &lt;/a&gt;

&lt;!-- 동적 전달인자와 함께 쓴 약어 --&gt;
&lt;a @[event]="doSomething"&gt; ... &lt;/a&gt;</code></pre>
<h3>v-if, v-show 차이</h3>
<p>v-if는 조건식이 맞지 않으면, html 블록 자체가 생성 되지 않는다. 그런데, v-show는 일단 html 블록은 생성 되지만, 조건에 따라 display를 이용하는 차이가 있다.</p>
<h3>어플리케이션 &amp; 컴포넌트 인스턴스</h3>
<p>모든 Vue 어플리케이션은 <code>createApp</code>함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작한다. </p>
<pre><code>const RootComponent = {}
const app = Vue.createApp({})
const vm = app.mount('#app')</code></pre>
<p>어플리케이션 인스턴스에 의해 노출된 대부분의 메소드들은 동일한 인스턴스를 반환하여 chaining을 허용한다.<br>다만, mount() 함수의 경우 어플리케이션을 반환하지 않고, 루트 컴포넌트 인스턴스를 반환 한다. </p>
<h3>라이프 사이클 훅</h3>
<p>각 컴포넌트는 생성될 때 일련의 초기화 단계를 거친다. 모든 라이프 사이클 훅에서는 Vue인스턴스를 가리키는 this context와 함께 호출 된다.</p>
<p>options 속성이나 콜백에서 <code>created: () =&gt; console.log(this.a)</code>와 같은 arrow function을 사용하지 않는다. 이유는 arrow function은 context를 function 내부로 한정 하기 때문에, this가 없어서 this를 parent scope까지 모두 찾다가 없으면 오류를 발생시킨다.</p>
<p><img src="https://v3.ko.vuejs.org/images/lifecycle.svg" alt="라이프 사이클 다이어그램"></p>
<h3>Data 속성 / Method</h3>
<p>컴포넌트의 data 옵션은 함수다. Vue는 새로운 컴포넌트 인스턴스 생성의 일환으로 data 함수를 호출한다. </p>
<pre><code>const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.$data.count) // =&gt; 4
console.log(vm.count)       // =&gt; 4</code></pre>
<p>새로운 속성을 <code>data</code>에 포함하지 않고 컴포넌트 인스턴스에 직접 추가할 수 있습니다. 하지만, 이렇게 추가한 속성은 반응형 <code>$data</code> 객체로 처리되지 않기 때문에 <a href="https://v3.ko.vuejs.org/guide/reactivity.html">Vue의 반응형 시스템</a>에 의해 자동으로 추적되지 않습니다.</p>
<p>컴포넌트 인스턴스에 메서드를 추가하려면 <code>methods</code> 옵션을 사용하세요. <code>methods</code> 옵션은 동작하기를 원하는 메서드들이 담긴 하나의 객체여야 합니다.</p>
<pre><code>const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this`는 컴포넌트 인스턴스를 참조합니다.
      this.count++
    }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // =&gt; 4

vm.increment()

console.log(vm.count) // =&gt; 5</code></pre>
<p>Vue는 <code>methods</code> 안에서 컴포넌트 인스턴스를 항상 참조할 수 있도록 <code>this</code> 값을 자동으로 바인딩합니다. 이렇게 하면 메서드가 이벤트 리스너나 콜백으로 사용될 때, 올바른 <code>this</code> 값을 유지하게 됩니다. 화살표 함수를 사용해서 <code>methods</code>를 정의하면 Vue가 적절한 <code>this</code> 값을 바인딩하지 못합니다. 따라서 <code>methods</code>를 정의할 때, 화살표 함수를 사용하지 않도록 합니다.</p>
<h3>Computed 속성 / watch</h3>
<pre><code>&lt;div id="computed-basics"&gt;
  &lt;p&gt;출판된 책:&lt;/p&gt;
  &lt;span&gt;{{ publishedBooksMessage }}&lt;/span&gt;
&lt;/div&gt;</code></pre>
<pre><code>Vue.createApp({
  data() {
    return {
      author: {
        name: '존 도우',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // computed getter
    publishedBooksMessage() {
      // 여기서의 `this` 는 vm 인스턴스이다.
      return this.author.books.length &gt; 0 ? '있음' : '없음'
    }
  }
}).mount('#computed-basics')</code></pre>
<p>computed 속성 대신에 메서드와 동일한 함수를 정의할 수 있습니다. 최종 결과를 위해, 두가지 접근 방식은 정확히 동일합니다. 그러나 차이점은 <strong>computed 속성은 반응형(reactive) 종속성에 기반하여 캐시된다는 것</strong> 입니다. computed 속성은 반응형 종속성 중 일부가 변경된 경우에만 재평가됩니다. 즉, <code>author.books</code> 가 변경되지 않는다면 <code>publishedBooksMessage</code> computed 속성에 대해 여러번 접근하더라도 함수를 다시 실행할 필요없이 이전에 계산된 결과를 즉시 반환합니다.</p>
<h4>Watch</h4>
<p>데이터 변경에 대한 응답으로 비동기 혹은 비용이 많이 드는 작업을 수행하려는 경우가 가장 유용합니다.</p>
<pre><code>&lt;!-- 이미 Ajax 라이브러리의 풍부한 생태계와 범용 유틸리티 메소드 컬렉션이 있기 때문에, --&gt;
&lt;!-- Vue 코어는 다시 만들지 않아 작게 유지됩니다. --&gt;
&lt;!-- 이것은 이미 익숙한 것을 선택할 수 있는 자유를 줍니다. --&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
  const watchExampleVM = Vue.createApp({
    data() {
      return {
        question: '',
        answer: '질문은 보통 물음표를 포합합니다. ;-)'
      }
    },
    watch: {
      // question 이 변경될 때마다, 이 함수가 실행될 것 입니다.
      question(newQuestion, oldQuestion) {
        if (newQuestion.indexOf('?') &gt; -1) {
          this.getAnswer()
        }
      }
    },
    methods: {
      getAnswer() {
        this.answer = '생각중...'
        axios
          .get('https://yesno.wtf/api')
          .then(response =&gt; {
            this.answer = response.data.answer
          })
          .catch(error =&gt; {
            this.answer = '에러! API에 닿지 못했습니다. ' + error
          })
      }
    }
  }).mount('#watch-example')
&lt;/script&gt;</code></pre>
            
</div></div>

Seungdols Company

seungdols

VueJS https://joshua1988.github.io/vue-camp/ https://v3.ko.vuejs.org/ http://www.yes24.com/Product/Goods/101926719 사용자 입력 
 {{ message }}
 Reverse Message 
 const EventHandl..            
카카오스토리
트위터
페이스북
'프로그래밍 > JavaScript' 카테고리의 다른 글
VueJS 학습 - TypeScript 사용  (0)
23:23:09
VueJS 학습 - Component  (0)
23:20:54
vuejs minimizer 설정 변경  (0)
2022.09.16
vite build 오류  (0)
2022.09.07
코드스피츠 77 - ES6+ 기초편 6회차  (Generator, Promise, Async/Await)  (0)
2022.04.27

VueJS 학습 - Basic

댓글