Heestory

Vue 정리1 본문

개발(~국비)/Vue.js

Vue 정리1

까만밀가루 2022. 8. 5. 19:07

국비 내용 정리

 

 

DAY01
1.체크박스 클릭시 이미지 보이게
2.select 구문의 option 선택시 해당 이미지 보이게 
3.버튼 클릭시 이미지 변경
4.배열 메소드
5.css 적용하기
6.computed

test03. : 클릭시 이미지 보이게 & 안 보이게 하기

CheckBox의 type : true, false 로 구분 

v-show : true,false에 따라 보여질지 결정

<body>
  <div id="app">
    <img :src="img1" v-show="check">
    <input type="checkbox" v-model="check">
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        img1: 'images/1.png',
        check: false
      }
    })
  </script>
</body>

-> 체크박스 클릭시 이미지가 보인다.

 

test07. select, option 사용 : 옵션 선택시 사진 변하기 & ref 속성

[자식 요소에 JavaScript를 이용해 직접 접근해야 하는 경우가 있습니다. 이 경우, ref 속성을 이용해 레퍼런스 ID를 자식 컴포넌트나 HTML 요소에 부여함으로써 직접 접근할 수 있습니다.$refs는 컴포넌트가 렌더링 된 후에 존재하게 됩니다. 해당 속성은 자식 요소에 직접 접근하기 위해서만 사용되어야 합니다. 즉, 템플릿이나 computed 속성에서 $refs에 접근해서는 안됩니다.] 

https://v3.ko.vuejs.org/guide/component-template-refs.html

 

템플릿 refs | Vue.js

템플릿 refs 이 페이지는 여러분이 이미 컴포넌트 기초를 읽었다고 가정하고 쓴 내용입니다. 컴포넌트가 처음이라면 기초 문서를 먼저 읽어주시기 바랍니다. 비록 props와 이벤트가 존재하지만,

v3.ko.vuejs.org

 

<body>
  <div id="app">
    <select v-model="image">
      <option v-for="(img,index) in images" :key="index">
        {{img}}
    </select>
    <img v-bind:src="image"><br>  <!-- select와 이중 바인딩 -->
    <button @click="changeimg">이미지 변경</button>
    <img :src="images/3.png" ref="img1"> <!-- 바로 바인딩 -->
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        image: "images/1.png",
        images: [
          'images/1.png',
          'images/2.png',
          'images/3.png'
        ]
      },
      methods: {
        changeimg() {
          this.$refs.img1.src = "images/4.png";
        }
      }
    })
  </script>
</body>

 

select에서 처음 보일 사진을 바인딩,

option은 배열 구문으로 돌림 (v-for 이용)

 

test08.list렌더링 :  배열 속 리스트를 추가 및 삭제

https://kr.vuejs.org/v2/guide/list.html

 

리스트 렌더링 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

#.관련 변이 메소드 : 호출된 원본 배열을 변형

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

#.배열 대체 : 원본 배열을 변형하지 않고 새 배열로 반환

  • filter()
  • concat()
  • slice()
<body>
  <div id="app">
    <ul>
      <li v-for="m in mems" :key="m.id">아이디:{{m.id}},이메일:{{m.email}}</li>
    </ul>
    <button @click="addMem">회원추가</button>
    <button @click="delMem">회원삭제</button>
  </div>
  <script>
    var user=[
      {'id':'ddd','email':'ddd@test.com'},
      {'id':'eee','email':'eee@test.com'},
      {'id':'fff','email':'fff@test.com'}
    ];
    new Vue({
      el:"#app",
      data:{
        mems:[
        {'id':'aaa','email':'aaa@test.com'},
        {'id':'bbb','email':'bbb@test.com'},
        {'id':'ccc','email':'ccc@test.com'}
        ],
        index:0
      },
      methods:{
        addMem(){
          this.mems.push(user[this.index++ % user.length]);  /* 나머지 이용 */
        },
        delMem(){
          this.mems.splice(0,1); /* 배열의 0번쨰에서 1개 삭제 */
        }
      }

    })
  </script>
</body>

 

 

test09_css

