vue가 mvvm 모드에 있나요?
- WBOY원래의
- 2022-04-08 11:33:184243검색
vue는 mvvm 모드입니다. Vue에서 지원되는 양방향 바인딩은 mvvm 모드를 사용합니다. m 레이어 데이터가 수정되면 vm 레이어는 변경 사항을 감지하고 해당 수정을 수행하도록 v 레이어에 알립니다. 즉, 데이터가 뷰에 영향을 미칩니다. 데이터에 매우 영향을 미칩니다. 개발 효율성이 크게 향상됩니다.
이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.
vue는 mvvm 모드인가요?
MVVM은 Model-View-ViewModel이고, vue는 mvvm 모드입니다.
모델은 데이터 모델입니다(데이터 계층이라고도 함). 고정된 데이터일 수도 있고 서버에서 요청한 데이터일 수도 있습니다.
View는 주로 사용자에게 정보를 표시하는 데 사용되는 페이지 DOM(뷰 레이어라고도 함)입니다.
vue의 ViewModel은 View와 Model 사이의 통신 브리지 역할을 하는 vue 인스턴스(데이터 모델 레이어라고도 함)를 나타냅니다.
ViewModel은 Vue.js의 핵심이자 Vue 인스턴스입니다. Vue 인스턴스는 특정 HTML 요소에 대해 작동합니다. 이 요소는 HTML 본문 요소 또는 지정된 ID를 가진 요소일 수 있습니다.
ViewModel을 생성한 후 양방향 바인딩이 이루어집니다
우선 위 그림의 DOM Listener와 Data Bindings를 양방향 바인딩을 달성하는 데 핵심인 두 가지 도구로 간주합니다.
View 측면에서 보면 ViewModel의 DOM Listeners 도구는 페이지의 DOM 요소 변경 사항을 모니터링하는 데 도움이 됩니다.
모델 측면에서 보면 업데이트할 때 Model의 데이터를 사용하면 데이터 바인딩 도구를 사용하여 페이지의 DOM 요소를 업데이트할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- div铺满全屏而不是缩放网页 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，
这实际上破坏了“锁定”模式。即如果你有IE9的话说明你有IE789，那么就调用高版本的那个也就是IE9。
-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>原生实现js实现M-V-VM</title>
<script>
/*
MVVM : model 模型对象--》指的是构成界面内容的相关数据
view 视图对象--》指的给给用户或者开发者展示数据的界面
viewmodel 视图模型对象--》 指的是view与model之间的桥梁
*/
let msg="Hello world!";//相当于model
window.onload=function(){
let h4Dom = document.getElementById("h4Dom");
let inputDom = document.getElementById("inputDom");
h4Dom.innerHTML=msg;
inputDom.value=msg;
//通过对事件源的监听来实现，为js对象实现动态事件监听
//input输入事件
inputDom.addEventListener("input",function(){
msg=this.value;
h4Dom.innerHTML=msg;
});
}
</script>
</head>
<body>
<div>
<h4 id="h4Dom"></h4>
<input type="text" value="" id="inputDom"/>
</div>
</body>
</html>얻은 효과:
[관련 추천: "vue.js tutorial"]
위 내용은 vue가 mvvm 모드에 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!