Vue.js+JavaScript 양방향 데이터 바인딩
3775 단어 JavaScriptVue.js
입문
처음 보는 사람. 처음 보는 사람.
나 돼지 새끼야.
최근 Vue.js를 배우기 시작했기 때문에 투고해 봤어요.
처음 갑니다.
무엇이 양방향 데이터 귀속입니까?
쌍방향 데이터 연결에 대해 이야기합시다.
어려운 설명을 하려면 자신도 모르기 때문에 자신이 이해하는 범위 내에서
/데이터 업데이트 후 UI 업데이트
UI 업데이트 후 데이터 업데이트
위의 두 점은 그 특징이다.
예를 들어 다음과 같이 입력하면 화면에도 문자가 나타난다.
해설
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>双方向データバインディング</title>
</head>
<body>
<!-- データからUIに反映 -->
<div id="app">
<p>{{ message }}</p>
<!-- UIからデータに反映 -->
<p><input type="text" v-model="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
입력한 문자를 {message} 섹션에 표시합니다.
텍스트 상자에 v-model을 사용하면
input 요소에 입력하거나 요소의 값을 선택할 수 있습니다.
다음은 JS.
js/main.js(function() {
'use strict';
new Vue({
el: '#app',
// モデルにデータを保持
data: {
message: ''
}
})
})();
Vue 인스턴스(new Vue)를 작성하면 Vue가 됩니다.js 이동.
el은 elements의 줄임말로 이번에 id를 지정했습니다.
데이터에 방금 v-model에서 지정한 메시지를 쓰십시오.
처음부터 데이터를 유지하려면 (예를 들어) 다음 내용을 보충하십시오. // モデルにデータを保持
data: {
message: 'ばなな'
}
여기서 마치겠습니다.
감사합니다.
마지막
Markdown의 작법을 몰라서 참고했습니다.
https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1
감사합니다.
Reference
이 문제에 관하여(Vue.js+JavaScript 양방향 데이터 바인딩), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/pig_buhi555/items/a3ad0e8f7a13c6d49234
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
쌍방향 데이터 연결에 대해 이야기합시다.
어려운 설명을 하려면 자신도 모르기 때문에 자신이 이해하는 범위 내에서
/데이터 업데이트 후 UI 업데이트
UI 업데이트 후 데이터 업데이트
위의 두 점은 그 특징이다.
예를 들어 다음과 같이 입력하면 화면에도 문자가 나타난다.
해설
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>双方向データバインディング</title>
</head>
<body>
<!-- データからUIに反映 -->
<div id="app">
<p>{{ message }}</p>
<!-- UIからデータに反映 -->
<p><input type="text" v-model="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
텍스트 상자에 v-model을 사용하면
input 요소에 입력하거나 요소의 값을 선택할 수 있습니다.
다음은 JS.
js/main.js
(function() {
'use strict';
new Vue({
el: '#app',
// モデルにデータを保持
data: {
message: ''
}
})
})();
el은 elements의 줄임말로 이번에 id를 지정했습니다.
데이터에 방금 v-model에서 지정한 메시지를 쓰십시오.
처음부터 데이터를 유지하려면 (예를 들어) 다음 내용을 보충하십시오.
// モデルにデータを保持
data: {
message: 'ばなな'
}
여기서 마치겠습니다.
감사합니다.
마지막
Markdown의 작법을 몰라서 참고했습니다.
https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1
감사합니다.
Reference
이 문제에 관하여(Vue.js+JavaScript 양방향 데이터 바인딩), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/pig_buhi555/items/a3ad0e8f7a13c6d49234텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
