当前位置：网站首页>MVVM model

MVVM model

2022-04-23 18:40:00 【_ ocean】

List of articles

meaning
characteristic

meaning

M: Model (Model) : Corresponding data Data in
V: View (View): Templates , Corresponding to the page
VM: Model view (ViewModel) : Vue Instance object

ViewModel abbreviation vm, It also corresponds to vue, therefore vue Objects created often use variable names vm receive .

eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1> School name ：{
   {name}}</h1>
       <h1> School address ：{
   {address}}</h1>
    </div>
  </body>
  <script> Vue.config.productionTip = false; new Vue({
       el:'#root', data:{
       name:' Baidu ', address:' Beijing ' } }) </script>
</html>

analysis :
Insert picture description here

characteristic

1.data All the attributes in , Finally, it all appeared in vm On the body .—— Data brokers
eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1> School name ：{
   {name}}</h1>
       <h1> School address ：{
   {address}}</h1>
    </div>
  </body>
  <script> Vue.config.productionTip = false; const vm = new Vue({
       el:'#root', data:{
       name:' Baidu ', address:' Beijing ' } }) console.log(vm); </script>
</html>

Insert picture description here

2.vm All the attributes and Vue All properties on the prototype , stay Vue Templates can be used directly .
eg：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h1> School name ：{
   {name}}</h1>
       <h1> School address ：{
   {address}}</h1>
       <h1> monitor ：{
   {$listeners}}</h1>
       <h1>_hasHookEvent：{
   {_hasHookEvent}}</h1>
    </div>
  </body>
  <script> Vue.config.productionTip = false; const vm = new Vue({
       el:'#root', data:{
       name:' Baidu ', address:' Beijing ' } }) console.log(vm); </script>
</html>