국비지원 100일차 - VueJS 예제(반복,조건,bind,filter), computed, v-model, CRUD(Create)

2020. 9. 15. 12:49

사용예제 (반복,조건,bind,filter,computed)
filter()함수를 이용하면 특정 조건에 맞는 요소만 걸러내어 새로운 배열로 반환한다.

1. v-for이용해서 list에 저장된 내용을 출력
2. lower_man()이 반환해주는 배열을 받아 v-for을 이용해 출력하세요
3. vue의 computer속성을 이용할 때 속성형식으로 접근한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue"></script>
    <style>
        ul li{
            font-size: 1.3em;
            font-weight: bold;
            color:navy;
        }
        .strong{
            font-size:3em;
            color:orangered;
        }
    </style>
</head>
<body>

    <h1>반복 렌더링 하면서 조건 따져보기</h1>

    <div id="app">
        <ul>
            <!--v-for이용해서 list에 저장된 내용을 출력-->            
            <li v-for="(hero) in list" :key="hero.id"  :class="{strong:hero.power>300}">
                ID:{{hero.id}} ,Name:{{hero.name}}  ,Power:{{hero.power}}
                <span v-if="hero.power>300">강하다</span>
            </li>
        </ul>

        <hr color="blue">
        <h1>power가 300이하인 Hero</h1>
        <!-- lower_man()이 반환해주는 배열을 받아  v-for을 이용해 출력하세요-->
        <ul>
            <li v-for="hero in lower_man()" :key="hero.id">
                ID:{{hero.id}} ,Name:{{hero.name}}  ,Power:{{hero.power}}
            </li>
        </ul>

        <hr color='pink'>
        <h1>power가 400이상인 울트라맨</h1>
        <!--vue의 computed속성을 이용할 때 속성형식으로 접근한다.-->
        <ul>
            <li v-for="hero in ultra_man" :key="hero.id">
                ID:{{hero.id}} ,Name:{{hero.name}}  ,Power:{{hero.power}}
            </li>
        </ul>

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            list:[
                {id:1,name:'슈퍼맨',power:290},
                {id:2,name:'배트맨',power:300},
                {id:3,name:'아이언맨',power:400}
            ]
        },
        methods:{
            lower_man(){
                var arr = this.list.filter(function(val, i){
                    return val.power<=300;
                }); 
                return arr;
            }
        },
        computed:{
            ultra_man(){
                //filter함수 이용해서 400이상인 요소만 걸러서 반환하기
                return this.list.filter(function(val,i){
                    return val.power>=400;
                })
            }
        }
    })
</script>
</html>

computed
computed는 기존 값을 통해 새로운 값을 도출하던지 연산이 필요할 때 사용한다.
computed에서 정의 하는 함수는 반드시 값을 반환하도록 작성되어야 한다.
computed에 기술된 함수는 함수형태이지만 data(속성)처럼 접근한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue"></script>
</head>
<body>
    <h1>computed속성 사용하기</h1>
    <hr>
    <div id="app">
        <h1>message: {{message}}</h1>
        <h1>뒤집힌 메시지: {{reverseMessage}}</h1>
        <h1 color="red">{{reverseMessage2()}}</h1>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                message:'안녕하세요? VueJS'
            },
            methods:{
                reverseMessage2: function(){
                    //함수 형태여야 하고, 반드시 return문을 이용해 값을 반환
                    return this.message.split('').reverse().join('');
                }
            },
            computed:{
                reverseMessage: function(){
                    //함수 형태여야 하고, 반드시 return문을 이용해 값을 반환
                    return this.message.split('').reverse().join('');
                }
            }
        })
    </script>

</body>
</html>

computed는 캐싱을 한다. 종속된 대상이 변경되 때만 재실행을 하고 변경되지 않으면 캐시에 저장된 내용을 다시 꺼내 사용한다.
method는 호출될 때 마다 재실행을 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <h1>computed</h1>
        <hr color="blue">
        <h4>method</h1>
        <h4>computed random : {{computedData}}</h4>
        <h4>computed random : {{computedData}}</h4>
        <h4>method randon : {{methodData()}}</h4>
        <h4>method randon : {{methodData()}}</h4>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        computed:{
            computedData(){
                return Math.random();
            }
        },
        methods:{
            methodData(){
                return Math.random();
            }
        }
    })
</script>
</html>

computedData는 동일하게 나오고 methodData는 다르게 나온다.

v-model
form에 입력한 값을 뷰 객체의 데이터에 즉시 동기화시킨다.
양방향 데이터 바인딩이 일어남
입력 폼에 사용자가 입력한 값을 vue의 data에 즉시 반영시킨다. 또 data가 변경이 되면 ui를 즉시 변경한다.
input, select,checkbox, radio,textarea등에만 사용가능

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">
        <h1>Directive : v-model</h1>
        <hr color="red">
        <!-- 이름: <input type="text" :value="name"> -->
        이름: <input type="text" v-model="name">
        <h3>당신의 이름은 {{name}}</h3>
        <hr>
        사용가능한 언어
        <input type="checkbox" name="lang" value="JavaScript" v-model="langs">JavaScript
        <input type="checkbox" name="lang" value="Java" v-model="langs">Java
        <input type="checkbox" name="lang" value="cpp" v-model="langs">cpp
        <br>
        당신이 사용가능한 언어는 아래와 같다.
        <h4>{{langs}}</h4>
    </div>
