10分钟vue学会这几招，走遍天下都不怕

1.概述：构建用户界面的渐进式javascript框架

2.安装

好了，接下来就是重要知识了！！！！

3.实例化：

实例化是指在面向对象的编程中，把用类创建对象的过程称为实例化。 是将一个抽象的概念类，具体到该类实物的过程。 实例化过程中一般由类名对象名= new 类名（参数1，参数2...参数n）构成

看下

接下来的就很重要了

4.内置指令：

内置指令有哪些呢？

内置指令指的就是Vue自带指令，可以直接在项目中使用。 一共有 16 个自带指令，包括了： v-text 、 v-html 、 v-show 、 v-if 、 v-else 、 v-else-if 、 v-for 、 v-on 、 v-bind 、 v-model 、 v-slot 、 v-pre 、 v-cloak 、 v-once 、 v-memo 、 v-is

接下来咱们一个一个介绍

1.v-for

 使用 v-for 指令把数组的选项列表进行渲染。 v-for 指令需要使用 item in items 形式的特殊语法， items 是源数据数组， item 是数组元素迭代的别名。

2.v-for和v-if同时使用

• 在 vue 2.x 中，在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用

• 在 vue 3.x 中，v-if 总是优先于 v-for 生效。

1、选择性地渲染列表，例如根据某个特定属性来决定是否渲染，使用计算属性computed：

 2、 避免渲染本该隐藏的列表项，将v-if放到循环列表元素的父元素中或使用template将v-for渲染的元素包起来，再在template上使用v-if。

总结：

• vue2.x 中v-for优先级高于v-if，vue3.x 相反

• 尽量避免在同一个元素上面同时使用v-if和v-for，建议使用计算属性替代

3. v-if 、 v-else 、 v-else-if

vue条件语句v-if、v-else、v-else-if用法 v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。 因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建

4.v-on

v-on就是用于绑定事件的

5.v-show

 v-show的用法和v-if非常相似，也用于决定一个元素是否渲染

6.v-text   v-html

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。 v-model通常用于表单组件的绑定，例如input，select等

v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。

7.实战一下，大家可以跟着做一下。。

01.

 看一下效果图

 

 02  做一个按钮点击显示或隐藏

我用了两个方法  大家可以看一下

 

 可以看一下效果

 大家可以试一下，加油！！！

我把知识点放到下面  大家可以参考一下，可以的话，点个赞。也祝各位大神都能月入过万！！！

 

码字不易记得点赞啊 ！！！