vue

vue.js

 

vue - 푸론트 javascript 파일

vue2 : update 종료

cli 방식 p/g :프로젝트 단위로 vue 파일 작성 ⇒ build 이후 html 이나 jsp 에 포함

cdn 방식 p/g: 라이브러리를 html, jsp , thymeleaf 에서 직접 (jquery 방식)

vue3

cli 방식 p/g :프로젝트 단위로 vue 파일 작성 ⇒ build 이후 html 이나 jsp 에 포함

cdn 방식 p/g: 라이브러리를 html, jsp , thymeleaf 에서 직접 (jquery 방식)

 

 

vue create 프로젝트명

npm install

npm run serve ⇒server 가동

ctrl + c ⇒ 서버 끄기

 

App.vue

<template>
  <div>
    부모컴포넌트의 값
    <HelloWorld></HelloWorld>

    <!-- 부모컴포넌트의 로컬값 : {{ x }}, {{ y }} -->
    {{x}}<br>
    {{ y }}<br>
    {{z[0]}}<br>
    {{k.aa}}<br>
    {{p.getUserName()}}
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld';
import {Person} from './components/Person';
export default {
name : 'App',
components:{
    HelloWorld
},
//로컬 상태를 저장하는 data 옵션은 반드시 함수로 지정함(arrow함수도 가능)
//template{{}}으로 사용
data:function(){
  return{
    x:'홍길동',
    y:'100',
    z:[10,20,30],
    k:{aa:'hong', bb:30},
    p: new Person("aaa", 20)// components/Person.js import
  }
}
}
</script>

<style>

 

HelloWorld.vue

<template>
  <div>HelloWorld</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

 

person

export class Person{
    constructor (u,a){
        this.username=u;
        this.age=a;
    }
    getUserName(){
        return this.username;
    }
    getAge(){
        return this.age;
    }
}

 

 

부모에서 자식에게 데이터 넘겨주는 방법(중첩 컴포넌트)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false //컴포넌트 이름의 멀티워드 제약 해지
})

 

app.vue

<template>
  <div id="app">
    <!--숫자, boolean, 객체 등은 v bind : 속성명을 사용하여 전달함-->
<HelloWorld msg="홍길동" v-bind:test=10> </HelloWorld>
<Happy msg="이순신" test="aaa"></Happy>
<!--자식 컴포넌트에게 속성명="전송데이터"-->
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld';
import Happy from './components/Happy';



export default {
name:'App',
components:{
  HelloWorld, //component 로 등록
  Happy

}
}
</script>

<style>

</style>

 

 

HelloWorld.vue

<template>
  <div>
    <h1>  HelloWorld {{ msg }},{{ test }}</h1>
  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
  msg:String,
 test:Number
  //2.부모에게서 넘어오는 데이터
}
}
</script>

<style>

</style>

 

 

Happy.vue

<template>
  <div>
    <h1>Happy msg:{{ msg }},{{ test }}</h1>
<!--3. 수신데이터에 사용-->

  </div>
</template>

<script>
export default {
props:{
  msg:String,
  test:String
  //2.부모에게서 넘어오는 데이터
}
}
</script>

<style>

</style>

 

 

BookList

<template>
  <div>
    <h1>도서목록</h1>
    <ul>
        <li>
            <img src="../assets/image/a.jpg" width="100" height="100"/>위험한 식탁
        </li>
        <li>
            <img src="../assets/image/b.jpg" width="100" height="100"/>공부의 비결
        </li>
        <li>
            <img src="../assets/image/c.jpg" width="100" height="100"/>오메르타
        </li>
        <li>
            <img src="../assets/image/d.jpg" width="100" height="100"/>행복한 여행
        </li>
        <li>
            <img src="../assets/image/e.jpg" width="100" height="100"/>해커스 토익
        </li>
        <li>
            <img src="../assets/image/f.jpg" width="100" height="100"/>도록 안내서
        </li>
    </ul>

  </div>
</template>

