2018 050505 vuevuevue

by duckduck0054

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>06-16</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="//unpkg.com/[email protected]/lib/index.js"></script>
</head>

<body>
<div id="app">
  <div>
  <el-form class="demo-form-inline">
    <el-form-item label="Approved by">
      <el-input v-model="carName" placeholder="Approved by"></el-input>
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-input v-model="carName" placeholder="Approved by"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">Query</el-button>
    </el-form-item>
</el-form>
</div>
    
  <input type="text" v-model="carName" placeholder="사람이름 검색하시옹"/>
  <ul>
    <li v-for="(car, index) in cars" v-if="car.name.includes(carName)">
      {{car.name}}: {{car.brand}}
      <span class="close" v-on:click.stop="deleteTodo(index)">&#x00D7;</span>
    </li>
  </ul>
  <input type="text" v-model="car.name" placeholder="차 이름"/>
  <input type="text" v-model="car.brand" placeholder="차 브랜드"/>
  <button v-on:click="add">추가</button>
</div>
</body>
<script type="text/javascript">
const app = new Vue({
  el: '#app',
  data: {
    cars: [
      { name: '김병현', brand: '농구'},
      { name: '윤병희', brand: '축구'},
      { name: '조철현', brand: '기도'},
      { name: '김동현', brand: '게임'}
    ],
    car: {
      name: '',
      brand: ''
    },
    carName: ''
  },
  methods: {
    add () {
      this.cars.push(this.car);
      this.car = {};
    },
    deleteTodo : function(index) {
      this.cars.splice(index,1);
    }
  }
});

/*
이벤트 핸들러는 methods 속성에 선언하고, 이벤트 헨들러의 연결은 v-on 을 사용한다.
이벤트 핸들러 함수 안에서 뷰 데이터 모델을 참조할 때는 this 를 사용한다.
뷰에서는 자주 쓰이는 디렉티브 2개(v-on, v-bind)에 대해서 단축문을 제공하는데, v-on:은 @ 으로 축약할 수 있다.

이외에도 자주 호출하는 이벤트 인스턴스 함수들에 대해서도 단축문을 제공하고 있다.

<!-- 클릭 이벤트 전파가 중단됩니다 -->
<a v-on:click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드 하지 않습니다 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 수식어는 체이닝 가능합니다 -->
<a...

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");