Vue你遗忘的的那些基础语法

写在前面:

很多刚入门Vue不久的小伙伴,学了基础语法后,可能过了一段时间没有巩固练习,一上手就不知道怎么写了...语法都能看明白,但自己写就有点捉襟见肘了!本文呢,就来带大家复习一下Vue2中的基础常用的语法,让你能在学习之后立即上手独立开发自己的前端项目。下面就让我们开始吧 > > >

一、插值表达式

插值表达式很基础,相信大家学习了都能用,但估计呀,大多数人都是这样用!

这里讲一下大家可能遗漏的用法。首先,既然是表达式,那它肯定是可以被求值的,也就是说,我们可以在{{}}里写运算式子。

age本来初始化为18,我们经常的用法就是根据data里的变量在dom上动态渲染,这种用法就是根据变量的值渲染成我们想渲染的文本。工作中后端返回客户信息性别时,通常是1代表男生,0代表女生。这样肯定不可以直接把1,0展示在页面上,这个时候就能用{{sex==1?'男':'女'}}。第二种是直接在dom元素上调用了methods里的方法test。由Vue2的生命周期我们知道,渲染dom发生在beforeMount和mounted中,当渲染到这个元素时,同时调用了插值表达式中的test方法(test方法在created阶段就挂载好啦)

二、指令

概念: 指令(Directives)是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。 可以提高程序员操作 DOM 的效率。这里让我想到自己曾经有个疑惑,指令和方法都是一些逻辑操作的封装,它们之间有什么不同呢?通过查询得知,我知道了指令是操作dom元素的,比如v-bind为dom绑定属性;而methods方法是与用户交互


这里能清楚的看到,v-text和v-html指令与插值表达式有同样的效果。在新版语法中,v-text和v-html中不可以写其它东西了,写了不报错,但不会显示。 v-show和v-if都是条件渲染指令,他们的区别是:v-show是将元素样式的display设为none,dom里能查到;v-if直接不渲染元素,dom中没有此元素。在频繁切换的场景中,使用v-show,因为它只是改变元素样式,使其隐藏。不频繁的,建议使用v-if,直接不创建元素,也可以节省空间。

常使用的指令有:

  • 内容渲染指令(v-html、v-text)
  • 条件渲染指令(v-show、v-if、v-else、v-else-if)
  • 事件绑定指令(v-on),简写为@
  • 属性绑定指令 (v-bind) 简写为:
  • 双向绑定指令(v-model)
  • 列表渲染指令(v-for),可以遍历数组,对象和数字

指令修饰符:通过"."指明一些指令后缀 不同的后缀封装了不同的处理操作 ---> 简化代码 比如:v-model.trim 去除空格 v-model.number 转数字

三、computed计算属性

1.概念

computed就是依据现有的数据,计算出新的属性来。所依赖的数据变化了,会自动重新计算。

2.语法

1.声明在 computed 配置项中,一个计算属性对应一个函数 2.使用起来和普通属性一样使用 {{ 计算属性名}}

3.注意

1.computed配置项和data配置项是同级

2.computed中的计算属性虽然是函数的写法 ,但他依然是个属性

3.computed中的计算属性不能 和data中的属性同名

4.使用computed中的计算属性和使用data中的属性是一样的用法

5.computed中计算属性内部的this 依然指向的是Vue实例

面试中可能会被问到,计算属性(computed)比较普通属性(data)有什么优势? computed可以缓存,再次使用会直接读取缓存,只有依赖的数据变化了,它才会重新计算,并再次缓存。同时,computed属性也不会挂载在Vue实例上,所以它还节约了空间。在组件初始化时,它是后于data初始化的,因为后者基于前者。

四、watch侦听器

监听数据变化,执行一些业务逻辑或异步操作


一般情况下,我们写的都是第一种,但是当监听的对象是一个Object时,它的属性值发生了变化,那么第一种是无法监听到的,这时候必须用到第二种写法,deep:true作用就是去监听对象内部的属性值,immediate作用是是否进入页面就立即监听。 还有一点是,能用computed实现的,watch也一定能实现,但是优先选择前者,因为前者可以读取缓存中的数据。

五、生命周期

生命周期四个阶段:① 创建 ② 挂载 ③ 更新 ④ 销毁 1.创建阶段:创建响应式数据

2.挂载阶段:渲染模板

3.更新阶段:修改数据,更新视图

4.销毁阶段:销毁Vue实例

Vue2有八个生命周期函数,但常用的只有两个created和mounted

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdata
  6. updated
  7. beforeDestroy
  8. destroyed

更新阶段和销毁阶段很好理解,但创建和挂载经常会搞混,上图中很形象生动的说明了这两个阶段的行为。 beforeCreat阶段,由于数据和方法都还没被创建,这个时候是取不到数据和调用方法的;created阶段,数据和方法已经挂载在Vue实例上了,就可以调用了。beforeMount阶段,dom还没开始渲染,这个时候页面上什么都没有,空白的,因此在拿类名为one的元素是拿不到的,dom元素是个对象,因此返回null;mounted阶段,dom树渲染完毕,就可以取到页面中的元素了。

看到这里,相信你的Vue基础又被巩固了一遍,如果本文对你有点~帮助,可以关注我,一起进步~~ (新人博主,求求关注!!)我们下篇再见。

下期预告:组件通信

相关推荐
J不A秃V头A21 分钟前
Vue3:编写一个插件(进阶)
前端·vue.js
司篂篂44 分钟前
axios二次封装
前端·javascript·vue.js
姚*鸿的博客1 小时前
pinia在vue3中的使用
前端·javascript·vue.js
天下无贼!3 小时前
2024年最新版Vue3学习笔记
前端·vue.js·笔记·学习·vue
爱喝水的小鼠4 小时前
Vue3(一) Vite创建Vue3工程,选项式API与组合式API;setup的使用;Vue中的响应式ref,reactive
前端·javascript·vue.js
小晗同学4 小时前
Vue 实现高级穿梭框 Transfer 封装
javascript·vue.js·elementui
forwardMyLife4 小时前
element-plus的面包屑组件el-breadcrumb
javascript·vue.js·ecmascript
计算机学姐5 小时前
基于python+django+vue的影视推荐系统
开发语言·vue.js·后端·python·mysql·django·intellij-idea
luoluoal5 小时前
java项目之基于Spring Boot智能无人仓库管理源码(springboot+vue)
java·vue.js·spring boot
mez_Blog5 小时前
个人小结(2.0)
前端·javascript·vue.js·学习·typescript