</body>
<script>
    new Vue({
        data:{
            name:"",
            langs:[]
        }
    }).$mount('#app')
</script>
</html>

구구단 게임 예제

input text에 ref myinput을 준다
this.$refs.myinput.focus();
인풋에 입력 포커스 추가 jquery로 input요소를 선택하여 포커스 주는 것과 동일
값에는 Vue에서 v-model로 화면과 데이터를 일치시켜야한다한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue"></script>

    <style>
        .rd{
            color:red;
        }
        .gr{
            color:green;
        }
        .bl{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4 class="bl"> {{first}}  곱하기 {{second}} 는?</h4>
        <form action="">
            <input ref="myinput" type="text" v-model="inVal">
            <button type="button" @click="calculate">확인</button>
        </form>
        <h4>당신이 입력한 값: {{inVal}}</h4>
        <h4 :class="{rd:!flag,gr:flag}">결과: {{result}}</h4>
        <!--flag값에 따라 결과값 글자 색상을 red또는 green으로 다르게 주기-->
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            first:parseInt(Math.random()*10)+1, //1 ~ 10 사이의 정수값을 랜덤하게 할당
            second:parseInt(Math.random()*10)+1,
            inVal:'',
            result:'',
            flag: false //정답을 맞추면 true 틀리면 false
        },
        methods:{
            calculate(e){
                //e.preventDefault();//기본적인 submit동작을 막기
                if(this.first*this.second==Number(this.inVal)){
                    this.flag=true;
                    this.result="정답!!"
                    this.first=Math.ceil(Math.random()*10)
                    this.second=Math.ceil(Math.random()*10)
                }else{
                    this.flag=false;
                    this.result="땡!"
                    
                }
                console.log(this)//vue 인스턴스
                this.inVal='';
                this.$refs.myinput.focus();
            }
        }
    })

</script>
</html>

CRUD

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue"></script>
    <style>
        #app{
            width:60%;
            margin: 30px auto;
        }
        .strong{
            color:red;
            font-weight: bold;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>Create, Read, Update, Delete</h1>
        Name: <input ref="name" type="text" v-model="user.name">
        <p></p>
        Power: <input ref="power" type="text" v-model="user.power">
        <button @click="insert">add</button>
        <hr color='green'>
        <table>
            <tr>
                <th>ID</th><th>NAME</th><th>POWER</th><th>CRUD</th>
            </tr>
            <tr v-for="(hero, i) in list" :key="i" :class="{strong: hero.power>=300}">
                <td>{{hero.id}}</td>
                <td>{{hero.name}}</td>
                <td>{{hero.power}}</td>
                <td>
                    <button>PowerUp</button>
                    <button>PowerDown</button>
                    <button>Del</button>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        mounted(){ //메모리에 올라갈때 life cycle
            this.$refs.name.focus();
        },
        data(){
            return {
                user:{
                    id:0,
                    name:'',
                    power:''
                },
                list:[
                    {id:1,name:'슈퍼맨',power:100},
                    {id:2,name:'아이언맨',power:500},
                    {id:3,name:'배트맨',power:290},
                    {id:4,name:'헐크',power:400}
                ]
            }
        },
        methods:{
            insert(){
                //이름과 power에 입력한 값이 없으면 alert띄우고 focus
                if(!this.user.name){
                    alert("이름 입력하세요");
                    this.$refs.name.focus();
                    return;
                }
                if(!this.user.power){
                    alert("power를 입력하세요");
                    this.$refs.power.focus();
                    return;
                }
                this.list.push({id:this.list.length+1, name:this.user.name, power:this.user.power});
                this.user.name='';
                this.user.power='';
                this.$refs.name.focus();
            }
        }
    })

</script>
</html>

저작자표시

'개발자 > 국비지원 SW' 카테고리의 다른 글

국비지원 102일차 - VueJS CRUD(update, delete), set, ES6문법 (0)	2020.09.17
국비지원 101일차 - Spring 체크된 값만 받기, 주문처리 (0)	2020.09.16
국비지원 99일차 - Spring pointcut표현식, Interceptor (0)	2020.09.14
국비지원 98일차 - Spring JSON데이터 생성, AOP VueJS dynamic, v-for (0)	2020.09.11
국비지원 97일차 - VueJS directive (0)	2020.09.10

찬쿤

국비지원 100일차 - VueJS 예제(반복,조건,bind,filter), computed, v-model, CRUD(Create)

'개발자 > 국비지원 SW' 카테고리의 다른 글

+ Recent posts

티스토리툴바