使用vue写个简单的TODOlist,vue的优点,MVVM的操作模式

向右看齐 2022-01-26 15:39 250阅读 0赞

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue</title>
    <script src="./vue.js"></script>
    // 引入vuejs文件 https://cdn.jsdelivr.net/npm/vue
    </head>
    <body>
    <div id ="app">
        <input type="text" v-model="inputV"/>
        // v-model 指的是数据双向绑定(意思是当input框发生变化的时候, data里的数据也会进行变化,
        同样当data中的inputV发生变化的时候 页面也会发生变化
        ) 
        <button v-on:click="handleClick">提交</button>
        // v-on:click 点击事件
        <ul>
            <li v-for="item in list">{
       { item }}</li>
            // v-for 循环时间
        </ul>
    </div>
    <script>
        var app = new Vue({
          el: '#app',
          data : {
            list: [],
            inputV: ' '
          },
          methods:{
            handleClick: () => {
            // 箭头函数注意this 的指向是 Windows 需要this.app.list
              this.app.list.unshift(this.app.inputV)
            }
          }
        })
    </script>
    </body>
    </html>

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o5MzcwMTA4MQ_size_16_color_FFFFFF_t_70]

## 从上面能看出我们并没有操作DOM语句而是在操作数据,页面中的数据我们放在list中,input框中的内容我们放在inputV中,在做一些操作的时候触发点使用button按钮进行操作,在操作button的时候不是在改变DOM而是在改变数据,当我们把数据进行变更的时候vue中他的底层会自动的跟着数据的不同帮助我们从新去渲染页面,这就是vue的优点. 这种操作模式就是MVVM的操作模式 ##

--------------------

M是js处理数据  
V是html  
vm是vue中的数据结构和虚拟DOM  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o5MzcwMTA4MQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o5MzcwMTA4MQ_size_16_color_FFFFFF_t_70]: /images/20220126/35550d3a9aba4b15ad16368f83341375.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3o5MzcwMTA4MQ_size_16_color_FFFFFF_t_70 1]: /images/20220126/219297a995b54685b87b5a9dc012fd92.png