Adakah vue dalam mod mvvm?-Soal Jawab bahagian hadapan-php.cn

Rumah

hujung hadapan web

Soal Jawab bahagian hadapan

Adakah vue dalam mod mvvm?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Apr 08, 2022 am 11:33 AM

vue

vue ialah mod mvvm. Pengikatan dua hala yang disokong dalam Vue menggunakan mod mvvm Apabila data lapisan m diubah suai, lapisan vm akan mengesan perubahan dan memberitahu lapisan v untuk membuat pengubahsuaian yang sepadan, iaitu, data mempengaruhi paparan dan paparan mempengaruhi data secara amat Ia meningkatkan kecekapan pembangunan.

Adakah vue dalam mod mvvm?

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Adakah vue dalam mod mvvm?

MVVM ialah Model-View-ViewModel dan vue dalam mod mvvm.

Model ialah model data (juga merujuk kepada lapisan data Ia boleh menjadi data tetap kami, atau ia boleh menjadi data yang diminta daripada pelayan).
Paparan ialah DOM halaman (juga dirujuk sebagai lapisan paparan), yang digunakan terutamanya untuk memaparkan maklumat kepada pengguna.
ViewModel in vue merujuk kepada contoh vue (juga merujuk kepada lapisan model data) yang bertindak sebagai jambatan komunikasi antara View dan Model.

ViewModel ialah teras Vue.js, ia ialah contoh Vue. Contoh Vue bertindak pada elemen HTML tertentu Elemen ini boleh menjadi elemen badan HTML atau elemen dengan id tertentu.

Adakah vue dalam mod mvvm?

Pengikatan dua hala dicapai selepas mencipta ViewModel

Pertama, kami menganggap Pendengar DOM dan Pengikatan Data dalam rajah di atas sebagai dua alatan kunci untuk mencapai pengikatan dua hala.

Melihat dari sisi Paparan, alat Pendengar DOM dalam ViewModel akan membantu kami memantau perubahan dalam elemen DOM pada halaman Jika terdapat perubahan, tukar data dalam Model

Melihat dari bahagian Model, Apabila kami mengemas kini data dalam Model, alat Data Bindings akan membantu kami mengemas kini elemen DOM dalam halaman.

<!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>

Mencapai kesan:

Adakah vue dalam mod mvvm?

[Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Adakah vue dalam mod mvvm?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Memahami UseState (): Panduan Komprehensif untuk Menegaskan Pengurusan NegeriApr 25, 2025 am 12:21 AM

useState () isareacthookusedtomanagestateinfunctionalcomponents.1) itinitializesandupdatesstate, 2) harusbecalledatthetoplevelofcomponents, 3) canleadto'stalestate'ifnotusedCorrecly, dan4)

Apakah kelebihan menggunakan React?Apr 25, 2025 am 12:16 AM

Reactispopularduetoitscomponent-berasaskan-berasaskan, virtualdom, richecosystem, anddeclarativenature.1) komponen-berasaskan komponen yang tidak dapat dipisahkan.

Debugging dalam React: Mengenal pasti dan menyelesaikan masalah biasaApr 25, 2025 am 12:09 AM

TODEBUGREACTAPPLICATIONSEFECTIVELY, USETHESESTRATION

Apakah yang dimaksudkan dengan USESTATE ()?Apr 25, 2025 am 12:08 AM

useState () inreactallowsstatemanagementInfunctionalcomponents.1) itimplifiesstatemanagement, makeCodeMoreconcise.2) usetheprevcountfunctionToupdatestateBasedonitsPreviousValue, elesteringStalestateSsues.3)

useState () vs usereducer (): memilih cangkuk yang tepat untuk keperluan negara andaApr 24, 2025 pm 05:13 PM

PILISEUSESTATE () Forsimple, IndependentStateVariables; useUsereducer () forComplexStateLogicorWhenStededededSonPreviousState.1) useState () isIdealForsimpleupdatesliketogglingabooleanorupdatingAcounter.2)

Menguruskan Negeri dengan UseState (): Tutorial PraktikalApr 24, 2025 pm 05:05 PM

UseState lebih tinggi daripada komponen kelas dan penyelesaian pengurusan negeri yang lain kerana ia memudahkan pengurusan negeri, menjadikan kod lebih jelas, lebih mudah dibaca, dan selaras dengan sifat deklaratif React. 1) UseState membolehkan pemboleh ubah negeri diisytiharkan secara langsung dalam komponen fungsi, 2) ia mengingati negara semasa membuat semula melalui mekanisme cangkuk, 3) menggunakan useState untuk menggunakan pengoptimuman reaksi seperti menghafal untuk meningkatkan prestasi,

Bila Menggunakan UseState () dan Bila Mempertimbangkan Penyelesaian Pengurusan Negeri AlternatifApr 24, 2025 pm 04:49 PM

UseUsestate () forlocalComponentStatemanagement; pertimbangan yang tidak dapat dipertahankan, kompleksLogic, orperformanceissues.1) useState () isidealforsimple, localstate.2) useglobalStatesolutionsLikereduxorcontextForShorSharsharedState.3)

Komponen yang boleh diguna semula React: Meningkatkan Pengekalkan dan Kecekapan KodApr 24, 2025 pm 04:45 PM

ReusablecomponentsinreactenhanceCodeMaintainabilityandficiencybylowingdevelperstousethesamecomponentacrossdifferentpartsofanapplicationorprojects.1) merekaReduceredundancyandsimplifyupdates.2) mereka

See all articles