zoukankan      html  css  js  c++  java
  • 第四课 本文件用于学习vue双向绑定

    <template>
    <!-- 本文件用于学习vue双向绑定 -->

      <div id="app">

          <h2>{{msg}}</h2>

          <input type="text" v-model='msg' />


          <button v-on:click="getMsg()">获取表单里面的数据get</button>


          <button v-on:click="setMsg()">设置表单的数据set</button>

          <br>
          <br>
          <hr>

          <br>
          <br>
          <input type="text" ref="userinfo" />
          <br>
          <br>
          <div ref="box">我是一个box</div>

          <br>
          <br>
          <button v-on:click="getInputValue()">获取第二个表单里面的数据</button>



      </div>
    </template>

    <script>


      /*
      双向数据绑定   MVVM   vue就是一个MVVM的框架。

      M  model

      V  view

      MVVM:  model改变会影响视图view,view视图改变反过来影响model


      双向数据绑定必须在表单里面使用。


      */

        export default {
          data () {  /*业务逻辑里面定义的数据*/
            return {
              msg: '你好vue'
            }
          },methods:{   /*放方法的地方*/

              getMsg(){

                  // alert('vue方法执行了');

                  //方法里面获取data里面的数据


                    alert(this.msg);



              },
              setMsg(){
                  this.msg="我是改变后的数据";

              }, getInputValue(){

                  //获取ref定义的dom节点,函数绑定事件的固定用法this.$refs.userinfo
                  console.log(this.$refs.userinfo);
                  alert(this.$refs.userinfo.value);

                  //this.$refs固定用法,box与上面div标签对应
                  this.$refs.box.style.background='red';
              }

          }
        }
    </script>


    <style lang="scss">



    </style>
  • 相关阅读:
    网络技术全方位解析之三:RAID
    Linux系统安全隐患及加强安全管理的方法
    Silverlight 程序架构
    (转载)Qt:给QLineEdit加上一个搜索按钮
    (转载)StarUML启动时候出现"System Error. Code:1722. RPC服务器不可用."错误的解决办法
    (转载)starUML connect elements exactly
    (转载)Qt:拖拽图片到QLabel上并显示
    (转载)Qt:禁止qDebug的输出
    (转载)葱的营养价值和食用功效
    (转载)Qwt的安装与使用
  • 原文地址:https://www.cnblogs.com/netflix/p/14626484.html
Copyright © 2011-2022 走看看