浅谈vue

Vue
什么是vue？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

核心

虚拟DOM:不需要操作节点

事件绑定:

{{}}插值表达式

v-model:用来双向绑定，绑定的不仅仅是文本框，单选，多选，多行文本域都是可以实现的

v-bind:绑定属性 专门用来绑定属性的

v-on:绑定事件(绑定一个方法)

v-if v-else

v-elseif: 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。，和show的区别是将元素在dom里移除

v-show:作用和if是一样的，但是只是添加了一个display的属性 没有在dom移除

v-for 写在标签上，循环标签

v-once:只能被绑定一次

v-text: v-html可以解析标签 而v-text不行 同样的他们都可以被插值表达式代替

v-html:v-html可以解析标签 而v-text不行 同样的他们都可以被插值表达式代替

计算属性

计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用.
 var app = new Vue({
     el:"#app",
     //计算属性必须放在Vue的computed中
     computed:{
         //定义计算属性
         属性名(){
             return "返回值";
         }
     }
});

watch监控

watch可以监听简单属性值及其对象中属性值的变化.
watch类似于onchange事件,可以在属性值修改的时候,执行某些操作.
    案例:
var app = new Vue({
    el:"#app",
    data:{
        message:"白大锅",
        person:{"name":"heima", "age":13}
    },
    //watch监听
    watch:{
        //监听message属性值,newValue代表新值,oldValue代表旧值
        message(newValue, oldValue){
        	console.log("新值：" + newValue + "；旧值：" + oldValue);
        },
        //监控person对象的值,对象的监控只能获取新值
        person: {
            //开启深度监控；监控对象中的属性值变化
            deep: true,
            //获取到对象的最新属性数据(obj代表新对象)
            handler(obj){
                console.log("name = " + obj.name + "; age=" + obj.age);
            }
        }
    }
});
    

vue-cli脚手架工具

choose a version:

bable:他是将es6的语法转成es5

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LalotTbx-1652671295160)(C:\Users\shenjian\AppData\Roaming\Typora\typora-user-images\image-20220509094517665.png)]

启动脚手架

npm run serve

组件(注册,传参)

什么是组件?以及组件的作用

在vue中万物皆组件,组件可以用来实现复用

复用?

组件的注册:

1.全局的注册

​ 1.引入需要注册的文件

​ 2.全局注册(键值对,名字随便给)

​ 3.使用刚刚注册的组件

2.局部的注册

组件传参

父传子

1.父组件中定义属性

2.父组件给子组件传递参数,子组件需要定义属性

3.通过props接收值，并且可以直接使用

<MyComtent @toMsg="getMsg" class="mycomtent" :imgChild="imgParent" ></MyComtent>

子传父

1.定义方法，传值

​ //第一个参数是父亲将要接收的方法名称

​ //第二个参数:子类给父类发送的消息主体

2. 使用this.$emit(“toMsg”,msg);

路由

什么是路由?

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射

• 动态路由选择

• 模块化、基于组件的路由配置

• 路由参数、查询、通配符

• 展示由 Vue.js 的过渡系统提供的过渡效果

• 细致的导航控制

• 自动激活 CSS 类的链接

• HTML5 history 模式或 hash 模式

• 可定制的滚动行为

• URL 的正确编码

Home |

About

user

index.js

  // {
  //   path: '/',
  //   name: 'home',
  //   component: HomeView
  // }
  // ,
  // {
  //   path: '/user',
  //   name: 'user',
  //   component: () => import(/* webpackChunkName: "about" */ '../views/user.vue')
  // }

使用路由

js中
//1.引入路由
import VueRouter from 'vue-router'
//2.使用路由
Vue.use(VueRouter)
//3.配置路由规则(配置之前需要定义组件)
const routes = [
   {
    path: '/',
    redirect:'/login'
  },   {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "about" */ '../components/login')
  }
]
//4.定义路由对象
const router = new VueRouter({
  routes
})
    

路由的跳转

路由的传参

1.链接式 router-link to
存 <router-link :to="{name:'home', params: {id:1}}">  取{{ this.$route.params.user }} 
 存<router-link :to="{name:'home', query: {id:1}}">   取 {{ this.$route.query.user }}
2.编程式 存  this.$router.push({ path: '/home', query: { user: 'private' }}) 取   {{ this.$route.query.user }}
   存  this.$router.push({ name: 'home', params: { user: 'private' }})    取{{ this.$route.params.user }} 

嵌套路由传参

  {
    path: '/home',
    name: 'Home',
    component: () => import(/* webpackChunkName: "about" */ '../components/home'),
    children:[ {
      path: '/index',
      name: 'Index',
      component: () => import(/* webpackChunkName: "about" */ '../components/index')
    }
    ,   {
      path: '/prodxt',
      name: 'Prodxt',
      component: () => import(/* webpackChunkName: "about" */ '../components/prodxt')
    }
  ]
  }

Vue+elment +mybtis+springboot 实现前后端分离的demo

接口文档(swagger)

配置类

package com.example.springbootvue.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

//表示这个类是一个配置类,会把这个类注入到ioc容器中
@Configuration
//开启swagger2的功能
@EnableSwagger2
public class SwaggerConfig {

    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                //这里一定要标注你控制器的位置
                .apis(RequestHandlerSelectors.basePackage("com.example.springbootvue.controller"))
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("Thymeleaf测试")
                .description("SpringBoot整合Thymeleaf测试")
                .termsOfServiceUrl("https://angegit.gitee.io/myblog/")
                .contact(new Contact("niechangan", "https://angegit.gitee.io/myblog/", "[email protected]"))
                .version("1.0")
                .build();
    }
}

后端规范

GetMapping   获取
PostMapping  新增
DeleteMapping删除
PutMapping   更新