Vue基础使用

_你的名字
261 阅读6分钟

Vue基础使用

1.vue的使用

下载Vue：npm i vue

  1. 首先下载vue，引入vue.js
  2. js中创建一个Vue对象实例
  3. 通过el指定vue管理页面的边界

image.png

Mustache表达式使用

双花括号{{}} 就是 mustache语法，用于展示data中的内容,mustache 中可以出现任意的 JS表达式；

  • 表达式{{}}只能从数据对象data中获取数据；
  • mustache中不能出现语句，比如：if () {} / for(var i =0 ...) {} / var num = 1;
  • Mustache 语法不能作用在 HTML 元素的属性上；

image.png

指令v-使用

指令 (Directives) 是带有 v- 前缀的特殊属性，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1.v-text

用来设置当前元素的文本内容，相当于DOM对象的 innerText或textContent

image.png 2.v-html

更新DOM对象的 innerHTML

image.png

3.v-bind

通过v-bind为HTML元素绑定属性，使用data中提供的数据;
因为 v-bind:title 这种使用方式很繁琐，所以，vue提供了一个简化语法 :title

image.png

4.v-on

绑定事件,支持js所有的事件类型， v-on绑定的事件方法都要写在Vue实例中的methods对象中; v-on:省略写 @

image.png

5.v-model

在表单元素上创建双向数据绑定;
只能用在表单元素中，注意：不同的表达元素，v-model的表现可能会有所不同
比如：v-model操作文本框的value属性，而复选框 v-model 就是操作其选中状态;

image.png

6.v-for

基于源数据多次渲染元素或模板块,不仅可以渲染集合List也可以遍历对象Obj；

image.png

7.v-bind:class和v-bind:style

表达式的类型：字符串、数组、对象（重点）

image.png

8.v-if

根据表达式布尔值的真假条件是否加载这段代码， true:DOM中会加载这段代码，false:DOM中不会加载这段代码；

image.png

9.v-show

根据表达式之真假值，切换元素的 display CSS 属性，无论true还是false DOM中都会加载这段代码；

image.png

10.v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

image.png

11.v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

image.png

12.v-cloak

页面中使用 {{}} 的时候，经历了由 {{}} -> 具体内同，这么一个过程，所以页面会造成“闪烁” 解决：通过添加 v-cloak 指令，配合 [v-cloak] { display: none; } 避免了页面闪烁

image.png

动态添加数据到data、异步更新DOM

1.动态添加数据到data

只有data中的数据才是响应式的，动态添加进来的数据默认为非响应式

可以通过以下方式实现动态添加数据的响应式:

  • 1 Vue.set(object, key, value) - 适用于添加单个属性
  • 2 Object.assign() - 适用于添加多个属性

2.异步更新DOM

当绑定的数据发生变动时，Vue 异步执行 DOM 更新，监视所有数据改变，一次性更新DOM；

解决方法：

  • Vue.nextTick
  • this.$nextTick

image.png

image.png

filter过滤器
  • 作用：文本数据格式化 , 也就是: 将数据按照我们指定的一种格式输出
  • 过滤器可以用在两个地方：{{}}表达式 和 v-bind 指令中
  • 两种过滤器：1 全局过滤器 2 局部过滤器

1.全局过滤器

  • 说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用
  • 注意：使用全局过滤器的时候，需要先创建全局过滤器，再创建Vue实例

image.png

2.局部过滤器

  • 说明：局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用

image.png

watch监听配置项
  • 概述：watch是一个对象，键是需要观察的表达式，值是对应回调函数
  • 作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作

image.png

image.png

computed计算属性配置项
  • 说明：计算属性是基于它们的依赖进行缓存的，只有在它的依赖发生改变时才会重新求值
  • 注意：Mustache语法（{{}}）中不要放入太多的逻辑，否则会让模板过重、难以理解和维护
  • 注意：computed中的属性不能与data中的属性同名，否则会报错

image.png

事件修饰符
  • .stop 阻止向上冒泡 不会调用父的事件
  • .prevent 阻止默认行为，调用 event.preventDefault()
  • .capture捕获冒泡
  • .self 只当事件在该元素本身触发时，才会触发事件
  • .once 事件只触发一次

image.png

键值修饰符
  • 说明：在监听键盘事件时，Vue 允许为 v-on 在监听键盘事件时添加关键修饰符

image.png

vue声明周期钩子函数

beforeCreate()

  • 说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
  • 注意：此时，无法获取 data中的数据、methods中的方法
  • 使用场景：可以在这个钩子函数中开启页面加载的 loading 效果

created()

  • 注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
  • 使用场景：发送请求获取数据

beforeMounted()

  • 说明：组件将要挂载到页面中，也就是说：组件的内容还没有被挂载到页面中
  • 注意：此时，获取不到页面中DOM元素

mounted()

  • 说明：组件已经被挂载到页面中，此时，可以进行DOM操作了

beforeUpdate()

  • 说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated()

  • 说明：组件 DOM 已经更新完成，所以你现在可以执行依赖于 DOM 的操作。

beforeDestroy()

  • 说明：实例销毁之前调用。在这一步，实例仍然完全可用。
  • 使用：实例销毁之前，执行清理任务，比如：清除定时器等

destroyed()

  • 说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
自定义指令

Vue这种MVVM模式的框架不推荐开发人员直接手动操作DOM有些情况, 还是需要操作DOM的, 如果需要操作DOM, 就通过 Vue中的自定义指令来操作!!!

通过Vue.directive()方法自定义指令：

  • 第一个参数: 表示自定义指令的名称；
  • 第二个参数 1.表示自定义指令运行的时候, 需要执行的逻辑操作；

image.png

  • 第二个参数 2.还可以是一个对象，对象中是指令的钩子函数;

image.png

指令函数的入参:

image.png

avatar
文章
阅读
粉丝