2021-09-08

最新推荐文章于 2022-11-08 12:22:18 发布
最新推荐文章于 2022-11-08 12:22:18 发布
阅读量328 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JiangHuFengZi/article/details/120172869
版权

5、第一个Vue程序

5.1、什么是MVVM

​ MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：

  • 该层向上与视图层进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交互

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9XTC7H3q-1631065477631)(C:\Users\江湖烽子\Pictures\Camera Roll\2021-09-06_085045.jpg)]

MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js，Anfular JS

5.2、为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处

  • 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
  • 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
  • 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
  • 可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mZqw9BJb-1631065477633)(C:\Users\江湖烽子\Pictures\Camera Roll\2021-09-06_090402.jpg)]

（1）View

View是视图层， 也就是用户界面。前端主要由HTH L和csS来构建， 为了更方便地展现vi eu to del或者Hodel层的数据， 已经产生了各种各样的前后端模板语言， 比如FreeMarker，Thyme leaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用来构建用户界面的内置模板语言。

（2）Model

Model是指数据模型， 泛指后端进行的各种业务逻辑处理和数据操控， 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

（3）ViewModel

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层， 前端开发者对从后端获取的Model数据进行转换处理， 做二次封装， 以生成符合View层使用预期的视图数据模型。
  需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分， 而Model层的数据模型是只包含状态的

  • 比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)
  • 页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互)

视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， View Model的内容会实时展现在View层， 这是激动人心的， 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。
  MVVM框架已经把最脏最累的一块做好了， 我们开发者只需要处理和维护View Model， 更新数据视图就会自动得到相应更新，真正实现事件驱动编程。
  View层展现的不是Model层的数据， 而是ViewModel的数据， 由ViewModel负责与Model层交互，获取和更新数据， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。

4.3、VUE

Vue(读音/vju/， 类似于view) 是一套用于构建用户界面的渐进式框架， 发布于2014年2月。与其它大型框架不同的是， Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层， 不仅易于上手， 还便于与第三方库(如：vue-router，vue-resource，vue x) 或既有项目整合。

（1）MVVM模式的实现者

  • Model：模型层， 在这里表示JavaScript对象
  • View：视图层， 在这里表示DOM(HTML操作的元素)
  • ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者

在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者

  • ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新
  • ViewModel能够监听到视图的变化， 并能够通知数据发生改变

至此， 我们就明白了， Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定

（2）为什么要使用Vue.js

  • 轻量级， 体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+)
  • 移动优先。更适合移动端， 比如移动端的Touch事件
  • 易上手，学习曲线平稳，文档齐全
  • 吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处， 并拥有自己独特的功能，如：计算属性
  • 开源，社区活跃度高

4.4、第一个Vue程序

【说明】IDEA可以安装Vue的插件!
  注意：Vue不支持IE 8及以下版本， 因为Vue使用了IE 8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器。

（1）下载地址

开发版本

  • 包含完整的警告和调试模式：https：//yuejs.org/js/vue.js
  • 删除了警告， 30.96KB min+gzip：https：//vuejs.org/js/vue.min.js

CDN

  • < script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”>
  • < script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js”>

（2）代码编写

Vue.js的核心是实现了MVVM模式， 她扮演的角色就是View Model层， 那么所谓的第一个应用程序就是展示她的数据绑定功能，操作流程如下：

1.创建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 </head>
<body>
<!--view层变成了一个模板-->
<div id="app">
	<!--将数据绑定到标签中-->
    {{message}}
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
   <!--创建一个Vue实例-->
    var vm=new Vue({
        el:"#app",
        //model层就是这个data ： 数据
        data:{
            message:"hello.vue!"
        }
    });

</script>

</body>
</html>

说明：

  • el: '#vue：绑定元素的ID
  • data:{message:‘Hello Vue!’}：数据对象中有一个名为message的属性，并设置了初始值 Hello Vue！

测试

