2021-07-26大连东软实训第六天---vue路由+脚手架+ajax-阿里云开发者社区

2021-07-26大连东软实训第六天---vue路由+脚手架+ajax

2023-08-01 60

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 2021-07-26大连东软实训第六天---vue路由+脚手架+ajax

使用事件处理来做，用key up

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input v-model="firstname" @keyup="getFullname" />
      +
      <input v-model="lastname"  @keyup="getFullname"/>
      =
      <input v-model="fullname" />
    </div>
    <script type="text/javascript">
      let vm=new Vue({
        el:'#app',
        data:{
          firstname:'',
          lastname:'',
          fullname:''
        },
        methods:{
          getFullname(){
            this.fullname=this.firstname+this.lastname;
          }
      }
      });
    </script>
  </body>
</html>

用function，注意区别，定义的属性，有get和set

fullname:{
            get:function(){
              return this.firstname+this.lastname;
            },
            set:function(val){
              let index=val.indexOf("-")
              this.firstname=val.substring(0,index);
              this.lastname=val.substring(index+1);
            }
          }

<script type="text/javascript">
      let vm=new Vue({
        el:'#app',
        data:{
          firstname:'',
          lastname:'',
        },
        methods:{
        },
        computed:{
          //computed中定义的function，可以直接当做属性来使用
          //当此function体中使用到的属性值发生改变，则重新执行function
          //computed会缓存执行的结果
          fullname:function(){
            return this.firstname+this.lastname;
          }
        }
      });
    </script>

用watch监听，

<script type="text/javascript">
      let vm=new Vue({
        el:'#app',
        data:{
          firstname:'',
          lastname:'',
          fullname:''
        },
        methods:{
        },
        watch:{
          //watch中定义function,function的名字与data属性名一样
          firstname:function(){
            this.fullname=this.firstname+this.lastname;
          },
          lastname:function(){
            this.fullname=this.firstname+this.lastname;
          }
        }
      });
    </script>
带参数
          watch:{
          //watch中定义function,function的名字与data属性名一样
          firstname:function(newVal,oldVal){
            this.fullname=newVal+this.lastname;
          },
          lastname:function(newVal,oldVal){
            this.fullname=this.firstname+oldVal;
          },
        }

绑定路由切换跳转的时候运行的，要用watch

watch:{
          "$route":function(newval,oldval)
          {
            alert(newval.path+"  "+oldval.path);
            if(newval.path=="/login"){
              alert("欢迎来到对抗路");
            }
          }
        }

为什么要用vue，因为手动vue的搭建环境特别难，所有的文件，配置都需要自己弄，

compute

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input v-model="firstname" />
      +
      <input v-model="lastname" />
      =
      <input v-model="fullname" />
      <button type="button" @click="modify">111</button>
    </div>
    <script type="text/javascript">
      let vm=new Vue({
        el:'#app',
        data:{
          firstname:'',
          lastname:'',
        },
        methods:{
          modify(){
            this.fullname="12343-asd";
          }
        },
        computed:{
          //computed中定义的function，可以直接当做属性来使用
          //当此function体中使用到的属性值发生改变，则重新执行function
          fullname:{
            get:function(){
              return this.firstname+this.lastname;
            },
            set:function(val){
              let index=val.indexOf("-")
              this.firstname=val.substring(0,index);
              this.lastname=val.substring(index+1);
            }
          }
        }
      });
    </script>
  </body>
</html>