vue.js에서 신경 쓰는 요점 노트
데이터 내용의 변경 방법
오래전부터 신경을 많이 썼는데, 이 데이터에 정의된 값은 어떻게 변합니까?이렇게 됐어.
return에서 값과 변수를 정의할 수 있을 것 같습니다.
age 변수도 있어요.
역할 분배를 통해number와string 등의 유형을 정의할 수 있습니다.
그렇구나.
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "App",
components: {},
data() {
return {
name: "Link",
age: 25 as number | string,
};
},
methods: {
changeName(name: string) {
this.name = name;
},
changeAge(age: string | number) {
this.age = age;
},
},
});
</script>
reactive 및 toRefs
이렇게 사용해도 될 것 같아요.
"에이~"가 됐어요.
setup() {
const state = reactive({
name: "Link",
age: 25 as string | number,
});
return { ...toRefs(state) };
},
ref 사용 시
이렇게 하면 이상한 의식이 없어져요.
usestate 같은 사용법이요?내 생각엔
const name = ref("Link");
const age = ref<number | string>(25);
return { name, age };
인터페이스 를 사용하면 setup에서 정의할 때 잘못된 정보가 들어오는 것을 피할 수 있습니다
유형 정의
interface Job {
title: string;
location: string;
salary: number;
id: string;
}
export default Job;
import Job from "./types/job";
setup() {
const jobs = ref<Job[]>([
{
title: "farm worker",
location: "lon lon ranch",
salary: 30000,
id: "1",
},
{
title: "quarryman",
location: "death mountain",
salary: 40000,
id: "2",
},
{
title: "flute player",
location: "the lost woods",
salary: 35000,
id: "3",
},
{ title: "fisherman", location: "lake hylia", salary: 21000, id: "4" },
{
title: "prison guard",
location: "gerudo valley",
salary: 32000,
id: "5",
},
]);
return { jobs };
},
기본 및 핵심 개념 기반 - Vue의 DOM 상호 작용
중재 대책?
<form v-on:submit.prevent> = event.preventDefault
const app = Vue.createApp({})
app.mount("#id")
<input type="text v-on:input="setName($event, "lastName") />
setName(event, lastName) {
this.name = event.target.value + " " + lastName;
}
<button v-on:click.right="sample">sample</button>
<input
type="text"
v-on:input="setName($event, 'Matsumoto')"
v-on:keyup.enter="confirmInput"
/>
<p v-once>Starting Counter: {{ counter }}</p>
<input type="text" v-model="name" />
이럴 때는 ()
<p>Your Name: {{ fullname }}</p>
computed: {
fullname() {
console.log("Running again...");
if (this.name === "") {
return "";
}
return this.name + " " + "Matsumoto";
},
},
데이터로 만든 값의 변경을 확인해서 함수를 실행할 수 있을 것 같습니다.
카운트다운 같은 거.
파도로 타이머 같은 건 간단해.
data() {
return {
name: "",
lastName: "",
fullname: "",
};
},
watch: {
name(value) {
if (value === "") {
this.fullname + "";
} else {
this.fullname = value;
}
},
lastName(value) {
if (value === "") {
this.fullname = "";
} else {
this.fullname = this.name + " " + value;
}
},
},
이벤트 바인딩 또는 데이터 바인딩에 사용
데이터 바인딩.메서드는 각 어셈블리의 재생성 주기에 대해 수행됩니다.
재평가가 필요한 이벤트나 데이터에 항상 사용됩니다.
computed
데이터 바인딩에 사용
계산된 속성은 사용된 값 중 하나가 변경된 경우에만 재평가됩니다.
다른 데이터에 의존하는 데이터
watch
템플릿에서 직접 사용하지 않음
변경된 데이터에 반응하여 임의의 코드(예를 들어 Http 요청 발송 등)를 실행할 수 있다.
데이터 이외의 업데이트를 진행하는 데 사용합니다.
단축
v-on = @
v-bind = :
v-on:click = @click
v-on:click.right = @click.right
v-bind:value = :value
<div
class="demo"
:style="{borderColor: boxASelected ? 'red': '#ccc'}"
@click="boxSelected('A')"
></div>
<div
class="demo"
:class="{active: boxASelected}"
@click="boxSelected('A')"
></div>
<div
:class="['demo',{active: boxBSelected}]"
@click="boxSelected('B')"
></div>
Vue는 단계가 아닌 대상을 정의할 수 있습니다(선언 방법).
Vue를 HTML 요소에 연결하려면 [el]을 사용합니다.Vue 는 연결된 템플릿을 기반으로 실제 DOM 구현
플러그인 ({{}) 이나 v-bind (":") 디렉터리를 통해 데이터를 묶을 수 있습니다.
이벤트를 v-on("@")으로 청취합니다.
바인딩 데이터가 변경되면 Vue는 실제 DOM을 업데이트합니다.
계산의 속성과 관찰자에 따라 데이터의 변경에 대응할 수 있다
Vue는 동적 CSS 클래스 및 인라인 바인딩을 지원합니다.
Vue에는 유효한 바인딩을 위한 여러 가지 특수 구문(객체 기반, 정렬 기반)이 있습니다.
조건부 컨텐트 및 목록 표시
v-if
<p v-if="goals.lenghth === 0">
No goals have been added yet - please start adding some!
</p>
<ul v-else-if="goals.lenthg > 0">
<li>Goal</li>
</ul>
<p v-else>...</p>
<li v-for="goal in goals">{{goal}}</li>
<li v-for="(goal, index) in goals">{{goal}} - {{ index }}</li>
<li v-for="(value, key, index) in {name: 'Max', age: 31}">
{{ key }}: {{ value }} - {{ index }}
</li>
<li v-for="num in 10">{{num}}</li>
<li v-for="(goal, index) in goals" @click="removeGoal(index)">
{{goal}} - {{ index }}
</li>
removeGoal(index) {
this.goals.splice(index, 1);
},
<li
v-for="(goal, index) in goals"
:key="goal"
@click="removeGoal(index)"
>
<p>{{goal}} - {{ index }}</p>
<input type="text" @click.stop />
</li>
조건부 내용
V-if(및 v-show)에서는 특정 조건이 충족된 경우에만 컨텐트를 표시할 수 있습니다.
v-if는 v-else와 v-else-if와 조합할 수 있다(직접적인 형제 요소에서만 가능).
리스트
v-for는 여러 요소를 동적으로 렌더링하는 데 사용할 수 있습니다.
V-for 변수
값, 값 및 인덱스 또는 값, 키 및 인덱스를 추출할 수 있습니다.
v-for와 v-if가 필요할 때 같은 원소에 사용하지 마십시오.v-if가 달린 자물쇠로 대체하세요.
키
Vue는 DOM 요소를 사용하여 성능을 최적화하고 있습니다.
원소가 상태를 포함하면 구린내가 날 수 있습니다.
키 속성을 고유 값으로 바인딩하여 목록 컨텐트의 요소를 Vue에서 인식할 수 있도록 합니다.
>의 코드에서 계산 공식을 사용할 때, 먼저 탭에 쓴 다음에 컴퓨터 방법을 사용하는 것이 가장 좋다
css 백분율에 따라 동적 변화와 횟수에 따라 단추 사용하기
<div class="healthbar__value" :style="monsterBarStyles"></div>
<div class="healthbar__value" :style="playerBarStyles"></div>
<button :disabled="mayUseSpecialAttack" @click="specialAttackMonster">
computed: {
monsterBarStyles() {
return { width: this.monsterHealth + "%" };
},
playerBarStyles() {
return { width: this.playerHealth + "%" };
},
mayUseSpecialAttack() {
return this.currentRound % 3 !== 0;
},
},
<input type="text" ref="userText" />
setText() {
this.message = this.$ref.userText.value;
},
왜 그랬을까?
Vue 애플리케이션은 서로 독립적이기 때문에 실제로 통신할 수 없습니다.이를 달성하기 위한'해커'가 있을 수 있지만, 앱 간 데이터 공유, 앱 B에서 무슨 일이 생겼을 때 앱 A로 무엇을 업데이트하는 것처럼 훌륭한'공식'방법은 없다.
다른 한편, 구성 요소는 특정한 통신 메커니즘을 제공하여 즉각 그들 사이에서 데이터를 교환할 수 있다.따라서 하나의 루트 응용 프로그램을 사용하여 여러 구성 요소를 저장하면 연결된 UI를 구성할 수 있습니다.
단일 페이지 응용 프로그램을 사용하는 이유는 데이터 교환의 장점을 포함한다.
여기서부터 vue-cli를 사용할 때의 포인트.
구성 요소 간의 데이터 교환
JavaScript는 낙타 껍질로 상대적이다(처음에는 소문자로 구분된 대문자)
HTML 부분용 트임 박스
<script>
export default {
props: ["name", "phoneNumber", "emailAddress"],
};
</script>
<friend-contact
name="Maunel Lorenz"
phone-number="01234 78992"
email-address="[email protected]"
></friend-contact>
<friend-contact
name="JulieJones"
phone-number="0987 654321"
email-address="[email protected]"
></friend-contact>
받은 데이터를 저장하는 방법으로 OK
props: ["name", "phoneNumber", "emailAddress", "isFavorite"],
data() {
return {
detailsAreVisible: false,
friendIsFavorite: this.isFavorite,
};
},
toggleFavorite() {
if (this.friendIsFavorite === "1") {
this.friendIsFavorite = "0";
} else {
this.friendIsFavorite = "1";
}
},
<h2>{{ name }} {{ friendIsFavorite === "1" ? "(Favorite)" : "" }}</h2>
대상에서 type과 Required 등 다양한 정의를 정의할 수 있습니다
props: {
id: {
type: String,
required: true,
},
name: { type: String, required: true },
phoneNumber: { type: String, required: true },
emailAddress: { type: String, required: true },
isFavorite: { type: Boolean, required: false, default: false },
// validator: function(value) {
// return value === "1" || value === "0";
// },
},
구성 요소는 UI를 구성하는 데 사용됩니다.
구성 요소가'부자 관계'를 구축하여'단방향성'의 데이터 흐름을 사용하여 통신하다
props
프로그램은 데이터를 부모 구성 요소에서 하위 구성 요소로 전달하는 데 사용됩니다.
프로그램은 사전에 정의해야 하고 상황에 따라 매우 상세하게 정의해야 한다(유형, 필수 등).
사용자 정의 이벤트(아바마)
'사용자 정의 이벤트' 는 모듈을 시작하는 방법 ($emit) 을 통해 보냅니다.
사용자 정의 이벤트는 호출 방법에 사용된 데이터를 휴대할 수 있습니다.
농축
여러 구성 요소 사이에서 데이터를 수신할 필요가 있으면provide/inject를 사용할 수 있습니다.
부모 어셈블리를 사용하여 데이터를 제공하고 이를 서브어셈블리에 주입합니다.
slot
구성 요소의 내용을 전달할 수 있습니다
텍스트 뿐만 아니라 HTML 태그도 마찬가지
v-slot
아래 서술한 것처럼 형식을 단축할 수도 있다
<template #default>
Reference
이 문제에 관하여(vue.js에서 신경 쓰는 요점 노트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/kazumasa/articles/82624bc2eeef5c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
