毫米波雷达模块技术革新:在自动驾驶汽车中的前沿应用

eelq

关注

阅读 46

2023-10-21

目录

Vue

初识Vue

创建静态web页面

在这里插入图片描述

创建两个包

在这里插入图片描述
创建最简单的一个html页面

在这里插入图片描述

引入js

在这里插入图片描述

下载js

在这里插入图片描述

在这里插入图片描述

这样就是把js下载下来了

在这里插入图片描述
在这里插入图片描述

.. 表示上一层目录的意思,相对的路径

在这里插入图片描述
在这里插入图片描述

案例1:

代码

在这里插入图片描述

tomcat

在这里插入图片描述

在这里插入图片描述

访问

在这里插入图片描述

Vue的常见指令

1、{{属性}}

{{}} vue一直解析数据的指令

理解:应该跟jsp中的${} 取值一样

2、v-bind

除了使用插值表达式{{}}进行数据渲染,也可以使用 v-bind指令,它的简写的形式就是一个冒号(:)

v-bind: 表示通知vue在渲染的 DOM 标签时,将bind绑定的属性 和 Vue 实例data中同名属性值保持一致

在这里插入图片描述

使用v-bind
在这里插入图片描述

v-bind 是绑定属性,只要是标签属性,这个v-bind都可以处理

绑定图片:
v-bind:src 或者 :src

绑定样式:
v-bind:class 或者 :class

绑定链接:
v-bind:href 或者 :href

3、v-model

v-bind:单项属性绑定指令:绑定属性之后,页面数据发生变动时,data中的数据不变化
v-model: 双向属性绑定指令:绑定属性之后,页面数据发生变动时,data中的数据也发生相应的变化
v-model: 一般用于表单数据回显操作

在这里插入图片描述

4、v-html

{{属性}} 会原样输出数据属性,如果说数据是带有html格式的数据时,此时需要使用v-html指令

在这里插入图片描述

使用了v-html指令,可以显示出html样式出来,优先显示标签里面的属性
在这里插入图片描述

5、v-if

在这里插入图片描述

6、v-for

普通数组和对象集合的遍历

在这里插入图片描述

7、v-on

事件绑定指令, 可缩写成@

比如:
v-on:click //绑定点击事件,
@click

在这里插入图片描述
在这里插入图片描述

原生的点击事件

在这里插入图片描述

vue的点击事件

点击触发的函数要写在 methods 属性里面

在这里插入图片描述

Vue事件 $event

事件函数

事件被触发了,执行什么逻辑,比如:clickVue

事件对象

从触发事件开始到事件响应结束的整个过程的所有信息都被封装成一个对象,这个对象叫做事件对象。
在vue中使用全局变量 $event 表示事件对象。这个 $event 写法是固定的,写成其他的就拿不到事件对象的数据
就是vue会创建事件对象,然后塞到这个 $event 这个变量中存起来

获取事件源

事件源是从事件对象里面获取的

触发事件)绑定了事件的那个html标签,比如:

  • 事件传参

    就是单纯的传参

    事件分析图

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    Vue属性

    el

    用来指示vue编译器从什么地方开始解析 vue的语法

    就是说模板在哪个角落,从哪个地方开始解析数据

    在这里插入图片描述

    data

    用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中

    在这里插入图片描述

    methods

    放置页面中的业务逻辑,js函数一般都放置在methods中

    在这里插入图片描述

    filters

    vue过滤器集合

    在这里插入图片描述

    使用filters

    在vue里面,是局部过滤

    | 作用是把左边的作为参数传到右边

    在这里插入图片描述

    全局过滤:

    多个vue都需要过滤的话,就需要写成全局的

    // 在创建 Vue 实例之前全局定义过滤器:

    Vue.filter('dataFormat', function (value) {
        return  ....
    })
    

    在这里插入图片描述
    在这里插入图片描述

    mounted
    分析

    是一个函数, 在vue实例创建完成后被立即调用(html加载完成后执行),有点类似于java中的构造器

    两者的类似指:java构造器有【构建对象】和【初始化数据】的功能,而这个mounted只有【初始化数据】的功能。

    一般用于初始化data中的数据

    在这里插入图片描述

    在这里插入图片描述

    this解释

    执行顺序

    在这里插入图片描述

    java中构造器的执行解析。

    在这里插入图片描述

    由此可见此时vue对象的构建顺序和mounted函数里面执行的代码逻辑的顺序的优先级

    由此可见执行完mounted之后,这个vue才有值

    在这里插入图片描述

    代码示例

    假装从后端获取数据

    在这里插入图片描述

    路径的解释

    在这里插入图片描述

    已经获取到值,但是还没通过 mounted 进行初始化

    在这里插入图片描述

    在这里插入图片描述

    通过mounted进行初始化

    在这里插入图片描述

    代码

    这个 $.get() 也是 ajax里面的异步请求

    jQuery中Ajax函数:包含了这些: . a j a x ( ) 、 .ajax()、 .ajax().post()、$.get()

    【** . a j a x ( ) 、 .ajax()、 .ajax().post()、 . g e t ( ) ∗ ∗ 】 ∗ ∗ 这三个方法都是 A j a x 方法 ∗ ∗ 中一种与服务器交换数据的请求类型。 .get()**】**这三个方法都是Ajax方法**中一种与服务器交换数据的请求类型。 .get()这三个方法都是Ajax方法中一种与服务器交换数据的请求类型。.post() 是post请求时的 . a j a x ( ) 的简写形式; .ajax()的简写形式; .ajax()的简写形式;.get() 是get请求时的$.ajax()的简写形式。

    在这里插入图片描述
    在这里插入图片描述

    created

    是一个函数, 在vue实例创建完成后被立即调用(html加载完成之前,执行)

    computed

    用来计算

    template

    用来设置模板,会替换页面元素,包括占位符

    render

    创建真正的Virtual Dom

    watch

    监听data中数据的变化

    Vue生命周期

    在这里插入图片描述
    vue的核心在这里,当页面发生变动,会自动渲染页面,会自动把data数据加载到页面上来,具体怎么自动法,先不用管。

    当mounted方法把数据请求回来的时候,得到的数据,进行变动赋值的时候,就会执行这个逻辑

    在这里插入图片描述

    综合案例

    跨域理解

    请求接收方就是启动类那里。

    在这里插入图片描述

    //跨域访问
        @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurer() {
                @Override
                //重写父类提供的跨域请求处理的接口
                public void addCorsMappings(CorsRegistry registry) {
                    //添加映射路径
                    registry.addMapping("/**")
                            //放行哪些原始域
                            .allowedOrigins("*")
                            //是否发送Cookie信息
                            .allowCredentials(true)
                            //放行哪些原始域(请求方式)
                            .allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS")
                            //放行哪些原始域(头部信息)
                            .allowedHeaders("*")
                            //暴露哪些头部信息(因为跨域访问默认不能获取全部头部信息)
                            .exposedHeaders("Header1", "Header2");
                }
            };
        }
    
    

精彩评论(0)

0 0 举报