v-if /v-for/ v-on event

<template>
  <div>
  dummy

   <p v-if="3<1">hello1</p>
 <!--렌더링안됨-->
   dummy
   <hr>
   dummy
   <p v-show="num>=num2">hello2</p>
   dummy
   <hr>

   <p v-if="num>num2&& 3==3">hello3</p>
   <p v-show="num<num2&& 3==3">hello4</p>
 </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
   //mesg:String
  },
  data: function(){
    return{
     num:10,
     num2:5
    }
  }
  
}
</script>

<style>

</style>

 

<template>
  <div>
  <h1>{{ amount }}</h1>


   <input type="text" v-model="amount"> 
<span  v-if="amount<100">100보다 큰 값만 입력 가능</span>
<span  v-if="amount>=100">정상적으로 입력</span>
 
 </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
   //mesg:String
  },
  data: function(){
    return{
    amount:0
    }
  }
  
}
</script>

<style>

</style>

directive05_exam5

 

<template>
  <div>
  <h1>exam</h1>


이름:   <input type="text" v-model="username"> 
<span  v-if="username.length>4">이름은 4글자</span>
<span  v-if="amount>=100">정상적으로 입력</span><br>
나이: <input type="text" v-model="age">
<span  v-if="age>10&&age<=120">10살보다 크거나 120살보다 작은 값만 입력가능</span> 

 <hr>
 이름길이 :{{ username.length }}, 나이: {{ age }}
 </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
   //mesg:String
  },
  data: function(){
    return{
    username:"",
    age:""
    }
  }
  
}
</script>

<style>

</style>

elseif

<template>
  <div class="hello">
점수:<input type="text" v-model.number="grade"/><br>
점수는: {{ grade }}<br>
<p v-if="grade>90">A학점</p>
<p v-if="grade>80">B학점</p>
<p v-if="grade>70">C학점</p>
<p v-else>F학점</p>


  </div>
</template>

<script>

export default {
  name:'HelloWorld',
  props:{
msg:String
  },
  data:function(){
    return{
      grade:50
    }
  }

}
</script>

<style>

</style>

 

 

<template>
  <div>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld';
export default {
components:{
  HelloWorld
}
}
</script>

<style>

</style>

 

 

<template>
  <div>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld';
export default {
components:{
  HelloWorld
}
}
</script>

<style>

</style>

 

v-for array

<template>
  <div class="hello">
{{ names }}
<!--v-for 의 배열의 경우 사용-->
<!--v-for ="context in contexts"  v-bind:key="유일값"-->
<!--v-for="(contect, index ) in 객체 " :key="유일값"-->
<h1>index 없이</h1>
<ul>
<li v-for="name in names" :key="name">-
  <!--<li v-for="name in names">-->
    <!--key 값 바인드 없이 출력가능-->
{{ name }}
</li>

</ul>
<h1>index 지정</h1>
<ul>
  <li v-for="(name, index) in names" v-bind:key="index">
    {{ index }}: {{ name }}

  </li>
</ul>
  </div>
</template>

<script>

export default {
  name:'HelloWorld',
  props:{

  },
  data:function(){
    return{
      names:["홍길동","이순신","유관순"]
    }
  }

}
</script>

<style>

</style>

v-for (img, select,div 그룹핑

img-bind

<template>
  <div id="app">
    
    <BookList v-bind:bookList="list"/>
  </div>
</template>

<script>
import BookList from './components/BookList';

export default {
  name: 'App',
  components: {
    BookList
  },
  data:function(){
    return{
      list:[
{
  id:"p01",name:"위험한 식탁",price:1000, date:"20170401", img:"a"
},
{
  id:"p02",name:"공부의 비결",price:3000, date:"20170402", img:"b"
},
{
  id:"p03",name:"오메르타",price:4000, date:"20170403", img:"c"
},
{
          id:"p04", name:"행복한 여행", price:5000, date:"20170404", img:"d"
        },
        {
          id:"p05", name:"해커스 토익", price:6000, date:"20170405", img:"e"
        },
        {
          id:"p06", name:"도로 안내서", price:7000, date:"20170406", img:"f"
        }

      ]
    }
  }
}
</script>

<style>

</style>
./components/BookList.vue

 

 

<template>
  <div>
    BookList
    <h1>도서목록 {{bookList.length}}</h1>
<ul>
  <li v-for="book in bookList" v-bind:key="book.id">
    <!--v-ind:key="유일값"-->
<img v-bind:src="require(`@/assets/image/${book.img}.jpg`)" width="100">
<!--이미지 경로가 src/assets/images/IMG1.png 일때
vue 에서는 @/assets/images/IMG1.png 로 src를 절대경로로 사용할 수 있다.-->
{{ book.name }}
  </li>
</ul>
  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
    bookList:Array
  
  }
}
</script>

