初识Vue

初识Vue

Vue是什么

概念：Vue是一个用于构建用户界面的渐进式框架。

Vue的两种使用方式：

1. Vue核心包开发

   场景：局部模块改造

2. Vue核心包&Vue插件工程化开发

   场景：整站开发

优点：大大提升开发效率。

缺点：需要理解记忆规则。

创建实例

创建Vue实例初始化渲染核心步骤：

1. 准备容器
2. 引包（官网）- 开发版本 / 生产版本
3. 创建Vue实例 new Vue()
4. 指定配置项 —> 渲染数据
   1. el 指定挂载点
   2. data 提供数据

插值表达式

插值表达式是一种Vue语法。

作用：利用表达式进行查找，渲染到页面中

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

语法：{{ 表达式 }}

<h2>{{ msg }}</h2>
<p>{{ nickname.toUpperCase() }}</p>
<p>{{ age >= 18 ? '成年' : '未成年' }}</p>
<p>{{ obj.name }}</p>

注意点：

1. 使用的数据必须存在。

2. 支持的是表达式，而非语句。

3. 不能再标签属性中使用 {{}} 插值。

   <p title="{{ username }}">p标签</p>

Vue核心特性：响应式

实例中的data属性里的数据是响应式数据，当数据变化时，视图会自动更新。

data中的数据，会被添加到实例上：

1. 访问数据 - 实例.属性名
2. 修改数据 - 实例.属性名 = 新值