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

简介: 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>

我们自己的写法

post


目录
相关文章
|
1天前
|
存储 JavaScript 前端开发
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
10 1
|
1天前
|
存储 JavaScript API
vue尚品汇商城项目-day05【33.token令牌理解+34.用户登录携带token获取用户信息+35.退出登录】
vue尚品汇商城项目-day05【33.token令牌理解+34.用户登录携带token获取用户信息+35.退出登录】
7 0
|
1天前
|
JavaScript API 数据安全/隐私保护
vue尚品汇商城项目-day05【36.导航守卫理解】
vue尚品汇商城项目-day05【36.导航守卫理解】
7 0
|
1天前
|
JavaScript API
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
6 0
|
1天前
|
JavaScript 前端开发
vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】
vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】
6 0
N..
|
5月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
56 1
|
5月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
55 0
|
5月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
120 0
|
4月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
38 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
2月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
28 0
下一篇
无影云桌面