Vue学习笔记(黑马前端)

Vue阶段作业地址

Vue 核心技术与实战 day01

Vue 快速上手

Vue 概念 / 创建实例 / 插值表达式 / 响应式特性 / 开发者工具

Vue 指令

v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model

综合案例 - 小黑记事本

列表渲染 / 删除功能 / 添加功能 / 底部统计 / 清空

Vue快速上手

Vue 是什么

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

​ 基于数据渲染出用户看到的页面

Vue 的两种使用方式：

① Vue 核心包开发

场景：局部 模块改造

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

场景：整站 开发

Vue是什么？

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

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

2. 渐进式：循序渐进的学习

3. 框架：一套完整的项目解决方案，提升开发效率↑ (理解记忆规则)

​ 规则→ 官网

创建 Vue 实例，初始化

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

1. 准备容器

2. 引包 (官网) - 开发版本 / 生产版本

3. 创建 Vue 实例 new Vue()

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

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

② data 提供数据

插值表达式 {{ }}

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

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

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

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

{{nickname.toUpperCase()}}
{{age+'是成年人'}}
{{age>=18? '成年' :'未成年'}}
{{friend.name}}
{{friend.desc}}

3. 注意点：

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

{{hobby}}

（2）支持的是表达式，而非语句，比如：if for …

{{if}}

（3）不能在标签属性中使用 {{ }} 插值