<script>

export default {

}
</script>

<style>

</style>

 

 

<template>
  <div>
    <BookListVue/>
  </div>
</template>

<script>
import BookListVue from './components/BookList.vue';
export default {
name : 'App',
components : {
  BookListVue
}
}
</script>

<style>

</style>

props

부모 컴포넌트 - 자식 태그 + 속성명 =”속성값”

자식컴포넌트 props: 속성며ㅇ: 데이터 타입 (String , Number,Array,Object)

<template>
  <div id="app">
<HelloWorld username="홍길동" age="20" my-address="서울npm"></HelloWorld>
    <!-- 자식 컴포넌트에 속성을 이용한 데이터 전달
    my-address 같은 케밥 표기법으로 넘기면 반드시 받는 쪽은
  myaddress 같은 카멜 표기법을 사용
받아서 사용함-->
  </div>
</template>

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

<style>

</style>

HelloWorld.vue

<template>
  <div>
HelloWorld
<h1> {{ username }}</h1>
<h1> {{ age }}</h1>
<h1> {{ myAddress }}</h1>

  </div>
</template>

<script>
export default {
name:'HelloWorld',
props:{
  username:String,
  age:Number,
  //my-address:String //안됨
  myAddress:String //카멜표기법으로 사용
}
}
</script>

<style>

</style>

자식 컴포넌트에서 배열로 뽑아도 나옴

대신에 케밥 안되고 카멜로만 뽑아야함

 

<template>
  <div>
HelloWorld
<h1> {{ username }}</h1>
<h1> {{ age }}</h1>
<h1> {{ myAddress }}</h1>

  </div>
</template>

<script>
export default {
name:'HelloWorld',
props:[  'username',  'age',  'myAddress']
}
</script>

<style>

</style>

 

 

props2_type_v_bind

 

app.vue

<template>
  <div id="app">
    <HelloWorld
    username="홍길동"
    v-bind:age="20"
    my-address="서울"
    v-bind:isMarried="false"
    v-bind:phones="[100,200,300]"
    v-bind:author="{
      name:'aaa',
      company:'google.com'
    }"/>
  </div>
</template>

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

<style>

</style>

 

 

HelloWorld.vue

<template>
  <div>
    자식에게 전송된 데이터
    <h3>{{ username }}</h3>
    <h3>{{ age+10}}</h3>
    <h3>{{ myAddress }}</h3>
    <h3>{{ isMarried==false }}</h3>
    <h3>{{ phones[0]==100 }}</h3>
    <h3>{{ author.name }}</h3>
<h3>{{ author.company }}</h3>

  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
    username:String,
    age:Number,
    myAddress:String,
    isMarried:Boolean, //주의
    phones:Array,//배열객체
    author:Object//객체
  }

}
</script>

<style>

</style>

 

type_default

app.vue

<template>
  <div>
<HelloWorld username="홍길동" v-bind:age="20" my-address="서울"></HelloWorld>
<hr>
<HelloWorld username="이순신"/>

  </div>
</template>

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

<style>

</style>

 

 

HelloWorld.vue

<template>
  <div>
    HelloWorld
    <h3>{{ username }}</h3>
    <h3>{{ age}}</h3>
    <h3>{{ myAddress }}</h3>

  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
    username:String,
    age:{
      type:Number,
      default:100
    },
  myAddress:{
    type:String,
    default:"제주"  
  }
  }
}
</script>

<style>

</style>

data

 

app.vue

<template>
  <div>
부모 컴포넌트의 값 {{ x }},{{ y }}
<HelloWorld username="aaa" v-bind:age="20"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
export default {
name:'App',
components:{
  HelloWorld
},
data:function(){
  return {x:"홍길동", y:"100"}
}
}
</script>

<style>

</style>

 

 

helloWorld

<template>
  <div>
    HelloWorld
    <h3>{{ username }}</h3>
    <h3>{{ age }}</h3>
  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:['username','age']

}
</script>

<style>

