vue 基础 data含义、MVVM模型、v-model双向绑定、v-on:click、v-for、this的使用

最新推荐文章于 2024-05-13 16:55:49 发布

Take^that

最新推荐文章于 2024-05-13 16:55:49 发布

阅读量424

点赞数

分类专栏：前端文章标签： v-model双向绑定 v-on:click v-for this data

本文链接：https://blog.csdn.net/qq_37767455/article/details/102255057

版权

前端专栏收录该内容

85 篇文章 0 订阅

订阅专栏

章节2.2

<body>
    <div id="app">{{content}}</div>
    <script>
      //原始 写法
      //var dom =document.getElementById("app");
      //dom.innerHTML='hello world';

      //data:用于定义数据
      //el:限制了一个VUE实例处理DOM的范围

      var app=new Vue({
         el:'#app',  //new 出来的实例负责管理的区域
          data:{
             content:'hello world2'
          }
      });

      setTimeout(function () {
          //$data理解为 一个对象
          app.$data.content = 'What do you mean?'
      },2000);
    </script>
</body>

章节2.3

在这里插入图片描述

<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <button v-on:click="handleBtnClick">提交</button>
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>

    <script>
        //data:用于定义数据
        //el:限制了一个VUE实例处理DOM的范围
        /*v-model双向绑定 ：input框内容发生变化的时候，
      Vue实例中data里面的inputValue也会发生变化,
      同样，当Vue实例中data里面的inputValue变量发生变化时，页面也会跟着发生变化
        */

       /*MVVM
       M层:data数据    V层:div展示的视图
       VM层（我们无需实现）:Vue即是VM层

       Vue监听到数据变了，就帮我们改变视图层

       Vue也能在视图层监听到一些事件触发，
       然后通过VM这一层来调用我们写的逻辑代码(比如methods里面的)
       从而又改变了M层的数据

       这样的好处:我们只需关注M层，对数据进行处理
        */


       var app=new Vue({
           el:'#app',  //new 出来的实例负责管理的区域
           data:{
              list: ['What do you mean?','do not kick the chair','自嘲'],
              inputValue:''
           },
           methods:{
               handleBtnClick:function () {
                   //使用this.list: vue会自动去data里面找list属性
                   this.list.push(this.inputValue)
                   //使用this.inputValue: vue会自动去data里面找inputValue属性
                   this.inputValue=''; 
               }
           }
       });
    </script>
</body>

在这里插入图片描述
点击提交：

同理：
控制台输入app.$data.inputValue = ‘take your time’
在这里插入图片描述
然后回车：

Take^that

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 基础 data含义、MVVM模型、v-model双向绑定、v-on:click、v-for、this的使用

章节2.2<body> <div id="app">{{content}}</div> <script> //原始写法 //var dom =document.getElementById("app"); //dom.innerHTML='hello world'; //data:...
复制链接

扫一扫