为了能够更直观的体验Vue带来的数据绑定功能， 我们需要在浏览器测试一番， 操作流程如下：
  1、在浏览器上运行第一个Vue应用程序， 进入开发者工具
  2、在控制台输入vm.message=‘HelloWorld’， 然后回车， 你会发现浏览器中显示的内容会直接变成HelloWorld
  此时就可以在控制台直接输入vm.message来修改值， 中间是可以省略data的， 在这个操作中， 我并没有主动操作DOM， 就让页面的内容发生了变化， 这就是借助了Vue的数据绑定功能实现的； MV VM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定， 以做到数据与视图的快速响应。

6、基础语法指令

6.1、v-bind

​ 我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似， 但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联， 所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新!
  我们还可以使用v-bind来绑定元素特性!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 </head>
<body>
<!--Vue层变成了一个模板-->
<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟即可查看到此处的动态绑定的提示信息！
    </span>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    <!--创建一个Vue实例-->
    var vm=new Vue({
        el:"#app",
        //model层就是这个data ： 数据
        data:{
            message:"hello.vue!"
        }
    });
</script>
</body>
</html>

​ 你看到的v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。可能你已经猜到了， 它们会在渲染的DOM上应用特殊的响应式行为在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。
  如果你再次打开浏览器的JavaScript控制台， 输入app， message=‘新消息’，就会再一次看到这个绑定了title特性的HTML已经进行了更新

6.2、v-if , v-else

  • v - if
  • v - else

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--Vue层变成了一个模板-->
<div id="app">
  <h1 v-if="type==='A'">A</h1>
  <h1 v-else-if="type==='B'">B</h1>
  <h1 v-else>C</h1>

</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  <!--创建一个Vue实例-->
  var vm=new Vue({
    el:"#app",
    data:{
      type: 'A'
    }
  });

</script>

</body>
</html>

6.3、v - for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--Vue层变成了一个模板-->
<div id="app">
  <h1>
    <li v-for="time in times">
      {{time.message}}
    </li>
    <!--index，下标-->
    <li v-for="(time,index) in times">
      {{time.message}}--{{index}}
    </li>
  </h1>

</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  <!--创建一个Vue实例-->
  var vm=new Vue({
    el:"#app",
    data:{
      //定义数组对象
      times:[
        //数组元素
        {message: "小明"},
        {message: "小航"}
      ]
    }
  });

</script>

</body>
</html>

6.4、v - on

v-on 监听事件
 emsp;事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件， 可以绑定到Vue中的methods中的方法事件!
  上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--Vue层变成了一个模板-->
<div id="app">
    <!--v-on 绑定事件的指令 这里我们绑定了click事件，并指定了sayHi事件-->
    <button v-on:click="sayHi">点击</button>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    <!--创建一个Vue实例-->
    var vm=new Vue({
        el:"#app",
        data: {
            message: "Hello!!!!1"
        },
        methods: { //方法 必须定义在Vue的 Methods对象中 ,通过v-on:事件
            sayHi:function (){
                alert(this.message);
            }
        }
    });
</script>

</body>
</html>

7、表单双绑、组件

7.1、什么是双向数据绑定

​ Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。
  值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。

（1）为什么要实现数据的双向绑定

在Vue.js中，如果使用vuex， 实际上数据还是单向的， 之所以说是数据双向绑定，这是用的UI控件来说， 对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

7.2、在表单中使用双向数据绑定

​ 你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇， 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
  注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--Vue层变成了一个模板-->
<div id="app">
      <!--实现效果：在输入框中输入时，可以在后面直接显示 ,使用 v-model 绑定 对象-->
    <!--必须用v-model="message"绑定后才能通过{{message}}取出值-->
  输入文本：<input type="text" v-model="message"> {{message}}

  <p>
    性别：
    <input type="radio" name="sex" value="男" v-model="sex"> 男
    <input type="radio" name="sex" value="女" v-model="sex"> 女
  </p>
  <p>选中了：{{sex}}</p>

  <p>
    下拉框：
    <select name="" id="" v-model="select">
      <option value="">--请选择--</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
    </select>
    <span>{{select}}</span>
  </p>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  <!--创建一个Vue实例-->
  var vm=new Vue({
    el:"#app",
    data: {
      // 这个属性的名字就是一个变量名，随意取
      message: '',
      sex: '',
      select: 'B'  //默认选中B
    }
  });

