📃 요약

Vue 는 Html 페이지로 웹 사이트를 개발하는 라이브러리입니다.
SPA(Single Page Application)이라고 합니다.
Html 첫페이지에서 변경되는 부분만 .js 소스(컴포넌트)로 불여서 개발하는 방식이 흡사 레고블럭을 연결해서 하나의 완성본을 만드는 것과 같다고 해서 컴포넌트 개발이라고도 합니다.
과거 코딩방식보다 일부 변경된 부분만 바꾸어 끼우는 방식이라서 성능이 비약적으로 증가할 수 있고,
현대 프론트 코딩방식은 SPA 개발로 바뀌고 있으며 비슷한 계열로 React / Angular 가 있습니다.

요소 기술 :

– Basic : Vue ( 공식 홈페이지 : https://vuejs.org )

📃 기술 구현

스펙 :

- vscode
- js (es6)
- vue

📃 Vue

- 컴포넌트 프로그래밍 : 페이지를 컴포넌트로 분리해서 레고 블럭처럼 조립해서 코딩하는 방식을 채택함, Vue, React 등이 적용하고 있음
- Vue 프레임워크라고 하고, 필수 라이브러리들이 대체로 설치되어 있고 제어문/반복문이 쉬워 초보자가 접근하기 쉬움
- 리액트는 라이브러리라고 하며 필수 라이브러리들을 추가적으로 설치해야 하고 제어문/반복문이 모던js 를 기반으로 다양하게 사용되기때문에
배워야 하는 기술이 많아 초보자가 접근하기에는 어려운 측면이 있음

1) watch 예제 :

    - vue 애서 데이터 바인딩 변수의 값이 변경될때 실행되는 함수로 watch 가 있음

결과 화면

– router/index.js

    - 메뉴 정의 js
    - url 과 보여줄 컴포넌트 연결
    - js 공통 모듈임

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    alias: '/dept',
    name: 'dept',
    component: () => import('@/views/DeptList')
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

– TheWatcher.vue

    - inputText 바인딩 변수값이 변경될때마다 함수 실행됨
    - 함수는 forbiddenText 의 금칙어가 입력되면 간단한 alert 메세지를 화면에 띄우고 inputText 초기화
    - 페이지 컴포넌트

<template>
  <div>
    <h2>입력문자를 감시하여 금지문자가 입력 되면 얼럿을 띄우는 예제</h2>
    <div id="app">
      <p>금지문자는、「{{ forbiddenText }}」</p>
      <textarea v-model="inputText" cols="60" rows="20"></textarea>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      forbiddenText: "안되",
      inputText: "오늘은 날씨가 좋습니다.",
    };
  },
  watch: {
    // inputText 에 입력한 문자열이 변경될때마다 감시한다.
    // 사용법 : watch: { 바인딩변수 : function(변경된변수, 변경전변수) { 실행문; } }
    inputText: function(value, oldValue) {
        let pos = value.indexOf(this.forbiddenText);
        if (pos > -1) {
          alert(this.forbiddenText + "는 입력할 수 없습니다.");
          // 입력문자 초기화
          this.inputText = "오늘은 날씨가 좋습니다.";
        }
      },
  },
};
</script>