Vue3(SFC)에서 응용 프로그램을 만드는 데 필요한 최소한의 자바스크립트에 대한 지식을 총결하였다.

Vue3의 script setup(이하 SFC라고 함)을 사용한 후
코드의 개발이 압도적으로 수월해졌다.
웹 응용 프로그램 개발 관점에서 JavaScript에 집중할 경우
학습 원가가 매우 낮지 않습니까?
최근 에는 사내 교육 에 참여하는 사람 이 많고, 게다가 모두 삽입식 시스템 으로, 많은 사람들 이 인터넷 학과 의 문외한 이다
고생이 많다.
그냥 곰곰이 생각해보면 자바스크립트로 가르친 것은 크게 3개로 나뉜다.
!
3개에 집중하는 것이 정말 필요한 최소한이다.
물론 일정 규모의 프로젝트에 참여하기 위해서는 더 많은 지식이 필요하다.
이번 백엔드는 Firebase, 백엔드로는 Vue3입니다.제가 js를 사용하는 회사에서...
생각 중이야.

어쨌든

이거 기본 아니에요?
역시, 이걸 모르면 아무것도 할 수 없어
기본적인 대입과 변수는 모두 성인이니 스스로 확인하세요.
다들 문외한이 아니니까.
예를 들어 이런 연상 배열이 있다고 가정하자.

<script setup>
import { reactive } from 'vue'

const fetchData = reactive([
  {name:"taro",age:"32"},
  {name:"jiro",age:"22"},
])
</script>
<template>
 <ul>
  <li v-for="(item,i) in fetchData" :key="i">
   名前：{{ item.name }}/年齢：{{ item.age }}
  </li>
 </ul>
</template>

JavaScript에서는 객체도 함수를 대입할 수 있으므로
완전한 값이 아니다.이게 바로 초보자입니다.🔰매우 번거롭다
나는 우선 가격을 넣기로 결정했다.
키와value를 하나로 합친 것을 데이터 집합으로 처리하는 경우가 많다.
따라서 예를 들어 v-for의 for문을 통해 순환 처리를 한다
화면에 많이 나와.

화살 함수

실제 vue 사건의 코드를 보면 다음 함수의 쓰기를 잘 볼 수 없습니다.

function add(num1,num2){
 return num1 + num2
}

초보자는 Js 교과서를 보면 펀티~, 왜?
그러나 Vue3이 된 후 기본적으로 이 기술 방법은
설마.

<script setup>
import { vue } from 'vue'
const result = ref(0)
const add = (num1,num2) => {
 result.value = num1 + num2
}
</script>
<template>
 <div>{{ result }}</div>
 <button @click="add(1,2)">add</button>
</template>

단추를 눌렀는데 결과는result에 표시됩니다.
함수식을 사용하지 않고 Arro 함수를 사용하면 매우 유창하다.

배열 방법(forEach/filter/map...etc)

push랑 unshift라는 건 검색만 하면 알 수 있어요.
그 방면은 좋은 방법입니다. forEach와 Filter 등의 방법입니다.
각 방법의 상세한 내용을 찾아보면, 많은 상세한 사이트가 있다
예를 들어 대상 부분에서 열거한 예에서 30세 이상의 데이터만 생략할 수 있다
표시하려고 합니다.

<script setup>
import { reactive, computed } from 'vue'

const fetchData = reactive([
  {name:"taro",age:"32"},
  {name:"jiro",age:"22"},
])

const filteredData = computed(()=> fetchData.filter((e)=>Number(e.age) > 30))
</script>
<template>
 <ul>
  <li v-for="(item,i) in filteredData" :key="i">
   名前：{{ item.name }}/年齢：{{ item.age }}
  </li>
 </ul>
</template>

이 경우 Filter 방법을 사용하면 매우 빠르다.
백엔드에서 얻은 값을 화면에 필요한 모양으로 바꾸기
잘할 것 같아서요.
필터와 맵 등의 방법이 상당히 사용되기 때문에 컨트롤을 원하는 부분입니다.

끝말

어때요?
이것은 단지 나의 독단과 편견일 뿐이다.
2년차 병아리 엔지니어니까 선배들의 조언을 받으면
울면서 기뻐하다.
여기에는 최소한의 지식이라고 쓰여 있지만, 자신이 문외한에서 들어왔을 때 무엇부터 시작해야 할지 몰라 힘들었다.그리고 현장에 있던 선배들도 전부 말해줬어요 말할 순 없지만
여기 소개된 내용만 이해하면 그렇게 힘들지 않을 거예요.

사이트 축소판 그림

・현대의 자바스크립트 자습서