</style>

array_object_class

app.vue

<template>
  <div id="app">
이름:{{ x }}<br>
나이:{{ y }}<br>
주소:{{ z[0] }},{{ z[1] }},{{ z[2] }}<br>
이메일: {{ k.aa }},{{ k.bb }}<br>
Person: {{ p.getUserName() }}, {{ p.age }}<br>
  </div>
</template>

<script>
import { Person } from './components/Person';
import HelloWorld from './components/HelloWorld';
export default {
namr:'App', 
components:{
  Person,
  HelloWorld
},
data:function(){
  return {
    x:'홍길동',
    y:'40',
    z:[10,20,30],
    k:{aa:'hong',bb:30},
    p:new Person("aaa",20)
  }
}
}
</script>

<style>

</style>

 

 

person.js

export class Person{
    constructor(u,a){
        this.username=u;
        this.age=a;
    }
    getUserName(){
        return this.username;
    }
    getAge(){
        return this.age;
    }
}

app.vue

<template>
    <div id="app">
    부모의 데이터 :{{ a }},{{ bb }}<br>
    <!--v-bind: 속성명 ="부모 로컬데이터" 또는
    :속성명 ="부모로컬데이터"-->
    <HelloWorld v-bind:username="aa" :age="bb"></HelloWorld>
    </div>
  </template>
  
  <script>
  import HelloWorld from './components/HelloWorld.vue'
  
  export default {
    name: 'App',
    components: {
      HelloWorld
    },
    data:function(){
        return {aa:"홍길동", bb:"20"}
    }
    //data : () => {
   // return {aa:"홍길동",bb:"20"}
 // }
  }
  </script>
  
  <style>

  </style>

 

 

HelloWorld.vue

<template>
    <div>
     
      <h3>{{ username }}</h3>
      <h3>{{ age}}</h3>
   
  
    </div>
  </template>
  
  <script>
  export default {
    name:'HelloWorld',
    props:{
    username:String,
    age:Number
      
    
    }
  }
  </script>
  
  <style>
  
  </style>

 

 

 

 

vbind_props2_dynamicAttrName

 

app.vue

<template>
  <div id="app">
부모의 데이터 {{ aa }},{{ bb }}
    <HelloWorld
    v-bind:username="aa"
    :age="bb"
    v-bind:data="cc"
    :[attributeName]="aa"
    />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld';
export default {
name:'App',
components:{
    HelloWorld
},
data:function(){
    return{
    aa:"홍길동",
    bb:20,
    cc:[10,20,30],
    attributeName:"mesg"
}
}
}
</script>

<style>

</style>

 

 

HelloWorld.vue

<template>
  <div>
    <h3>{{username }}</h3>
      <h3>{{age}}</h3>
      <h3>{{ data[0] }}</h3>
      <h3>{{ mesg }}</h3>
  </div>
</template>

<script>
export default {
    name:'HelloWorld',
    props:{
        username:String,
    age:Number,
    data:Array,
    mesg:String
    }
}
</script>

<style>

</style>

methods

HelloWorld.vue

<template>
  <div>
    <h1>{{ username }}</h1>
    <h1>{{ age }}</h1>
    함수호출: {{ sayEcho() }}<br>
    함수호출: {{ test() }}<br>
    함수호출: {{ test2('aaaaaaaaaaaaaaa') }}<br>
  </div>
</template>

<script>
export default {
  props: {
    mesg: String
  },
  data() {
    return {
      username: "홍길동",
      age: 20
    };
  },
  methods: {
    sayEcho: function() {
      console.log("sayEcho 설정");
      return this.username + '\t' + this.age;
    },
    test: function() {
      console.log("test 실행=====");
      return this.username + '\t' + this.age;
    },
    test2: function(data) {
      console.log("test2 실행=====", data);
      return this.username + '\t' + this.age + '\t' + this.data + '\t' + this.mesg;
    }
  }
};
</script>

<style>
</style>

 

 

app.vue