<style>

</style>

<li v-for="(value,key) in person " v-bind:key="key">

<template>
  <div>
    HelloWorld
    <!--v-for 객체의 경우 사용-->
    <!-- v-for ="(value. key) in 객체" v-bind:key="유일값"-->
    <!-- v-for ="(value, key, index) in 객체 ":key= "유일값"-->
    <h1>객체의 사용</h1>
    <ul>
      <li v-for="(value,key) in person " v-bind:key="key">
      {{ key }}:{{ value }}
    </li>

    </ul>
    <h1>객체의 사용2</h1>
    <ul>
      <li v-for="(value,key,idx) in person " v-bind:key="idx">
      {{ idx+1  }} :{{ key }}:{{ value }}
    </li>
    </ul>
    <table border="1">
        <tr v-for="(value,key,idx) in person" v-bind:key="idx">
        <td>{{idx+1}}</td>
        <td>{{ key }}</td>
        <td>{{ value }}</td>
        </tr>
    </table>
  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
  
  },
  data:function(){
    return{
      person:{
        name:"홍길동",
        age:10,
        address:"서울"
      }
    }
  }
}
</script>

<style>

</style>

 

 

v-for select

 

<template>
  <div>
    <!--v-for 객체의 경우 사용-->
    <h1>과일 선택</h1>
    <select v-model="result">
<option v-for="(value, key) in fruits" v-bind:key="key">{{ value }}</option>

    </select>
    <br>
    선택한 과일은 :{{ result }}
  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
   
  },
  data:function(){
    return{
      fruits:{
        apple:"사과",
        banana:"바나나",
        melone:"멜론"
      },
      result:""
    }
  }
}
</script>

<style>

</style>

<template>
  <div>
    <h1>1. 기본</h1>
    <div v-for="(name, idx) in names" v-bind:key="idx">
    {{ name }}님
    </div>
    <hr>
    <h1>2.div 태그로 그룹핑: div 태그가 흔적으로 남음</h1>
  <div v-for="(name, idx) in names " v-bind:key="idx+10">
  <span>{{ name }} 님</span>
  </div>
  <h1>3. template태그 그룹핑: template 태그가 흔적으로 안남음</h1>
  <div class="hello">
<template v-for="(v, i) in names">
<span :key="i+100">{{ v }}님</span>
</template>

  </div>
  <h1>4. </h1>
  <div>
    <span v-for="(v, i) in names" :key="i+1">{{ v }}</span>
  </div>
  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
   
  },
  data:function(){
    return{
      names:["홍길동","이순신","유관순"]
    }
  }
}
</script>

<style>
h1{
  color: red;
}
</style>

v-on event

 

<template>
  <div>
    <h1>v-on이벤트명="처리함수" 또는 @이벤트명="처리함수"</h1>
    <button v-on:click="handleEvent">v-on:click</button>
    <button @click="handleEvent">@click</button>
    <button v-on:click="xxx('홍길동')">v-on:click="xxx('홍길동')"</button>
    <button @click="xxx('홍길동')">@click="xxx('홍길동')"</button>
    <button @click="xxx2('홍길동',$event)">@click="xxx2('홍길동',event)"</button>
