Vue第一周

概念

一套 构建用户界面 的 渐进式 框架

1.什么是构建用户界面

基于数据渲染出用户可以看到的界面

2.什么是渐进式

所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点

Vue的两种开发方式：

0. Vue核心包开发

   场景：局部模块改造

1. Vue核心包&Vue插件&工程化

   场景：整站开发

3.什么是框架

所谓框架：就是一套完整的解决方案

提到框架，不得不提一下库。

• 库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等
• 框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

下图是 库 和 框架的对比。

创建Vue实例

核心步骤（4步）：

0. 准备容器

1. 引包（官网） — 开发版本/生产版本

2. 创建Vue实例 new Vue()

3. 指定配置项，渲染数据

   0. el:指定挂载点
   1. data提供数据

插值表达式 {{}}

插值表达式是一种Vue的模板语法

我们可以用插值表达式渲染出Vue提供的数据

1.作用：利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会讲其计算出一个结果

以下的情况都是表达式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

2.语法

插值表达式语法：{{ 表达式 }}

<h3>{{title}}<h3>
​
<p>{{nickName.toUpperCase()}}</p>
​
<p>{{age >= 18 ? '成年':'未成年'}}</p>
​
<p>{{obj.name}}</p>
​
<p>{{fn()}}</p>

响应式特性

1.什么是响应式？

​ 简单理解就是数据变，视图对应变。

2.如何访问 和 修改 data中的数据（响应式演示）

data中的数据, 最终会被添加到实例上

① 访问数据： "实例.属性名"

② 修改数据： "实例.属性名"= "值"

Vue中的常用指令

概念： 指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。

为啥要学：提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类：

• 内容渲染指令（v-html、v-text）
• 条件渲染指令（v-show、v-if、v-else、v-else-if）
• 事件绑定指令（v-on）
• 属性绑定指令 （v-bind）
• 双向绑定指令（v-model）
• 列表渲染指令（v-for）

指令是 vue 开发中最基础、最常用、最简单的知识点。