<template>
  <div>

    <HelloWorld :mesg="mesg"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld';
export default {
name:'App',
components:{
HelloWorld
},
data:function(){
return{mesg:'app'}
}
}
</script>

<style>

</style>

 

 

 

람다로 ⇒ 쓰면 this 사용이 안됨

<template>
  <div>
    <HelloWorld :mesg="mesg" :username="aa" :age="bb" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      mesg: 'app',
      aa: '홍길동',
      bb: 20
    };
  }
};
</script>

<style>
</style>

 

 

HelloWorld.vue

<template>
  <div>

    <h1>{{ mesg }}</h1>
    <h1>{{ sayEcho() }}</h1>
    <h1>{{ info()}}</h1>
    <h1>{{ myArrow() }}</h1>
  </div>
</template>

<script>
export default {
props:{
  mesg:String,
  username:String,
  age:Number
},
data:function(){
  return {};
},
methods:{
  sayEcho: function(){
    console.log("sayEcho 실행====" ,new Date().toString());
    return new Date().toString();
  },
  info: function(){
    console.log("info function 실행====" ,this.username, this.age);
    return this.username+'\t'+this.age;
  },
  myArrow: ()=>{
    console.log("myArrow 설정===",this); //unge
    return "my==="+this; //error
  }


}
}
</script>

<style>

</style>

vue → spring 서버 dept 정보 json 리턴

 

lifecycle

 

<template>
  <div>
    HelloWorld
    <h3>{{ mesg }}</h3>


  </div>
</template>

<script>

export default {
  
  data: function(){
    return {mesg:"Hello World"}
  },
  beforeCreate: function(){
    console.log("beforeCreate: ", this);
  },
  created:function(){
    console.log("create");
  },
  beforeMount:function(){
    console.log("beforeMount");
  },
  mounted:function(){
    console.log("mounted1", this.$el, this.mesg) //<div>HelloWorld</div>
    //data 속성값이
    this.mesg='happy 로 변경';
    console.log('mounted1: ', this.mesg);
  },
  beforeUpdate:function(){
    console.log("beforeUpdate");
  },
  updated:function(){
    console.log("updated");
  },
  beforeDestroy:function(){
    console.log("beforeDesTroy");
  },
  destroyed:function(){
    console.log("destroyed");
  }
}
</script>

<style>

</style>

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

<script>

import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data:function(){
    return {
      mesg:"App component"
    }

  },
  //life-cycle 함수 ==> arrow 함수 사용안됨, this의 문제
  beforeCreate: function(){
    console.log("app.beforeCreate: ", this);
  },
  created:function(){
    console.log("app. create", this.mesg);
  },
  beforeMount:function(){
    console.log("app.beforeMount");
  },
  mounted:function(){
    console.log("app.mounted1", this.$el, this.mesg) //<div>HelloWorld</div>

  },
  beforeUpdate:function(){
    console.log("app.beforeUpdate");
  },
  updated:function(){
    console.log("app.updated");
  },
  beforeDestroy:function(){
    console.log("app.beforeDesTroy");
  },
  destroyed:function(){
    console.log("app.destroyed");
  }
}
</script>

<style>

</style>

v-text,v-html

HelloWorld

<template>
  <div>
    <h1>디렉티브 : v-text, v-html: 위젯에 필요한 속성을 정의함</h1>
    1)v-text:<span v-text="x"></span><br>
    1)v-text:<span v-text="getX()"></span><br>
    2)v-html:<span v-html="y"></span><br>
    2)v-html:<span v-html="getY()"></span><br>

  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
   
  
  },
  data:function(){
    return{
      x:"홍길동",
      y:"<h1>홍길동</h1>"
    }
  },
  methods:{
    getX:function(){
      return this.x;
    },
    getY:function(){
      return this.y;
    }
  }
}
</script>

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

 

 

 

바인딩

helloWorld.vue 단방향 바인딩

 

<template>
  <div>
