基于《狂神说Java》Vue--学习笔记

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

前端三要素

HTML (结构) :超文本标记语言(Hyper Text Markup Language) ，决定网页的结构和内容
CSS (表现) :层叠样式表(Cascading Style sheets) ，设定网页的表现样式
JavaScript (行为) :是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行,用于控制网页的行为

JavaScript框架

jQuery: 大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;
Angular: Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)
React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一门[JSX] 语言;
Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;
Axios :前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;
前端三大框架：Angular、React、Vue

第一个Vue框架

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

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

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

IDEA 安装Vue插件

这里直接在idea设置中安装插件即可：

如果，你用的idea是2020版，且插件搜索不到的，可以安装idea2022最新版。如何破解大家可以自行百度。

Vue的基本语法

好！只要安装了插件其实就可以先写一个简单的页面来感受一下Vue的使用：

我们随便创建一个.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.16/dist/vue.js"></script>
<script>
  var vm=new Vue({
    el: '#app',
    //Model层
    data: {
      message: "hello world,狂神666"
    }
  });
</script>
</body>
</html>

注意，这里是直接用的vue在线cdn：

https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js

vue-bind

itle绑定message元素使得鼠标悬停可以显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">

    <span v-bind:title="message">鼠标悬浮</span>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el: '#app',
        //Model层
        data: {
            message: "hello world"
        }
    });
</script>
</body>
</html>

运行后，鼠标悬停在<鼠标悬浮>就会显示hello world

v-if v-else

其效果类似于java中if，else条件选择语句

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
  <h1 v-if="chose">如果chose是{
  {chose}}，我就显示{
  {chose}}</h1>
  <h1 v-else>如果chose是{
  {chose}}，我就显示{
  {chose}}</h1>
  <h1 v-if="type==='A'">如果type是{
  {type}}，我就显示{
  {type}}</h1>
  <h1 v-else-if="type==='B'">如果type是{
  {type}}，我就显示{
  {type}}</h1>
  <h1 v-else-if="type==='C'">如果type是{
  {type}}，我就显示{
  {type}}</h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
  var vm=new Vue({
    el: '#app',
    //Model层
    data: {
      chose: false,
      type: 'B'
    }
  });
</script>
</body>
</html>

v-for

看到for，各位就知道这玩意可能跟循环挂钩，它真就是循环，而且代码量极少！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
  <h1 v-for="item in items">
    {
  {item.course}}
  </h1>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
  var vm=new Vue({
    el: '#app',
    //Model层
    data: {
      items: [
        {course: 'java'},
        {course: 'vue'},
        {course: 'html'},
        {course: 'C#'},
        {course: 'redis'},
        {course: 'ES'}
      ]
    }
  });
</script>
</body>
</html>

结果如下：

v-on 事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
  <button v-on:click="sayHi('我是参数')">有种你点我啊！！！</button>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
  var vm=new Vue({
    el: '#app',
    //Model层
    data: {
      message: "年轻人，出来混，不是打打杀杀，是人情世故！"
    },
    methods: {
      sayHi: function (e){
        alert(this.message+e);
      }
    }
  });
</script>
</body>
</html>

点击按钮后，弹窗显示消息。

Vue双向绑定v-model

什么是双向绑定

Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

就像是在输入框中输入数据，下面的元素值显示出来

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

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

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

你可以用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>
<div id="app">
  输入的文本：<input type="text" v-model="message"/>{
  { message }}
  <br/>
  性别：<input type="radio" name="sex" value="男" v-model="luyi" >男
  <input type="radio" value="女" name="sex" v-model="luyi" >女
  <p>
    选择了谁：{
  {luyi}}
  </p>
  下拉框 :<select v-model="selected">
  <option value="" disabled>--请选择--</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
  <span>下拉框选中了：{
  {selected}}</span>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  var vm=new Vue({
    el:'#app',
    data: {
      message: "hello，its me",
      checked: false,
      luyi: '',
      selected: ''
    },
  });
</script>
</body>
</html>

组件（重要）

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

在这里插入图片描述

自定义组件在vue中是很重要的知识点，如果你看到这里，希望你配合视频学习，本人作为初学者，可能不能很好的为你讲清楚。

首先先看一下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
  <!--组件，传递给组件中的值：props-->
  <libing v-for="item in items" v-bind:libing="item.course"></libing>
</div>
<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
  //定义一个Vue组件
  Vue.component('libing',{
    props: ['libing'],
    template: '<h1>{
  {libing}}</h1>'
  });
  var vm=new Vue({
    el: '#app',
    //Model层
    data: {
      items:[
        {course: 'java'},
        {course: 'vue'},
        {course: 'html'},
        {course: 'C#'},
        {course: 'redis'},
        {course: 'ES'}
      ]
    }
  });
</script>
</body>
</html>

运行结果如下：

接下来就是Vue的重头戏了！！

前端如何跟后端产生交互呢，前端将要渲染的数据从哪里来呢？

这里需要讲一下题外话：前后端分离，在前后端分离时代，就是前端，通过发起一个请求，后端接口接受到对应的请求之后，查询到数据库中的数据，将数据转换成Json字符串，再传给前端，这样，前端就能得到数据，然后想干啥就干啥了！

而Vue作为一个纯粹的视图层框架，其是没有内置与后端交互的工具的。

这时Axios就闪亮登场了。

Axios

什么是Axios

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

从浏览器中创建XMLHttpRequests

从node.js创建http请求

支持Promise API [JS中链式编程]

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF (跨站请求伪造)

GitHub: https://github.com/ axios/axios
中文文档: http://www.axios-js.com/

为什么要使用Axios

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

接下来我们就来走一下前后端交互的流程：

后端项目

新建一个项目

测试运行

package com.libing.axios.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
 * @author liar
 */
@RestController
public class TestController {
    @RequestMapping("/test")
    public String test(){
        return "hello controller";
    }
}

ok！项目能正常跑起来，我们就可以写代码了。

创建数据库

如果要问为什么这么创建，详情请看《狂神说Java》mybatis-plus课程。

导入依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.libing</groupId>
    <artifactId>axios</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>axios</name>
    <description>axios</description>
    <properties>
        <java.version>8</java.version>
        <repackage.classifier/>
        <spring-native.version>0.12.0</spring-native.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--mybatis-plus 是自己开发的，非官方的-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>
        <!--swagger2和ui的依赖-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>3.0.0</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>3.0.0</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>

最低0.47元/天解锁文章