前端-Vue 快速上手

Vue 概念：

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

① 构建用户界面：基于 数据 动态 渲染 页面

② 渐进式：循环渐进的学习

③ 框架：一套完整的项目解决方案，提升开发效率↑（理解记忆规则）  

  规则 → 官网（v2.cn.vuejs.org  /  cn.vuejs.org）

Vue 的两种使用方式：

1. Vue 核心包开发

        场景: 局部 模块改造

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

        场景：整站 开发

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

1. 准备容器

2. 引包（官网）- 开发版本 / 生产版本

3. 创建 Vue 实例 new Vue()

4. 指定配置项 el data => 渲染数据

        ① el 指定挂载点，选择器指定控制的是哪个盒子

        ② data 提供数据

插值表达式  {{ }}

插值表示式是一种 Vue 的模版语法

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

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

2. 语法：{{ 表达式 }}

<h3> {{ title }} </h3>
<p> {{ obj.name }} </p>

3.注意点：

① 使用的数据必须存在（data）

        × <p> {{ hobby }} </p>

② 支持的是表达式，而非语句，比如：if for...

        × <p> {{ if }} </p>

③ 不能在标签属性中使用 {{ }} 插值

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

Vue核心特性：响应式

数据改变，视图会自动更新

数据 → 修改数据 → 监听到数据修改 → 自动更新视图/Dom操作 → 视图界面

聚焦于数据 → 数据驱动视图

使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可

1. 什么是响应式呢？

        数据改变，视图自动更新

        使用 Vue 开发 → 专注于业务核心逻辑即可

2. 如何访问或修改数据呢？

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

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

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

安装 Vue 开发者 工具 ：装插件调试 Vue 应用

（1）通过谷歌应用商店安装（国外网站）

（2）极简插件：下载 → 开发者模式 → 拖曳安装 → 插件详情允许访问文件

https://chrome.zzzmh.cn/index

打开 Vue 运行的页面，调试工具中 Vue栏，即可查看修改数据，进行调试。