<!--$event 사용 주의
속성을 이용한 데이터 전달시 속성이름에 data-를 시용
함수에서는  data- 를 제외한 부븐을 사용하게 됨 dataset 으로 확인
-->
<button v-on:click="handleEvent2"
data-my="aaa"
data-my2='{"name":"홍길동", "age":"20"}'
>속성을 이용한 데이터 전송
</button>
<button v-on:click="handleEvent3"
data-my="bbb"
data-my2='{"name":"유관순", "age":"30"}'>
handleEvent3
</button>
<!--문자열로 만들기 위해 '{"name":"홍길동", "age":"20"}' 주의-->
  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
    
  },
  data:function(){
    return{
      num:10
    }

  },
  methods:{
    handleEvent:function(e){
      console.log("handleEvent=====",e);
    },
    xxx:function(e){
      console.log("xxx====",e)
    },
    xxx2:function(data,e){
      console.log("xxx2====",data,e)
    },
    handleEvent2:function(e){
      console.log("handleEvent2=====",e);
      console.log(e.target);
      //this.data-my는 안됨
      console.log(this);
      console.log(e.target.dataset);
      console.log(e.target.dataset.my);
      console.log(e.target.dataset.my2);
      console.log(e.target.dataset.my2.name); //문자열이므로 undefined
      var data=JSON.parse(e.target.dataset.my2);
      console.log(data.name, data.age);
    },
    handleEvent3:function(e){
      var data=JSON.parse(e.target.dataset.my2);
console.log(data.name, data.age);
    }
  }
}
</script>

<style>

</style>

directive07_v_for3_template2_v_once

<template>
    <div>
        기본 : <span>{{ username }}</span><br>
        v-once1 : <span>{{ username }}</span><br>
        v-once2 : <span v-once>{{ username }}</span><br>
        {{ changeName() }}
        <!-- changName() 주석으로 막으면 다 홍길동으로 나옴 -->
    </div>
</template>

<script>
export default {
props:{},
data:function(){
    return{
        username:"홍길동"
    }
},
methods:{
    changeName:function(){
        this.username="이순신";
    }
}
}
</script>

<style>

</style>

 

 

 

 

 

 

v_model_v_for

map 쓰는 방법

<template>
    <div>
        <h1>도서목록{{ msg }}</h1>
        <div v-for="(book, idx) in booklist" :key="idx">
        <input type="checkbox" v-model="books" v-bind:value="book">
    {{ book.name }}
    <span>{{ book.price }}</span>    
    </div>
    <hr>
    선택교재:
    <div v-for="(book, i) in books" :key="i+100">
    <span>{{ book.name }}</span>
    </div>
    <hr>
전가격:{{ getTotal() }}

  </div>
  </template>
  
  <script>
  export default {
    
    props:{
      msg:String
    },
    data:function(){
      return{
      booklist:[
{name:"자바의 정석",price:3000
},
{name:"jsp 정석",price:4000
},
{name:"spring 정석",price:5000
},
{name:"jquery 정석", price:5000
},
{name:"angular 정석", price:7000        }
        


      ],
      books:[], //선택된 책 목록 저장
      total:0 //총액
    }
      
  
    },
    methods:{
     getTotal:function(){
        var sum=0;
        var totalbook =this.books;
        totalbook.map(
            function(ele,idx){
                console.log(idx, ele,name, ele.price);
                sum= sum+ele.price;
            }
        );
        this.total=sum;
        console.log(this.data);
        return this.total;
     }
    }
  }
  </script>
  
  <style>
  
  </style>

for 로 쓰기

 

<template>
    <div>
        <h1>도서목록{{ msg }}</h1>
        <div v-for="(book, idx) in booklist" :key="idx">
        <input type="checkbox" v-model="books" v-bind:value="book">
    {{ book.name }}
    <span>{{ book.price }}</span>    
    </div>
    <hr>
    선택교재:
    <div v-for="(book, i) in books" :key="i+100">
    <span>{{ book.name }}</span>
    </div>
    <hr>
