qwef

컴포넌트에 대한 깔끔한 형태로 해 준 {{ count }} / {{ doubleCount }} {{ message }} / {{ reversMessage }} import {ref, computed} from 'vue'; export default{ setup(){ const message = ref('Hello World!!!'); const reversMessage = computed( ()=>{ return message.value.split('').reverse().join(''); }); const count = ref(0); const doubleCount = computed(()=>{ return count.value * 2; }); function increase(){ count.value..

refs 는 말 그대로 주소를 지정해서 접근할 수 있도록 해 주는 거임. 이렇게 ref를 지정해 주고, 저게 접근할 수 있는 이름이 됨. import HelloWorld from './components/HelloWorld.vue'; export default{ components:{ HelloWorld }, mounted(){ console.log(this.$refs.hello); } } 이렇게 this.$refs.이름 해서 접근 가능함. 저 $refs.hello에는 굉장히 많은 정보가 담겨져 있는 객체임. 내부의 요소에 접근하고 싶으면 console.log(this.$refs.hello.$el); 저렇게 뭐 최상위로 Handler, Target, isRevoked 등 객체와 값들이 있음. 어.. 그러..

Provide -> Inject 이렇게 전달되는 거임. 일종의 provide에 넣으면 전역변수라고 생각하면 됨. 그리고 inject 해서 받을 거 선택할 수 있음. export default{ data(){ return { message:'Hello Vue!!!' } }, provide(){ return { msg : this.message, msgByApp : "안녕하세요." } } } 이렇게 provide()는 함수로 씀. msg, msgByApp이 전역변수 되는 거랑 비슷하게 보면 됨. 근데, 무작정 전역변수가 아니라 가져와야 됨. 일종의 공유통? {{ msg }} export default{ inject : [ 'msg' ] } 이렇게 '전역변수이름' 해서 받아서, 그 이름 그대로 쓰면 됨. 배열..

이벤트 자체를 하위 컴포넌트에 넘길 수 있다. 예를 들어 aaa import MyBtnComponent from './components/MyBtnComponent.vue'; export default{ components:{ MyBtnComponent }, methods:{ log(){ console.log("Clicked."); } } } 이렇게 상위컴포넌트에서 MyBtnComponent에게 클릭이벤트를 추가시켰다. 근데 MyBtnComponent에서 click event export default{ emits:[ 'click' ] } 저렇게 emits의 'click' 이벤트를 받아 놓으면, 그러니까.. 상위 컴포넌트의 클릭이벤트 log가 콜백함수로 전달 된 거다. 그 다음, h1에 클릭이벤트로 그 ..

이렇게 최상위 요소 2개로 하지 마셈. 최상위 요소는 하나만 두셈. template 자체는 그냥 그룹핑 하는 거지 html 태그가 아님. 그래서 실제로 랜더링 될 때는 저 template 벗겨지면서 template, vue에서는 다른 컴포넌트에서 불러올 때 저기에 막 속성도 주고 그랬는데, html에서는 저게 벗겨지면서 최상위 요소로 상속되는데, 최상위 요소가 여러개면 상속이 안됨. 근데, 아예 외부에서 지정해주는 속성이나 props나 받기 싫으면 export default{ inheritAttrs : false } 이렇게 inheritAttrs를 false로 해주면 상속받지 않음. 뭔가 상속받은 걸 쓰고 싶다 $attrs 객체로 쓰면 됨. $attrs.class $attrs.style 아니면 v-bin..

qwevdasdf 얘를 들어 다른 컴포넌트에서 저 MyBtnComponent에 저렇게 줬다면 MyBtnComponent에서 저 안에 있는 값을 하면 가져올 수 있음. 참고로, 태그도 들어감 asdf 태그 다 적용 됨. 참고로, 만약 MyBtnComponent에서 h1에 대한 스타일을 지정했는데, style 범위를 scope로 했으면 h1 스타일 적용 안됨. 저 h1은 저렇게 h1 넣어준 컴포넌트에서 스타일 줘야 함. 아니면 글로벌 스타일을 찾겠지. h1은 저거 넣어준 컴포넌트 꺼라고 생각하면 됨. 또, 저렇게 뿐만 아니라 slot 여러 개 줄 수 있음. {B} Banana 저렇게 template로 묶은다음에 v-slot:슬롯이름 하면 됨. 쓸 때는 MyBtnComponent에서 연결 됨. 이러면 이제 바..

:class="변수" 하면 받을 수 있다. 그게 class가 된다. 그리고, data(){ on:false } 이런 식으로 있을 때, :class="on" 했을 때, 저게 true면 class에 on이 들어가는 거다. 그래서 다른 컴포넌트에서 저 컴포넌트한테 :on = "isOn" 등 해서 true false 등을 동적으로 할당할 수 있다. (물론 같은 컴포넌트에서 on 바꿀 수도 있음) 만약 스타일에 변화를 주고 싶다면 원래 하던 것 처럼 btn.on {} 이런 식으로 on 됐을 시 스타일을 주면 된다. 참고로, 외부에서 class="appClass" 이렇게 부여할 수도 있는데, 이러면 저 컴포넌트의 클래스에 추가하는 거임.

이렇게 가능. 이렇게 하면 input의 값이 바뀔때 마다 실행됨. 근데 methods:{ handler(e){ console.log(e.target.value); } } 이렇게 value 가져올려면 e.target.value로 해야 함. 여러 input의 이벤트에 반응하기 위해 공통적인 것만 대략적으로 가져온 듯. e.value는 따로 안만들어 놨음. 이런 식으로도 가능 $event는 약속임. $e 이런 거 안됨. 이렇게 하면, 저 target의 value가 msg라는 변수와 연결됨. data(){ return{ msg : 'Hello Vue Input' } } 이것과 연결됨. data(){ return{ isChecked:false } } data(){ return{ isChecked:false } }..

이렇게도 가능 @이벤트명 바로 줌 @click @keydown 또, 이렇게도 가능 엔터 눌렀을 때만 이벤트 실행

@wheel.passive 부드럽게 차례대로 처리되는? 동기화 시키는? 스크롤이 부드러워짐. 이거 원리는 javascript에 이벤트리스너 passive에 정리.