vue에서 v-model과 v-bind 귀속 데이터의 공통점과 차이점을 상세히 풀다

5982 단어 vuev-modelv-bind바인딩 데이터
vue의 템플릿은 DOM 템플릿을 사용합니다. 즉, 템플릿은 DOM 노드로 실행할 수 있습니다. 브라우저에서 오류를 보고하지 않고 데이터를 연결하는 세 가지 방식이 있습니다. 하나는 삽입값, 즉 {{name}}의 형식입니다. 하나는 v-bind, 그리고 하나는 v-model입니다.{{name}}의 형식은 비교적 이해하기 쉽다. 바로 텍스트의 형식과 실례 데이터에 대응하는 속성으로 귀속되는 것이다.예:

var app = new Vue({
 el: '#app',
 template: '<div @click="toggleName">{{name}}</div>',
 data: {
 name: 'tom',
 },
 method: {
 toggleName() {
 this.name = this.name === 'tom' ? 'sony' : 'tom'
 },
 },
})
위의 문자열 템플릿에는 {{name}}, 데이터가 있습니다.name는 데이터로 귀속됩니다.name가 변할 때 보기도 변합니다.
그러나 v-bind과v-model 이 두 가지 귀속은 구분하기 어렵다. 특히 표 요소에서 처음에는 도대체 어떻게 사용해야 하는지 헷갈린다.
v-bind
먼저 v-bind를 보면 그 용법은 뒤에 짝짓기를 하고 html 요소의attributions를 따라가는 것이다. 예를 들어

<p v-bind:class="classed">
여기 v-bind:class는 어떤 효과가 있을까요?실제로 먼저 v-bind:, 즉:를 추가하지 않으면 일반적인 p원소일 뿐, 하나를 함유하고 있음을 볼 수 있다.classed 클래스는 아무런 데이터도 참여하지 않습니다.
v-bind:를 더하면 달라집니다.그것의 값classed는 문자열이 아니라 vue 실례에 대응하는 데이터입니다.classed의 이 변수.그러니까 데이터.classed가 어떤 값인지, 데이터로 class 속성에 어떤 값을 전달합니다.classed가 변화할 때class 속성도 변화한다. 이것은 css를 통해 애니메이션 효과를 실현하는 장소에 매우 적합하다.class를 제외하고 다른 대부분의 html 원시적인 속성은 이런 방식으로 귀속할 수 있고 편의를 위해 직접 사칭 형식으로 줄일 수 있다. 예를 들어

var app = Vue({
 el: '#app',
 template: '<img :src="src">',
 data: {
 src: '',
 },
 beforeMount() {
 fetch(...).then(...).then(res => this.src = res.src) //  data.src
 },
})
위의 코드에서 기본적으로 데이터입니다.src는 빈 문자열입니다. 그림이 나타나지 않는다고 하지만 원격에서 그림 주소를 얻은 후에 데이터를 업데이트했습니다.src, 그림이 표시됩니다.
v-model
v-model은 주로 폼 요소에 사용되며 양방향 연결을 실현합니다.쌍방향 귀속은 모두가 잘 알고 있다. 간단하게 말하면 기본적인 상황에서 위의 두 가지 상황의 데이터 귀속과 같은 실례적인 데이터이다.name가 변할 때 대응하는 시도에서도 변합니다.그러나 v-model이 귀속되면 반대로 input에 새로운 내용을 수동으로 입력하고 데이터를 수정합니다.name의 값, 보기에서 다른 곳에서 데이터를 사용했다면.name, 그럼 이곳은 데이터 때문에.name의 변화로 인해 변화하여 관련 동적 효과를 실현합니다.다음은 밤을 들자.

var app = Vue({
 el: '#app',
 template: '<label><input v-model="name">{{name}}</label>',
 data: {
 name: '',
 },
})
위의 에name이 연결되어 있습니다. 그러면 input의value가 변화할 때 데이터입니다.name는 따라서 변화합니다. 데이터.이름이 {{name}} 변한 곳도 따라 바뀝니다.
v-model은 양방향 귀속입니다. 그러면 귀속된 요소는 값을 바꿀 기회가 있어야 합니다.그래서 실제로 v-model은 기본적으로 input,textarea,select 등 폼 요소에만 사용된다.
v-bind와 v-model 혼용
v-bind와 v-model을 함께 사용해야 하는 경우도 있습니다.이럴 때 조심하지 않으면 상황을 어지럽히고 어디를 어떻게 통제해야 할지 분간할 수 없다.밤을 들다.

