Vuejs 단방향 바인딩, 양방향 바인딩, 목록 렌더링, 응답 기능-JS 튜토리얼-php.cn

Vuejs 단방향 바인딩, 양방향 바인딩, 목록 렌더링, 응답 기능

高洛峰

풀어 주다： 2017-01-20 10:21:09

원래의

1634명이 탐색했습니다.

구성요소란 무엇인가요?

컴포넌트는 Vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화할 수 있습니다. 높은 수준에서 구성 요소는 Vue.js 컴파일러가 특별한 기능을 추가하는 사용자 정의 요소입니다. 경우에 따라 구성 요소는 is 속성으로 확장된 기본 HTML 요소의 형태를 취할 수도 있습니다.

다음으로 vuejs의 단방향 바인딩, 양방향 바인딩, 목록 렌더링, 응답 기능에 대한 기본 지식을 소개하겠습니다.

(1 ) 단방향 바인딩

<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
message: &#39;Hello Vue.js!&#39;
}
})
</script>

로그인 후 복사

①el은 바인딩을 의미해야 합니다. 바인딩 id=app 태그

는 다음과 같이 변경할 수도 있습니다.

<div class="app">
{{ message }}
</div>

로그인 후 복사

el: '.app' ,

효과도 비슷합니다.

그러나 여러 개가 있는 경우 첫 번째에만 유효합니다.

<div class="app">
{{ message }}
</div>
<div class="app">
{{ message }}
</div>
Hello Vue.js!
{{ message }}

로그인 후 복사

② data의 메시지 변수는 {{message}

의 값을 나타냅니다.

(2) 양방향 바인딩

<div id="app">
{{ message }}
<br/>
<input v-model="message"/>
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
message: &#39;Hello Vue.js!&#39;
}
})
</script>

로그인 후 복사

효과는 다음과 같습니다.

①입력 입력 상자에 초기 값이 있으며, 그 값은 데이터의 메시지 속성 값입니다. ;

②입력 상자의 값을 수정하면 외부 값에 영향을 줄 수 있습니다.

(3) 함수 반환 값

<div id="app">
{{ message() }}
<br/>
<input v-model="message()"/>
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
message: function () {
return &#39;Hello Vue.js!&#39;;
}
}
})
</script>

로그인 후 복사

효과:

Vuejs 단방향 바인딩, 양방향 바인딩, 목록 렌더링, 응답 기능

① 출력 값은 메시지의 반환 값이기도 합니다.

②단점: 양방향 바인딩이 손실됩니다.

(4) 렌더링 목록

<div id="app">
<ul>
<li v-for="list in todos">
{{list.text}}
</li>
</ul>
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
todos: [
{text: "1st"},
{text: "2nd"},
{text: "3rd"}
]
}
})
</script>

로그인 후 복사

v-for의 목록은 i의 for in과 유사합니다.

제 생각에는 ,

① todos의 list를 list in todos와 동일하게 이해하면 됩니다

②그러면 다음 줄의 list.text는 todos[list].text로 이해하면 됩니다

그런 다음 v-for 태그가 어디에 있든 이를 기반으로 여러 번 복사됩니다.

(5) 사용자 입력 처리

<div id="app">
<input v-model="message">
<input type="button" value="值+1" v-on:click="add"/>
<input type="button" value="值-1" v-on:click="minus"/>
<input type="button" value="重置归零" v-on:click="reset"/>
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
message: 1
},
methods: {
add: function () {
this.message++; //这步要加this才能正确获取到值
},
minus: function () {
this.message--;
},
reset: function () {
this.message = 0;
}
}
})
</script>

로그인 후 복사

효과:

① 입력 상자의 값은 추가 버튼을 한 번 클릭하면 값이 + 1;

②추가할 수 없는 경우 NaN과 같이 일반 표현식을 잘못 추가한 것처럼 결과가 반환됩니다.

③ 데이터의 메시지 값은

④methods는 쉼표로 구분된 함수 컬렉션입니다.

⑤ 값을 가져올 때 이것을 추가합니다. 예를 들어 this.message는 메시지 값을 가져옵니다.

(6) 다기능

