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>
  • 相关阅读:
    nginx rewrite 模块
    nginx 的请求处理流程
    nginx keepalive 长连接
    cglib、orika、spring等bean copy工具性能测试和原理分析
    jackson、fastjson、kryo、protostuff等序列化工具性能对比
    Java源码详解系列(十一)--Spring的使用和源码(共计4篇博客)
    Spring源码系列(四)--spring-aop是如何设计的
    Spring源码系列(三)--spring-aop的基础组件、架构和使用
    JMH--一款由OpenJDK开发的基准测试工具
    MySQL系列文章汇总
  • 原文地址:https://www.cnblogs.com/netflix/p/14626484.html
Copyright © 2011-2022 走看看