</script>
</body>
</html>

注意：v-model 表达式的初始值未能匹配任何选项，元系将被渲染为“未选中”状态。 在iOS中， 这会使用户无法选择第一个选项，因为这样的情况下，iOS不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

7.3、什么是组件

​ 组件是可复用的Vue实例， 说白了就是一组可以重复使用的模板， 跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织

在这里插入图片描述

在这里插入图片描述

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

7.3.1、第一个Vue组件

注意：在实际开发中，我们并不会用以下方式开发组件，而是采用 vue-cli 创建，vue模板文件的方式开发，以下方法只是为了让大家理解什么是组件。

使用Vue.component()方法注册组件，格式如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--Vue层变成了一个模板-->
<div id="app">
    <!--通过for循环，拿到items中的值，在通过v-bind将item与it的值进行绑定，传递给组件中的值 props -->
  <fengzi v-for="item in items" v-bind:it="item">{{item}}</fengzi>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  //定义一个Vue组件 component
  Vue.component("fengzi",{//将h1这个标签用我们自定的 fengzi 标签来代替
    props: ['it'], // 这里的it绑定了上面的item中的数据， 如果不用props 下面的语句中是无法接收外面的参数的
    template: "<li>{{it}}</li>"  //这里放模板 //这里直接从props中接收参数
  });


  <!--创建一个Vue实例-->
  var vm=new Vue({
    el:"#app",  //绑定上面的div标签，通过ID选择器
    data: {
        items: ["java","c++","c"]
    }
  });

</script>
</body>
</html>

说明：

Vue.component()：注册组件
pan：自定义组件的名字
template：组件的模板
（2）使用props属性传递参数
像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用props属性了！
  注意：默认规则下props属性里的值不能为大写

  • v-for=“item in items”：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
  • v-bind:panh=“item”：将遍历的item项绑定到组件中props定义名为item属性上；= 号左边的panh为props定义的属性名，右边的为item in items 中遍历的item项的值

8、Axios异步通信

8.1、什么是Axios

Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架， 她的主要作用就是实现AJAX异步通信，其功能特点如下：

  • 从浏览器中创建XMLHttpRequests
  • 从node.js创建http请求
  • 支持Promise API[JS中链式编程]
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF(跨站请求伪造)
  • GitHub：https://github.com/axios/axios
    中文文档：http://www.axios-js.com/

8.2、为什么要使用Axios

​ 由于Vue.js是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以Vue.js并不包含AJAX的通信功能， 为了解决通信问题， 作者单独开发了一个名为vue-resource的插件， 不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery， 因为它操作Dom太频繁！

8.3、第一个Axios应用程序

​ 咱们开发的接口大部分都是采用JSON格式， 可以先在项目里模拟一段JSON数据， 数据内容如下：创建一个名为data.json的文件并填入上面的内容， 放在项目的根目录下

{
  "name": "狂神说Java",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/95256449"
    },
    {
      "name": "狂神说Java",
      "url": "https://blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="vue">
    <h1>{{info.name}}</h1>
    <h1>{{info.address}}</h1>
    <!--将href与Vue绑定起来，他才能识别info.url-->
    <h1><a v-bind:href="info.url">点击</a></h1>
</div>


<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: "#vue",
  //  data: 这是属性
      data(){//这是方法，可以返回值
        return{//返回一个info，
            info: {//info 接收了response的数据
                name: null,
                address: {
                    street: null
                },
                url:null
            }
        }
      },
      mounted(){//钩子函数  链式编程（点点点）
        //../回上一级
        axios.get('../data.json').then(response=>(this.info=response.data))
      }
  })
</script>
</body>
</html>

8.4、Vue的生命周期

​ Vue实例有一个完整的生命周期，也就是从开始创建初女台化数据、编译模板、挂载DOM、渲染一更新一渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
  在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册JS方法，可以让我们用自己注册的JS方法控制整个大局，在这些事件响应方法中的this直接指向的是Vue的实例。

