vuejs 3.0 cdn을 사용할 때 기본 세팅, jquery 처럼 사용 - javascript

vuejs 기본 구조 세팅하기, jquery 처럼 사용

---

html

<div id="app" v-cloak>
  <h1>페이지 제목</h1>

  <header>
    header 내용
    <!--<router-link to="/">Home</router-link>
    <router-link to="/test1">test1</router-link>
    <router-link to="/test2">test2</router-link>
    // 아래처럼 components로도 가능
    -->
    <nav-menu mname1="메뉴" @hdclick="clicksample"></nav-menu>
    
    <nav>
      <h2>navigation</h2>
    </nav>
  </header>

  <main>
    <router-view></router-view>
    <br>
    <p>가 높이 : {{ calcHeight(200) }}<p>
    <p>나 높이 : {{ calcHeight(100) }}<p>
    ......
    ...
  </main>

  <footer>
    footer 내용
  </footer>
</div>

js

<script src="js/vue3.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue-router.global.js"></script>
<script src="components/navMenu.js"></script>
<script>
  const { createApp, reactive, computed, watchEffect, onMounted } = Vue;

  const App = {
    components: {
      "nav-menu": NavMenu
    },
    setup(){
      const state = reactive({
        // ref() 를 사용하면 js에선 .value로 찾아감(예: state.value.maxNo).   dom에는 .value 없음(예: state.maxNo)
        // reactive() 는 항상 .value 필요없음
        divHeight: 340,
        maxNo: 800,
        calcHeight: computed(()=>{
          return (no) => {
            return Math.floor(state.divHeight * no / state.maxNo);
          }
        }),
      })
      
      const member = reactive("kr")

      const numFc = (no) => {
        console.log(no, "선언된 함수");
      }

      console.log("created.[vue 3.0에선 이 위치가 2.0에서의 created에 해당]")

      clicksample = () => {
        console.log("clicksample");
      }
      
      watchEffect(() =>{
      	// 감시하는거...
      })

      onMounted(() => {
        console.log("mounted");
        
        // axios 관련
        axios
        // .post("json/sample.json", {})
        .get("json/sample.json")
        .then((response) => {
          console.log("then", response.data);
        })
        .catch((error) => {
          console.log("error", error, error.toJSON());
        })
        .finally(()=>{
          console.log("finally");
        })
      })

      return {
        state, member, numFc, clicksample,
      }
    }
  };

  // router
  const Home = { template: `<h1>home</h1>` };
  const Test1 = { template: `<h1>test1</h1>` };
  const Test2 = { template: `<h1>test2</h1>` };

  const routes = [
    { path: "/", component: Home },
    { path: "/test1", component: Test1 },
    { path: "/test2", component: Test2 }
  ]

  const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes
  })

  createApp(App).use(router).mount("#app");
  //createApp(App).mount("#app");
</script>

component용 js

const NavMenu = {
  template:`
  <router-link to="/">Home</router-link>
  <router-link to="/test1">{{ mname1 }}</router-link>
  <router-link to="/test2">{{ mname2 }}</router-link>
  <button @click="$emit('hdclick')">버튼 확인</button>
  <button @click="testim">버튼 확인2</button>
  `,
  // props: [ "mname1", ... ],// 간단한 버전
  props: {
    // mname1: String,// 또는 아래처럼
    mname1: {
      type: String, default: "nav1"
    },
    mname2: {
      type: String, default: "nav2"
    },
    hdClick: Object
  },
  // data: () => ({
  //   testda: "aadfeee"
  // }),
  data() {
    return {
      testda: "aadfeee"
    }
  },
  methods: {
    testim() {
      this.testda = "333";
    }
  },
  mounted() {
    this.testda = "33333";
  }
}

위와 같은 구조가 vuejs(3.0)를 jquery 처럼 사용하는 기본적인 구조이다.
vue-cli 프레임워크를 사용하지 않을 때 axios, route, components를 간단히 적용해볼 수 있다.

끝.