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基础又被巩固了一遍，如果本文对你有点~帮助，可以关注我，一起进步~~ （新人博主，求求关注！！）我们下篇再见。

来自-最爱喝牛奶，欢迎大家关注！

在线备战面试、刷题指南，拿走不谢，要学会站在别人的肩膀上提升自己点击这里-->

最后:

 如果你现在正在找工作，可以私信“web”或者直接添加下方小助理进群领取前端面试小册、简历优化修改、大厂内推以及更多阿里、字节大厂面试真题合集，和p8大佬一起交流。