在这里插入图片描述

JiangHuFengZi
关注
2021-09-08 编程练习：正则年龄 解析url路径
抱住小羊的卷卷
09-08 767
1.程序启动后,要求用户输入用户名,用户名出现内容要求如下要求： 3-15位,内容只能是数字,字母,下划线。不匹配则直接提示用户名有误。 如果无误,则要求用户继续输入年龄，数字至少一位以上，不匹配则提示年龄有误。并且验证年龄在1-100岁之间(包含1和100)，如果超出范围给出提示。 2.解析url路径 (1)String path = "http://localhost:8088/myweb/reg?name=zhangsan";
【学习笔记】Vue
HappyCode
03-28 475
Vue官方文档：https://cn.vuejs.org/v2/guide/ 一、第一个Vue程序 什么是MVVM MVVM（Model-View-ViewModel）是一种软件设计模式， 由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。 MVVM源自于经典的MVC（Model-View-Contr
WPF应用程序 MVVM开发示例
Mr_Bobcp的博客
09-23 6328
WPF（Windows Presentation Foundation）是微软推出的基于Windows 的用户界面框架。 MVVM是Model-View-ViewModel的简写。
8.WPF命令
博客
11-08 713
8.WPF命令
WPF 入门教程Button使用
liaohaiyin的专栏
09-24 4402
没有Button控件的界面框架是不完整的。所以，WPF当然也有自己的按钮控件。就像WPF其它的控件一样，按钮控件的使用非常灵活，几乎可以让你实现任何东西。就让我们从以下几个简单例子开始吧： 简单的按钮 像其他的WPF控件一样，您可以用Button标记定义按钮控件。如果你在标记定义中间加入文字，文字的内容就是按钮的文字内容。 <Button>Hello, world!</Button> 很简单吧？当然，上面这个例子里的按钮并没有任何实际的逻辑在里面。不过，如果你把鼠标移上
Vue的基本使用
Daylight629博客
02-27 282
Vue的基本使用 一、MVVM 1、什么是MVVM MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。 MVVM源自于经典的
智能运营，智赢未来(2021)[2021-09-08]（43页）.pdf
05-26
"智能运营，智赢未来" 本资源提供了企业智能运营的知识点，旨在帮助企业提高运营成熟度，实现智能运营，智赢未来。通过本资源，企业可以了解如何变革业务运营模式，提升运营成熟度，实现智能运营，提高企业盈利能力...
id uid exam_id start_time submit_time score 1 1001 9001 2021-09-01 09:01:01 2021-09-01 09:51:01 78 2 1001 9002 2021-09-01 09:01:01 2021-09-01 09:31:00 81 3 1002 9002 2021-09-01 12:01:01 2021-09-01 12:31:01 81 4 1003 9001 2021-09-01 19:01:01 2021-09-01 19:59:01 86 5 1003 9002 2021-09-01 12:01:01 2021-09-01 12:31:51 89 6 1004 9002 2021-09-01 19:01:01 2021-09-01 19:30:01 85 7 1005 9001 2021-09-01 12:01:01 2021-09-01 12:31:02 85 8 1006 9001 2021-09-07 10:01:01 2021-09-07 10:21:01 84 9 1003 9001 2021-09-08 12:01:01 2021-09-08 12:11:01 40 10 1003 9002 2021-09-01 14:01:01 (NULL) (NULL) 11 1005 9001 2021-09-01 14:01:01 (NULL) (NULL) 12 1003 9003 2021-09-08 15:01:01 (NULL) (NULL) sql求时间差
07-25
您可以使用 SQL 中的函数来计算时间差。假设您想要计算 start_time 和 submit_time 之间的时间差，可以使用以下语句： ```sql SELECT id, uid, exam_id, start_time, submit_time, score, EXTRACT(EPOCH FROM ...
id uid exam_id start_time submit_time score 1 1001 9001 2021-09-01 09:01:01 2021-09-01 09:51:01 78 2 1001 9002 2021-09-01 09:01:01 2021-09-01 09:31:00 81 3 1002 9002 2021-09-01 12:01:01 2021-09-01 12:31:01 81 4 1003 9001 2021-09-01 19:01:01 2021-09-01 19:59:01 86 5 1003 9002 2021-09-01 12:01:01 2021-09-01 12:31:51 89 6 1004 9002 2021-09-01 19:01:01 2021-09-01 19:30:01 85 7 1005 9001 2021-09-01 12:01:01 2021-09-01 12:31:02 85 8 1006 9001 2021-09-07 10:01:01 2021-09-07 10:21:01 84 9 1003 9001 2021-09-08 12:01:01 2021-09-08 12:11:01 40 10 1003 9002 2021-09-01 14:01:01 (NULL) (NULL) 11 1005 9001 2021-09-01 14:01:01 (NULL) (NULL) 12 1003 9003 2021-09-08 15:01:01 (NULL) (NULL) sql求时间差 按分钟返回
最新发布
07-25
要按分钟返回时间差，您可以使用以下 SQL 查询语句来计算并返回时间差： ```sql SELECT id, uid, exam_id, start_time, submit_time, score, EXTRACT(EPOCH FROM (submit_time - start_time)) / 60 AS time_diff_...
基于MVVM架构思想和Kotlin，使用Android JetPack开发一款App
小编君的博客
03-08 2834
使用Kotlin语言开发，MVVM架构思想，使用了Android JetPack中的LiveData、ViewModel、Room等架构组件。
WPF and Silverlight 学习笔记（二十二）：使用代码实现绑定、绑定数据的验证
weixin_30535843的博客
05-22 191
一、通过代码实现数据绑定 通过代码实现数据绑定，使用的是System.Windows.Data命名空间的Binding类，主要使用Binding类的如下的属性： Source属性：绑定到的数据源 Mode属性：绑定的模式（OneTime、OneWay、TwoWay、OneWayToSource或Default） Path属性：绑定到的数据源的属性 Converte...
v-if，v-else-if, v-else的实际使用
热门推荐
Sapling
08-19 1万+
需求是医疗水平，价格水平，服务态度分值都为0-10分，1-4分是红色，5-7分是黄色，8-10分是绿色，数据均从后台请求过来的。 一开始想的是通过Vue中ref属性，可以获取到当前元素，在数据请求回来后直接通过map遍历，然后直接行内修改样式的方法 this.refs.medicalScore.style.color = 'yellow' 后来发现不行，通过打断点自己写的if语句都能走通，但赋...
MVVM开发模式的理解&v-if和v-show的区别
Judy_qiudie
03-11 289
一、MVVM分为Model、View、ViewModel三者 Model：代表数据模型，数据和业务逻辑都在Model层中定义； View：代表UI视图，负责数据的展示； ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作。 View——ViewModel——Model Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和...
WPF 虚拟化面板
拥有必珍惜
06-15 2728
public class VirtualizingWrapPanel : VirtualizingPanel, IScrollInfo { #region Fields UIElementCollection _children; ItemsControl _itemsControl; IItemContainerGene
WPF页面数据(多条件)拼接查询
weixin_44549988的博客
10-07 646
开发工具与关键技术：Visual Studio 2015 作者：杨镇虹 撰写时间：2020.10.07 一、WPF页面数据(多条件)拼接查询 //查找按钮 拼接查询 private void tex_SelectBePutInStorage_Click(object sender, RoutedEventArgs e) { //获取文本框输入的值 string strBePutInStorageOdd = tex_BePutInStorageOdd.Text.ToString().
WPF使用成熟的命令系统（带参数）
浪子花梦
07-26 1217
前文不需要带参数的成熟命令： WPF使用成熟的命令系统 需要的五个类如下所示： 定义分别如下所示： IExecuteWithObject 接口： public interface IExecuteWithObject { object Target { get; } void ExecuteWithObject(object parameter); void MarkForDeletion(); } IExecuteWithObjectAndResult 接口： public
vue.js 基础（9）
power_to_go_l7的博客
04-12 229
表单输入绑定 基础用法 可以用 v-model 指令在表单 及 元素上创建双向数据绑定。 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在组件的 dat...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值