로컬 데이터 : {{ mesg }} <br>
<!-- v-bind: 객체의 속성 단방향 바인딩
v-bind: 속성명 = 객체 데이터 또는 :속성명= 객체 데이터-->
mesg:<input type="text" value="mesg"><br>
v-bind:value="mesg"<input type="text" v:bind:value="mesg"><br>
:value="mesg"<input type="text" :value="mesg"><br>


  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
    
  },
  data:function(){
    return {
    mesg:"홍길동"
    }
  }
}
</script>

<style>

</style>

 

양방향 바인딩

<template>
  <div>
로컬 데이터 : {{ mesg }} <br>
<!-- v-bind: 객체의 속성 단방향 바인딩
v-bind: 속성명 = 객체 데이터 또는 :속성명= 객체 데이터-->
mesg:<input type="text" value="mesg"><br>
v-model="mesg" <input type="text" v-model="mesg"><br>
v-model="mesg" <input type="text" v-model="mesg"><br>
v-bind:value="mesg"<input type="text" :value="mesg"><br>
:value="mesg"<input type="text" :value="getmesg()"><br>


  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{ },
  data:function(){
    return {
    mesg:"홍길동"
    }
  },
  methods:{
    getmesg:function(){
      return this.mesg;
    }
  }
}
</script>

<style>

</style>

v_model1수식어_trim_lazy_number

 

<template>
  <div>
    <h1>수식어 연습</h1>
  <h4>lazy:enter 에 반응</h4>
  v-model:<input type="text" v-model="lazy">{{ lazy }}<br>
  v-model.lazy:<input type="text" v-model.lazy="lazy">{{ lazy }}<br>
  <hr>
  <h4>number: 숫자만 사용</h4>
  <input type="text" v-model.number="number">
  {{ number }}
  <hr>
  <h4>noTrim</h4>
  <input type="text" v-model="noTrim">
  test{{ noTrim }}test
  <hr>
  <h4>Trim</h4>
  <input type="text" v-model.trim="trim" >
  test{{ trim }}test
  </div>
</template>

<script>
export default {
  name:'HelloWorld',
  props:{
   
  },
  data: function(){
    return{
      lazy:"",
      number:"",
      aaa:"",
      noTrim:"",
      trim:""
    }
  }
  
}
</script>

<style>

</style>

directive03_v_model2_select

 

<template>
  <div>
    <select v-model="mesg">
    <option>10</option>
    <option>20</option>
    <option>30</option>
    <option>40</option>
  </select>
  <br>
  <input type="text" v-bind:value="mesg"><br>
  <input type="text" v-model="mesg"><br>
    {{ mesg }}
  </div>
</template>

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

<style>

</style>

<template>
  <div>
   <h1>좋아하는 과일을 선택하세요</h1>
   <input type="checkbox" v-model="fruit" value="사과">사과<br>
   <input type="checkbox" v-model="fruit" value="배">배<br>
   <input type="checkbox" v-model="fruit" value="바나나">바나나<br>
   <input type="checkbox" v-model="fruit" value="수박">수박<br>
 <hr>
 선택한 과일은: <br>
 {{ fruit }}
 </div>
</template>

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

<style>

</style>

 

v-show

t/f됨

flase 면 렌더링 안됨 자리차지 없음

 

<template>
  <div>
   <p v-show="true">true1</p>
   <p v-show="true">true2</p>
   <p v-show="flag">flag</p>
   <p v-show="! false">! false</p>
   <p v-show="false">false</p>
   <p v-show="! true">! true</p>
 </div>
</template>

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

<style>

</style>

v-if

세부조건가능

 

<template>
  <div>
    <!--v:if 는 조건에 일치하지 않으면 렌더링 안됨 자리차지 안함-->
   <p v-if="amount==1">hello1</p>
   <p v-if="amount!=1">hello2</p>
   <p v-if="amount!=1">hello2</p>
   <p v-if="amount==1">hello1</p>
 </div>
</template>

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

<style>

</style>