전가격:{{ getTotal() }} /{{ total }}

  </div>
  </template>
  
  <script>
  export default {
    
    props:{
      msg:String
    },
    data:function(){
      return{
      booklist:[
{name:"자바의 정석",price:3000
},
{name:"jsp 정석",price:4000
},
{name:"spring 정석",price:5000
},
{name:"jquery 정석", price:5000
},
{name:"angular 정석", price:7000        }
        


      ],
      books:[], //선택된 책 목록 저장
      total:0 //총액
    }
      
  
    },
    methods:{
     getTotal:function(){
        var sum=0;
    //    var totalbook =this.books;
        // totalbook.map(
        //     function(ele,idx){
        //         console.log(idx, ele,name, ele.price);
        //         sum= sum+ele.price;
        //     }
        // );
for (let index = 0; index < this.books.length; index++) {
let b = this.books[index];
console.log(b.price);
sum+= b.price;  
}
        this.total=sum;
        console.log(this.total);
        return this.total;
     }
    }
  }
  </script>
  
  <style>
  
  </style>

 

 

<template>
  <div id="app">
    <bookList msg="BookList view<"/>
  </div>
</template>

<script>
import bookList from './components/BookList'

export default {
  name: 'App',
  components: {
    bookList
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

watch

<template>
  <div class="hello">
    <h1>watch 속성</h1>
  값:<input type="text" v-model="num"><br>
  변경된 값: {{ num }}

  </div>
</template>

<script>
export default {
 
  props:{
    
  },
data:function(){
  return{
    num:10 //watch 사용시 변수명과 함수명은 동일해야함
  }
},
//1. watch 함수명과 속성변수명이 동일해야함
//2. method 와 computed는 명시적으로 호출해야 하지만 
//3. watch는 자동으로 호출됨
watch:{
  num:function(changeValue){
    console.log("watch 함수 실행",this.num,'\t',changeValue);
  }
}
}
</script>

<style>

</style>

watch-2

 

<template>
    <div>
        <h1>도서목록{{ msg }}</h1>
        <div v-for="(book, idx) in booklist" :key="idx">
        <input type="checkbox" v-model="books" v-bind:value="book">
    {{ book.name }}
    <span>{{ book.price }}</span>    
    </div>
    <hr>
    선택교재:
    <div v-for="(book, i) in books" :key="i+100">
    <span>{{ book.name }}</span>
    </div>
    <hr>
<!-- //전가격:{{ getTotal() }} /{{ total }} -->
전가격: {{ total }}
  </div>
  </template>
  
  <script>
  export default {
    
    props:{
      msg:String
    },
    data:function(){
      return{
      booklist:[
{name:"자바의 정석",price:3000
},
{name:"jsp 정석",price:4000
},
{name:"spring 정석",price:5000
},
{name:"jquery 정석", price:5000
},
{name:"angular 정석", price:7000        }
        


      ],
      books:[], //선택된 책 목록 저장
      total:0 //총액
    }
      
  
    },
    watch:{
      books:function(){

      
    // methods:{
//      getTotal:function(){
         var sum=0;
        var totalbook =this.books;
        totalbook.map(
            function(ele,idx){
                console.log(idx, ele,name, ele.price);
                sum= sum+ele.price;
            }
        );
// for (let index = 0; index < this.books.length; index++) {
// let b = this.books[index];
// console.log(b.price);
// sum+= b.price;  
// }
        this.total=sum;
        console.log(this.total);
        return this.total;
     }
    }
  }
  </script>
  
  <style>
  
  </style>

<template>
  <div>
    <button v-on:[aaa]="handleEvent">v-on:[aaa]</button>
    <button @[bbb]="handleEvent">@[bbb]</button>
<!--mouseover-->
<button @[ccc]="handleEvent">@[ccc]</button>
    <button @[aaa]="handleEvent2" data-my="홍길동"
    data-my2='{"name":"이순신","age":20}'>@[aaa]</button>
  </div>
</template>

<script>
export default {
  props:{
msg:String
  },
  data:function(){
    return {
      //data 의 이름을 이벤트ㅡ의 속성으로 지정하고 값을 이벤트 이름으로 사용함
      aaa:"click",
      bbb:"mouseover",
      ccc:"mouseleave"

    }

  },
  ////////////////이벤트 처리 함수 등록
  methods:{
handleEvent:function(e){
  console.log("handleEvent===",e)
},
handleEvent2:function(e){
  console.log("handleEvent===",e);
      var data=JSON.parse(e.target.dataset.my2);
      console.log(data.name, data.age);
},
  }
}
</script>

<style>

</style>