[Vue.js] Vue instance & Directives

35857 단어 webvuevue

🙊 Vue.js

  • html tag 기반의 구조를 동적 처리가 가능한 framework

  • 뷰는 설치 없이 script 태그로 바로 사용할 수 있다 (감동)

🔵 Vue CDN

<!-- head에 추가 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>


🙊 Vue Instance

모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작.

var vm = new Vue({
  // 옵션
})
var example1 = new Vue({
    // element의 약어 속성으로 tag를 지정
    // 설정한 tag에 Vue 객체를 매핑하겠다는 설정

    // el 속성에 매핑된 html 영역에 사용될 데이터 설정 부분
    el: '#example-1',
    data: {
        // items는 사용자 정의 임의 설정
        items: [
            { message: 'Foo' },
            { message: 'Bar' },
            { message: 'Test'}
        ]
    }
});



🙊 v-directive

  • 👍 jsp는 불필요하게 하는 요인 (나는 jsp가 싫다)

  • jsp가 아니어도 ajax + vue.js 적절히 활용하면 현 시점의 트렌드의 적합한 개발 구조

Commonly used directives ( + examples)

🔵 v-for

<body>

  <ul id="example-1">
    <li v-for="item in items">
      {{ item.message }}
    </li>
  </ul>
  
  <script>
    var example1 = new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' },
          { message: 'Test'}
        ]
      }
    });
  </script>
</body>



🔵 v-bind

<body>
    
    <h3>[1] v-bind 속성</h3>
    <div id="app1">
        <input type="text" v-bind:value="message">
    </div>

    <script>
        let model1 = {
            message : "v-bind 학습",
            link : "http://www.google.com"
        }

        new Vue({
            el : "#app1",
            data : model1
        });
    </script>

    <br><hr><br>

</body>
<input type="text" v-bind:value="message">
  • 데이터를 가져올 수는 있지만 input 에 작성한 새로운 value는 Vue 객체를 업데이트 하지 않는다
<a :href="link">구글</a>
  • v-bind 를 생략하고 :로만 작성 가능



🔵 v-model

<body>

    <h3>[2] v-model 속성</h3>
    <div id="app2">
        <input type="text" v-model="message">
        메세지 : <span v-text="message"></span>
    </div>

    <script>
        let model2 = {
            message : "v-model 학습",
            link : "http://www.google.com"
        }

        new Vue({
            el : "#app2",
            data : model2
        });
    </script>

</body>
  • 데이터를 가져올 수는 있고 input 에 작성한 새로운 value는 Vue 객체 실시간 업데이트
  • Vue 영역 안에서 JS 데이터간에 실시간 양방향 소통 작업 수행
  • view 영역 수정해도 JS 데이터(model)도 자동 수정
  • v-text 로 업데이트 된 데이터 실시간 출력



🔵 예제: select

<body>
	<div id="app3">
        <label for="cars">Choose a car:</label>

        <select name="cars" id="cars" v-model="car">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>

        <br>

        <p v-text="car"></p>
    </div>

    <script>
        // select에서 선택한 value 활용
        let model3 = { car : "" };

        new Vue({
            el : "#app3",
            data : model3
        });
    </script>
</body>



🔵 실습 예제:

<body>
  <h3> 제시된 Ui와 화명구성하기</h3>
  <br>
  <div id="pick">
    <label for="grade">1. 학년선택:</label>
    <select id="grade" v-model="grade">
      <option value="1학년">1학년</option>
      <option value="2학년">2학년</option>
      <option value="3학년">3학년</option>
    </select>
    <br><br>

    2. 수강과목선택:</label><br>
    <input type="checkbox" id="subject" value="국어" v-model="subject">국어<br>
    <input type="checkbox" id="subject" value="영어" v-model="subject">영어<br>
    <input type="checkbox" id="subject" value="수학" v-model="subject">수학<br>
    <br>

    3. 이름입력:</label><br>
    <input type="text" v-model="inputName">
    <br>
    <hr color='blue'><br>
  </div>

  4. 정보출력 <br>
  <div id="display">
    <li>학년 : {{grade}}</li>
    <li>수강과목: {{subject}}</li>
    <li>이름: {{inputName}}</li>
  </div>
  <script>
    let model = { grade: "", subject: [], inputName: "" }
    new Vue({
      el: "#pick",
      data: model
    })
    new Vue({
      el: "#display",
      data: model
    })
  </script>
</body>
  • checkbox 의 value를 model데이터에서 배열데이터인 subject의 append
  • 다른 el 값을 가진 같은 Vue 인스턴스를 사용해 I/O 구분
  • {{vueInstanceValue}} - 데이터 바인딩의 가장 기본 형태


result:

matplotlib 그래프 그리기
Q2) Window 토끼를 찾아라

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage