Frontend/Vue8 [Vue] Watch 속성 1 Watch 속성 computed속성 vs watch 속성 watch를 사용했을 때보다 computed를 사용했을 때 코드가 더 짧다. 최대한 computed 속성을 우선적으로 사용하고 불가피할때 watch를 사용하는 것이 좋다. watch 속성 {{message}} Click {{updated}} 결과값 : 클릭 이벤트 후 : 2021. 9. 12. [Vue] Computed 속성 1 computed 속성 너무 많은 연산을 템플릿 안에서 사용하면 코드가 비대해지고 유지보수가 어렵다. {{ message.split('').reverse().join('') }} 결과값 : 요세하녕안 위와 같이 긴 연산자는 computed로 처리해줄 수 있다. {{ reverseMessage }} 결과값 : 요세하녕안 computed로 처리해줄 때는 함수와 달리 {{ }} 중괄호 안에 computed의 이름만 넣어주면 된다. 그래서 이때 드는 의문은 '그냥 함수로 처리해주면 되는거 아닌가?' 라는 생각이 든다. {{ reverseMessage() }} 함수로 처리해주면 함수를 실행시키기 위해 이름 뒤에 ()소괄호만 넣어주면 똑같이 실행된다. 그렇다면 computed와 methods의 차이는 뭘까? co.. 2021. 9. 12. [Vue] 데이터 양방향 바인딩 (Data Two Way Binding - v-model) 1 데이터 양방향 바인딩 텍스트를 입력했을 때 미리보기(양방향 바인딩) {{text}} Submit 결과값 : @keyup 은 v-on:keyup을 골뱅이를 통해 표현할 수 있다. input 내에서 keyboardevent가 일어나며 console.log를 통해 확인했을 때 target-value 값이 input 안의 내용임을 알 수 있었다. 그래서 text 객체를 event.target.value값과 데이터바인딩을 시켜주면 input에 문자를 쳤을 때 {{text}}의 값이 똑같이 입력되는것을 볼 수 있다. 그런데 이러한 양방향 바인딩 과정을 더 쉽게 표현할 수 있다. 그것이 바로 v-model...! {{text}} Submit 결과값 : 2021. 9. 12. [Vue] 이벤트(Event) 1 이벤트 이벤트란? Click Me 보통 자바스크립트로 줄 때는 이런 형식으로 이벤트를 줄 수 있다. 그렇다면 뷰에서는?? Click Me 결과값 : v-on: 지시어를 이용해서 자바스크립트 이벤트를 사용할 수 있다. 2 이벤트 응용 버튼을 누르면 숫자에 1씩 더하고 뺄 수 있는 이벤트 {{year}} 더하기 빼기 결과값 : 클릭 이벤트를 이용해서 plus 함수를 눌렀을 때는 년도가 올라가고 minus 버튼을 누르면 년도가 내려가도록 이벤트를 설정할 수 있다. 제출했을 때 알림창으로 'submitted!'를 알려주는 이벤트 Submit 결과값 : 3 이벤트 수식어 event.preventDefalut() 같은 메서드를 사용해줄 때 수식어를 이용할 수 있다. v-on:click.prevent 인사하다 무.. 2021. 9. 12. [Vue] 데이터 바인딩(Data Binding) 1 데이터 바인딩 속성 앞에 v-bind: or :(콜론)을 붙여주면 데이터바인딩이 가능하다. 결과값 : value 값에 inputdata 객체 데이터를 연결시킬 수 있다. 이때 value 속성 값 앞에 v-bind를 적어주면 연결이 가능하다.(or 콜론(:)) 데이터바인딩을할 때 함수를 이용하면 더욱 편리하다. 유튜브 플레이리스트로 이동 유튜브 감성플레이리스트로 이동 link 객체에 유튜브 주소를 설정한 뒤 getYoutubeChannel이라는 함수에 유튜브 주소 뒤에 매개변수를 설정해준다. 그래서 app에서 a링크의 href="" 주소 안에 getYoutubeChannel(유튜브 채널 뒷부분 주소') 인자를 주게되면 해당 유튜브 채널의 링크가 완성된다. 결과값 : 2021. 9. 12. [Vue] 데이터(data), 메소즈(methods) 1 data(데이터) {{person.name}} {{person.age}} 결과값 양세찬:22 2 mothods(메소드) {{nextYear()}} methods 안에 함수를 삽입할 수 있으며 {{ }} 더블 중괄호 안에 함수를 실행시켜줄 수 있다. 결과값 : 양세찬은 내년에 22살 입니다. {{nextYear('안녕')}} 결과값 : 안녕! 양세찬은 내년에 22살 입니다 2021. 9. 12. 이전 1 2 다음 반응형