<div id="app">
<input v-model="val" v-on:keypress.enter="addToList">
<ul>
<li v-for="val in values">
{{val.val}}
<input type="button" value="删除" v-on:click="removeList($index)"/>
</li>
</ul>
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
val: "1",
values: []
},
methods: {
addToList: function () {
var val = parseInt(this.val.trim()); //注意，因为当上面的val是字符串类型的时候，才能用trim()，如果是数字类型，则用this.val
if (val) {
this.values.push({val: val});
}
this.val = String(val + 1);
},
removeList: function (index) {
this.values.splice(index, 1);
}
}
})
</script>

로그인 후 복사

효과:

①초기 입력 상자의 값은 1입니다. 🎜>

② 입력창에서 Enter 키를 누르면 입력창의 내용이 숫자로 변환되어 변환된 숫자와 삭제 버튼이 있는 목록에 추가되며, 입력창의 값은 값은 숫자 + 1로 변환됩니다.

그림과 같이:

③ 그의 추가는 양방향 바인딩을 사용하여 입력 값을 데이터를 배열한 다음 목록 렌더링 효과를 사용하여 여러 줄의 값을 출력합니다.

4버튼 태그에는 행의 인덱스인 매개변수에 함수의 매개변수 이름을 부여합니다. 매개변수 이름은 $index

⑤입니다. 버튼 태그, 트리거 함수 함수 이름은 괄호를 사용하거나 사용하지 않고 추가할 수 있습니다. 실제 테스트에는 효과가 없는 것 같습니다.

(7) 태그 및 API 요약(1)

① {{ 변수 이름}}

은 바인딩된 변수를 나타내며, 다음과 같은 경우에 사용해야 합니다. 호출. 변수 이름

② v-model="Variable"

은 입력에 추가된 유형이 없으면 텍스트입니다. 예를 들어

<input v-model="DATE" type="date"/>
<li>{{DATE}}</li>

로그인 후 복사

는 날짜 유형 입력 상자의 값을 li 태그에 표시된 콘텐츠에 바인딩합니다.

3 v-on:click="함수 이름"

이 함수는 클릭 시 실행되며, ()를 추가하거나 추가할 수 있으며 $index를 나타내는 매개 변수로 사용됩니다. 인덱스, 인덱스 값은 0부터 시작합니다.

④ v-for

양방향 바인딩은 배열 콘텐츠가 업데이트된 후 실시간으로 업데이트됩니다.

도 마찬가지입니다. for in 문과 유사하며 자주 사용되는 것은

⑤ v-on: event

이며 클릭(click), 키 누르기(key)를 포함하여 트리거되는 이벤트입니다. press)

이벤트 keypress.enter는 캐리지 리턴, keypress.space는 공백 등과 같은 보다 구체적인 정보가 뒤따를 수 있습니다.

필요한 경우 자세히 보기

⑥ new vue

vue의 인스턴스를 새로 전달한 다음 이 인스턴스에 개체를 매개변수로 전달합니다.

그중

el은 바인딩된 템플릿(첫 번째 바인딩된 템플릿만 일치함)

data는 데이터를 나타내며 직접 사용할 수 있습니다. 예를 들어 v-model 또는

메서드에서 사용할 수 있습니다. 메소드를 나타냅니다

⑦ 변수

는 이를 통해 함수 내부에서 호출됩니다. 예:

data: {
val: "1",
values: []
},
methods: {
addToList: function () {
console.log(this.val);

로그인 후 복사

여기서 this.val은 위의 data.val이며 HTML에도 있습니다. {{val}} 역시 v-model="val"이지만

<li v-for="val in values">
{{val.val}}
<input type="button" value="删除" v-on:click="removeList($index)"/>
</li>

로그인 후 복사

의 val.val은 아닙니다.

이유는 개인적으로 여기의 val이 -for 범위 내에서 v -에 있으므로 값의 val이 범위 체인에서 더 높은 우선순위를 갖는다고 생각합니다

궁금한 점이 있는 경우 메시지를 남겨주시면 편집자가 모든 사람에게 즉시 답변해 드리겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

Vuejs 단방향 바인딩, 양방향 바인딩, 목록 렌더링 및 응답 기능과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!