Vue.js (watch)

watch : 값이 변화될때마다 알아채서 사용하는 기능.

어떤 속성을 감시할 것인지 정의해야 함.

watch: {
          // inputText 감시
          inputText: function () {
            //console.log(this.forbiddenText);
            var pos = this.inputText.indexOf(this.forbiddenText);
            if (pos >= 0) {
              alert(this.forbiddenText + "는 입력할 수 없습니다.");
              // 입력문자에서 금지 문자를 삭제한다.
              this.inputText = this.inputText.substr(0, pos);
            }
          },

여기서는 inputText를 감시한다. 변화할때마다 해당 function이 수행된다.

methods: {
          cleanToDo: function () {
            this.todos = this.todos.filter(function (val) {
              return val.done == false;
            })
          }
      }

val.done이 false인 애들만 남겨놓음..

 

v-if : 태그 자체가 렌더링 안됨

v-show : 태그는 렌더링 됨

 

computed는 변화 전 값과 후 값을 비교하는 처리는 할 수 없는데 watch에서는 가능하다.

watch: {
	someObj: {
            handler: function (val, oldVal) {
              console.log(`[someObj] ${val}-${oldVal}`)
            },              
	},    
	'someObj.a' : {
            hadler: function (val, oldVal) {
                console.log(`[someObj.a] ${val}-${oldVal}`)
            },              
	},

이런식으로 ' '를 이용해 위배되지 않게 쓸 수 있다. 

이때 someObj.a가 변할때 someObj는 수행되지 않음. 왜냐하면 참조하는 객체가 변하는 건 아니기때문에. 

 

computed는 비동기처리 안됨. 아규먼트 받을 수 없음. 언제 끝날지 모르는 거 불가능. -> 그럴때 watch 쓴다.

그런데 watch는 값이 바뀔때만 수행되기 때문에 이때는 즉시 실행 watch를 사용한다.

watch: {
	someStr: {
		handler: function (val, oldVal) {
			console.log(`[someStr] ${val}-${oldVal}`)
		},
		immediate:true
 	},

 

이런식으로 immediate:true를 써서 즉시 실행 watch를 써준다. 즉시 실행 watch는 처음 렌더링 될때도 실행된다.

 

methods는 호출할때마다 불러와지는데 computed는 호출해도 값이 변화가 없으면 호출 안한다.

 

v-clock을 사용해서 화면을 시간이 지남에 따라 불러올수 있다.

<style>
        [v-cloak]::before {
            content: '로딩중...'
        }

        [v-cloak]>* {
            display: none;
        }
</style>

이런식으로 시간이 되기 전에는 '로딩중'이라는 메세지가 뜨게하고 

<div id="app">
        <h1>v-cloak 을 사용하지 않은 태그 - {{msg}}</h1>
        <div v-cloak>
            <h1>v-cloak 을 사용한 태그 - {{msg}}</h1>
        </div>
    </div>
    <script>
        setTimeout(function () {
            Vue.createApp({
                data() {
                    return {
                        msg: "hello"
                    }
                }
            }).mount("#app")
        }, 3000);
    </script>

div에 v-clock을 줘서 시간이 지나야 태그가 보이도록 할 수 있다. 위의 css와 쓰도록 해야한다.

시간이 되기전에는 위와 같은 화면이 나오고

시간이 되면 위와 같은 화면으로 바뀌게 된다.

methods: {
        getAll: function () {
          axios.get("http://localhost:8088/boards")
            .then(response => {
              return response.data;
            }).
            then(boards => {
              let str = "";
              for (let elem of boards) {
                str += `<h3>${elem.boardNo}. ${elem.title}  ${elem.content}</h3>`;
              }
              this.result = str;
            })
            .catch(err => console.error(err));
        },

이런식으로 ajax기술로 rest api를 요청할 수 있다.

 

ajax쓰려면

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

이런식으로 끌어와야 한다. 이런 방법은 cdn방법이다. cdn로딩으로 끌어온다.

 

component

<div id="app">
		<my-comp-tag1></my-comp-tag1>
		<my-comp-tag2></my-comp-tag2>
		<my-comp-tag3></my-comp-tag3>
		<hr>
		<my-comp-tag1></my-comp-tag1>
	</div>
	<script>
		const { createApp } = Vue;

		const MyComponent1 = {
			template: '<p class="my-comp">안녕? 둘리~~</p>'
		}
		const MyComponent2 = {
			template: '<p class="my-comp">안녕? 도우너~~</p>'
		}
		const MyComponent3 = {
			template: '<p class="my-comp">안녕? 또치~~</p>'
		}
        createApp({
            components: {
                'my-comp-tag1': MyComponent1,
                'my-comp-tag2': MyComponent2,
                'my-comp-tag3': MyComponent3,
            }
		}).mount('#app');
	</script>

컴포넌트 쓸때 이런식으로 정의해준다.

 

createApp({
	components: {
		'my-component': MyComponent
	}

관례적으로는, html에서 사용할때는 스네이크 표기법('my-component'), 뒤에거는 카멜케이스(MyComponent)로 표기한다.

<div id="app">
			<my-component my-name="영긔"></my-component>
			<my-component my-name="긔긔"></my-component>
			<my-component></my-component>
		</div>
    <script>
      const  {createApp}  = Vue;
      const MyComponent = {
				template: '<p class="my-comp">나는 {{ myName }} 입니다.</p>',
				props: {
					myName: String
				}
			}
			createApp({
				components: {
					'my-component': MyComponent
				}
			}).mount('#app');
    </script>

이때 사용되는 게 props라는 설정. 어떤 타입의 데이터 받겠다.. 하고 준다. 여기서는 String.. 

태그를 통해서 이 컴포넌트를 사용할깨 myName을 이용해서 값을 전달하겠다 라는 뜻. 전달받고 싶은 데이터만큼 정의할 수 있다. 여기서 이름규칙은 카멜케이스를 스네이크 케이스로 바꿔야한다. 사용할때는 myName이런식으로 쓰여야 한다.

{{}}를 이용해서 출력한다. 

브라우저를 통해서 본다면

이런식으로 보인다.