<input :value="name" v-model="body">
위에는 밤이 하나 있다.data.name과 데이터.body, 도대체 누가 누구를 따라 변할까?심지어 충돌이 일어날까요?
실제로 그들의 관계는 위의 논술과 같다. v-bind가 발생하는 효과는 양방향 귀속을 포함하지 않기 때문에value의 효과는 input의value 속성 값을 데이터와 같게 하는 것이다.name의 값, v-model의 효과는 input와 데이터입니다.body는 양방향 연결을 설정합니다. 따라서 우선 데이터입니다.body의 값은 input의value 속성을 주고 그 다음에 input에 입력한 값이 변할 때 데이터입니다.바디는 또 따라 바뀐다.
지금의 문제는 이 두 개를 함께 사용할 때 누구나 우선순위가 높다는 것이다.누가 무효입니까?실험에 의하면 v-model이 사용될 것입니다. v-bind는 이때 무효입니다. 왜냐하면value 속성에 연결되어 있기 때문에 다른 속성에 묶이면 v-bind는 영향을 받지 않습니다.이런 상황에서 v-bind는 데이터를 수정하더라도 효력을 상실합니다.name, input에는 아무런 변화가 없습니다.
이것 또한 v-model이 구축한 쌍방향 귀속은 입력형 요소인 input,textarea,select 등에 우선권을 가지고 쌍방향 귀속을 강제적으로 실행할 수 있음을 설명한다. 원한다면.
이것은 단독 input에서 v-bind와 v-model을 동시에 사용하는 것은 필요하지 않지만 충돌을 일으키지 않는다는 것을 설명한다.
위에서 내가'단독'이라고 말한 것을 주의해라. 즉, 한 조의 입력에서 그것들은 또 다른 논점을 해야 한다는 것이다.한 그룹의 입력에는 라디오 그룹, 체크 그룹, 드롭다운 옵션, 드롭다운 옵션 그룹이 포함됩니다.

<label for="value in options">
 <input type="checkbox" :value="value" v-model="selected">
</label>
데이터에서는 다음과 같습니다.

data: {
 options: [1, 2, 3, 4, 5],
 selected: [],
}
체크 상자나 드롭다운 옵션 그룹, 즉 select mutiple = "true"의 경우, 그 결과는 하나의 값이 아니라 하나의 그룹이기 때문에 데이터입니다.selected는 하나의 수조입니다. 옵션이 선택되면 이 옵션의value 값이 데이터에 추가됩니다.selected (options 안의 순서가 아니라 조작 과정의 논리).이때:value는 유효합니다. 왜냐하면options 수조에 대응하는 옵션 값을value에 전달하는 것을 의미하기 때문에 양방향 귀속의 뜻이 아니라 전달된 값이기 때문입니다. (물론options에 대응하는 값이 변화할 때value 값도 변화합니다.)v-bind는value의 값을 맡고 v-model은 선택 상태를 맡는 셈이다.물론 v-model은 양방향 귀속입니다. 인터페이스에서 선택하면 데이터에 영향을 줄 수 있습니다.selected 값, 프로그램에서 데이터를 조작했습니다.selected도 인터페이스에 영향을 줄 수 있습니다.v-model은 선택 효과에 영향을 주고 v-bind는 값에 영향을 줍니다.(실제로 v-bind는 영향 값일 뿐이지만 선택 효과에도 영향을 미친다. 예를 들어 원래의 선택 상자가 선택되었는데 v-bind를 통해 귀속 값이 바뀌었다. 그러면 새로 온 값은 데이터.selected에 있지 않고 이 옵션은 선택되지 않는다. 만약 선택되지 않았다면 변경된 값은 데이터.selected에 있다.
주의, type='checkbox'가 확정된 경우에만 상기 상황을 발효시킬 수 있습니다. type 값은 동적 값이 될 수 없습니다. v-model이 같은 변수에 여러 번 귀속되었을 때 type 값을 검사해야 합니다. 만약에 이때 type이 동적입니다. 예를 들어 type='type'으로 동적 귀속을 하면 템플릿 컴파일이 잘못될 수 있습니다.
v-model은 사실 v-bind와 v-on의 문법 설탕입니다.
이것은 vue 공식 문서에서 특별히 지적한 것이다. 이 구절을 읽기 전에 나는 이것에 대해 매우 모호하다.<input v-model="something"> 사실은 <input v-bind:value="something" v-on:input="something = $event.target.value">의 문법 설탕이다
이때 이런 인식의 모호함은 사라졌다.
우리의 이 글은 v-on을 언급하지 않았는데, 그것은 사실 하나의 이벤트 귀속기이다.<input v-bind:value="something" v-on:input="something = $event.target.value">를 자세히 읽어 보니 두 부분으로 구성되어 있습니다. v-bind:value과v-on:input,value 속성과 input 이벤트가 있어야 합니다. 그렇지 않으면 v-model과 같지 않을 것입니다. 그리고 input 이벤트에서 바로something은 현재 입력 값과 같습니다.
정말 이 원리 때문에 v-model은 순식간에 더 이상 이해하기 어렵지 않게 되었다.
작은 매듭
한 마디로 하면 v-bind와 v-model을 구분하려면 세 마디만 기억해야 한다.
1. v-bind는 데이터 귀속으로 양방향 귀속 효과가 없지만 반드시 표 요소에 사용되지 않고 어떤 유효 요소에도 사용할 수 있다.
2. v-model은 양방향 귀속으로 기본적으로 표 요소에만 사용된다.
3. v-bind와 v-model이 한 원소에 동시에 사용될 때 각자의 역할은 변하지 않지만 v-model의 우선순위가 더욱 높고 이 원소가 단일한 것인지 한 그룹에 나타난 것인지 구분해야 한다.
vue에서 v-model과 v-bind 귀속 데이터의 공통점과 차이점을 상세히 설명하는 이 글은 여기에 소개합니다. vue에서 v-model과 v-bind 귀속 데이터에 대한 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 보십시오. 앞으로 많은 응원 부탁드립니다!
keyup과 keydown의 차이점
Unit 4-2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage