Vue基础使用

Vue

初识Vue

创建静态web页面

创建两个包

创建最简单的一个html页面

引入js

下载js

这样就是把js下载下来了

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

案例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: 一般用于表单数据回显操作
1
2
3

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  ....
  })
  1
  2
  3

  
  

  mounted

  分析

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

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

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

  

  

  this解释

  执行顺序

  

  java中构造器的执行解析。

  

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

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

  

  ​

  代码示例

  假装从后端获取数据

  

  路径的解释

  

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

  

  

  通过mounted进行初始化

  

  代码

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

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

  【**$.ajax()、$.post()、$.get()\ast \ast 】\ast \ast 这三个方法都是Ajax方法\ast \ast 中一种与服务器交换数据的请求类型。$.post() 是post请求时的$.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");
              }
          };
      }
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23