<body>
  <div id="app">
    <img src="images/1.png" :class="style1"> <!-- "'myimg'"-->
    css 적용 <input type="checkbox" name="" id="" v-model="check"><br>
    <img src="images/2.png" :class="check?'myimg':''"> <!--"check?style1:''"-->
    <img src="images/3.png" v-show="check"> <!--display:none으로 처리됨-->
    <img src="images/4.png" v-if="check"> <!--html에서 주석으로 처리됨-->
    <img src="images/5.png" :class="style2" v-on:mouseover="changecolor" v-on:mouseout="originalcolor"><br>
    <img src="images/6.png" alt="" :style="{'width':w + 'px' ,'height' : h +'px'}">
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
       style1:'myimg',
       check:true,
       style2 :'myimg',
       w:200,
       h:300
      },
      methods: {
    changecolor() {
      this.style2 = 'myimg'; /*변수의 경우 backgroundColor불가 */
    },
    originalcolor() {
      this.style2 = '';
    }
  }
    });
  </script>
</body>

 

test10_computed

:복잡한 로직에서 사용, 메소드와 같은 함수를 정의

종속 대상을 따라 저장(캐싱)된다. 해당 속성이 종속된 대상이 변결될 때만 함수를 실행 

#.캐싱 : 잠시 저장해둠

(메소드로 호출시엔 렌더링을 할 때마다 항상 함수를 실행)

일반적으로 getter 함수를 가지지만, 필요한 경우 setter함수를 만들 수 있다.

getter : 확인 된 값을 가져올 때 /setter : 값을 설정 및 변경할 때

->사용 예제

https://kyounghwan01.github.io/blog/Vue/vue/getter-setter/

 

vue computed getter, setter 예제

vue computed getter, setter 예제

kyounghwan01.github.io

 

 

created

인스턴스가 작성된 후 동기적으로 호출됨.

부모,자식 관계의 컴퍼넌트가 렌더링 될때 mounted보다 먼저 호출되며 부모,자식순으로 실행한다.

데이터 초기화 선언을 created에서 많이 한다.

가상돔을 건드릴 수 없음($el 속성을 아직 사용할 수 없음)

mounted

부모,자식 관계의 컴퍼넌트가 렌더링 될때 created다음으로 호출되며 자식,부모순으로 실행한다.

el이 새로 생성된 vm.$el로 대체된 인스턴스가 마운트 된 직후 호출됨.(가상돔 조작이 가능)

돔조작관련을 mounted영역에 기술함.

<body>
  <div id="app">
    <ul>
      <li v-for="(list,index) in list" :key="index">
        {{list.name}}:{{list.price}}
      </li>
    </ul>
    가격이 <input type="number" min="0" step="100" v-model.number="price"> 이상인 과인 검색  <!-- 100 단위 올라가게 100, 최소값이 0 -->
    <h1>검색된 정보</h1>
     <ul>
      <li v-for="item in slist"> {{item.name}}:{{item.price}}</li> 
     </ul>
  </div>
  <script>
    new Vue({
    el:"#app",
    data:{
      list:[
        {"name":"바나나","price":100},
        {"name":"포도","price":1000},
        {"name":"수박","price":500},
        {"name":"사과","price":300},
      ],
      price:0 /* v-model.number */
    },
    mounted:function(){
      let arr=this.list.filter(function(e){   /* 조건에 맞는 것을 배열로 담아준다 */
        return e.price>=500;
      });
      for(let a=0;a<arr.length;a++){
        console.log(arr[a] + "," + arr[a].name + "," + arr[a].price);
      }

      let arr2=this.list.map(function(e){   /* 리턴된 요소들을 배열로 담아준다 */
        return e.price ; /* 가격만 얻어옴 */
      });
      for(let a=0;a<arr2.length;a++){
        console.log(arr2[a]);
      }
    },
    computed:{ 
      slist:function(){
        //computed는 종속된 속성이 변결될 때마다 호출된다. , 실시간 조건
        return this.list.filter(function(e){
          return e.price>=this.price;
        },this);
      }
    }
   });
  </script>
</body>

filter : 조건에 맞는 것을 배열로 담는다 return 조건

map : 리턴된 요소들을 배열로 담는다. return 요소

 

'개발(~국비) > Vue.js' 카테고리의 다른 글

Vue 정리  (0) 2022.08.05
A complete log of this run can be found in: 에러  (0) 2022.07.29
'개발(~국비)/Vue.js' Related Articles more