Vue基础使用

Vue
- 初识Vue
- - 创建静态web页面
  - 引入js
  - - 下载js
  - 案例1:
  - - 代码
    - tomcat
    - 访问
- Vue的常见指令
- - 1、{{属性}}
  - 2、v-bind
  - 3、v-model
  - 4、v-html
  - 5、v-if
  - 6、v-for
  - 7、v-on
  - - 原生的点击事件
    - vue的点击事件
- Vue事件 $event
- - - 事件函数
    - 事件对象
    - 获取事件源
    - 事件传参
    - 事件分析图
- Vue属性
- - - el
    - data
    - methods
    - filters
    - mounted
    - - 分析
      - this解释
      - 代码示例
    - created
    - computed
    - template
    - render
    - watch
- Vue生命周期
- 综合案例
- - 跨域理解

Vue_3">Vue

Vue_4">初识Vue

创建静态web页面

在这里插入图片描述

创建两个包

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

在这里插入图片描述

引入js

在这里插入图片描述

下载js

在这里插入图片描述

这样就是把js下载下来了

在这里插入图片描述

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

在这里插入图片描述

案例1:

代码

在这里插入图片描述

tomcat

在这里插入图片描述

访问

在这里插入图片描述

Vue_67">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_164">Vue事件 $event

事件函数

事件被触发了，执行什么逻辑，比如：clickVue

事件对象

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

获取事件源

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

触发事件）绑定了事件的那个html标签，比如：

事件传参

就是单纯的传参

事件分析图

Vue_198">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函数：包含了这些: $. aja x () 、$ .post()、$.get()

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

created

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

computed

用来计算

template

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

render

创建真正的Virtual Dom

watch

监听data中数据的变化

Vue_349">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");
            }
        };
    }
```