vue3入门

一、概述

vue 是一套用于构建用户界面的渐进式框架。在前端框架里，相对来说 vue 的入门门槛低，上手相对简单，且国内市场占有率很高，特别是中小企业，基本上都是用 vue。

vue的优点：

• 简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。

• 数据驱动：不直接操作dom，减少性能损耗，数据操作与展现也更加方便。

• 组件化： 用解耦、可复用的组件来构造界面。提高开发效率和代码质量。

• 快速：精确有效的异步批量 DOM 更新。

• 模块友好：通过 NPM 或 Bower 安装，无缝融入你的工作流。

二、基本用法

1、插值表达式

在 vue 中，通过 { {}} 的方式可以把数据显示到模板中，这种方式称为插值表达式。在这种表达式中，可以是各种数值,变量,运算符的综合体,也可以是JavaScript的一些函数，但像 if/else 等复杂的表达式是不允许的。

2、常用指令

2.1 v-bind

v-bind 用于绑定属性，一般可直接用 ：简写

<img v-bind:src="path">
<img :src="path">

2.2 v-if 与 v-else

v-if 里可直接填写一个表达式，vue会根据表达式的值在DOM中生成或移除一个元素,如果v-if表达式为true,那么对应元素的一个克隆将被重新插入DOM中,否则从DOM移除

<h1 v-if="num === 1">Hello World</h1>
//v-else-if
<h1 v-else-if="num === 2">Hello Java</h1>
//v-else
<h1 v-else>