DAY1: 1.vue 快速上手
1.vue概念
优点:大大提升开发效率(70%个)
缺点:需要理解记忆规则 （官网去学习）
概念:Vue 是一个用于 1.构建用户界面 的 2.渐进式 3.框架
1.构建用户界面
基于数据渲染出用户看到的页面
2.渐进式
循序渐进，由内到外：
1.声明式渲染
2.组件系统 //1和2 在一起交 vuejs 核心包
3.客户端路由（VueRouter）
4.大规模状态管理（Vuex）
5.构建工具（Webpack/Vite）
补充：
Vue 的两种使用方式
1.Vue 核心包开发
场景:局部 模块改造
2.Vue 核心包 & Vue 插件 工程化开发
场景:整站 开发
3.框架
一套完整的项目解决方案
4.总结
Vue是什么?
Vue 是一个用于 构建用户界面 的 渐进式 框架
1.构建用户界面:基于 数据 动态 渲染 页面
2.渐进式:循序渐进的学习
3.框架:一套完整的项目解决方案，提升开发效率(理解记忆规则) 规则 → 官网
2.创建实例
创建 Vue 实例，初始化渲染的核心步骤:
1.准备容器
2.引包(官网)-开发版本/生产版本
3.创建 Vue 实例 new Vue() //注意：此处的V要大写
4.指定配置项 el data => 渲染数据
3.插值表达式{{}}
插值表达式是一种 Vue 的模板语法
1.作用:利用表达式进行插值，渲染到页面中
表达式:是可以被求值的代码，JS引擎会将其计算出一个结果
2.语法:{{ 表达式 }}
<h>{{ title }}</h>
<p>{{ nickname.toUppercase()}}</p>
<p>{{ age >= 18 ?'成年’:'未成年’}}</p>
<p>{{ obj.name }}</p>
3.注意点:
1.使用的数据必须存在(data)
2.支持的是表达式，而非语句，比如:if for…
3.不能在标签属性中使用 {{}}插值
4.总结
1.插值表达式的作用是什么?
利用表达式进行插值，将数据渲染页面中
2.语法格式?
{{表达式 }}
3.插值表达式的注意点:
1.使用的数据要存在 (data)
2.支持的是表达式，而非语句if.. for
3.不能在标签属性里面使用
4.Vue 核心特性:响应式
我们已经掌握了基础的模板渲染，其实除了基本的模板渲染，Vue背后还做了大量工作。比如:数据的响应式处理 → 响应式: 数据变化，视图自动更新
例如：
<div id="app>
{{ msg }}
</div>
const app = new Vue({
el:#app
data:{
msg:Hello Vue
}
如果此时 Hello Vue 改成 Hello 黑马 上面div标签中也会自动更新
1.如何访问 or 修改? data中的数据,最终会被添加到实例上
1.访问数据:"实例.属性名"
2.修改数据:"实例.属性名"="值"
2.底层逻辑：数据改变，视图会自动更新
1.数据 -> 修改数据 -> vue监听到数据修改 -> 自动更新视图(Dom操作) -> 视图界面
2.聚焦于数据 → 数据驱动视图
3.使用 Vue 开发，关注 业务的核心逻辑，根据业务 修改数据 即可
3.总结
1.什么是响应式呢?
1.数据改变，视图自动更新
2.使用 Vue 开发 → 专注于业务核心逻辑 即可
2.如何访问或修改数据呢?
data中的数据，最终会被添加到实例上
1.访问数据:"实例.属性名!
2.修改数据:"实例.属性名"="值"
5.开发者工具
看第7集
2.Vue 指令
Vue 会根据不同的【指令】，针对标签实现不同的【功能】
1.指令:带有 v-前缀 的 特殊 标签属性
2.示例：
!--Vue 指令:v-前缀的标签属性 -->
<diy v-html="str"></div>
3.总结
1.什么是 Vue 指令呢?
1.指令就是带有 v- 前缀 的特殊 属性，不同属性 对应 不同的功能
2.学习不同指令 → 解决不同业务场景需求
2.如果需要动态解析标签，可以用哪个指令?语法?
v-html="表达式" → 动态设置元素 innerHTML
4.常用的指令（官网可查所有指令）
1.v-html:
1.作用:设置元素的 innerHTML
2.语法:v-html="表达式
2.v-show
1.作用:控制元素显示隐藏
2.语法:v-show="表达式"表达式值 true 显示， false 隐藏
3.原理:切换 display:none 控制显示隐藏
4.场景:频繁切换显示隐藏的场景
3.v-if
1.作用: 控制元素显示隐藏(条件渲染)
2.语法:v-if="表达式”表达式值 true 显示， false 隐藏
3.原理: 基于条件判断，是否 创建 或 移除 元素节点
4.场景: 要么显示，要么隐藏，不频繁切换的场景
4.v-else和v-else-if
1.作用: 辅助 v-if 进行判断渲染
2.语法:v-else v-else-if="表达式
3.注意: 需要紧挨着 v-if 一起使用
5.v-on
1.作用:注册事件 = 添加监听 +提供处理逻辑
2.语法:
1.v-on:事件名="内联语句"
2.v-on:事件名="methods中的函数名"
3.简写:@事件名 @ === v-on: //注意：冒号 ：也是代替了的
<button v-on:click="count++">按钮</button>
<button @click="count++">按钮</button>
4.练习帮助理解2.语法
5.v-on调用传参
<button @click="fn(参数1,参数2)">
按钮
</button>
const app = new Vue({
el:'#app',
methods:{
fn(a, b){
console.log('这是一个fn函数')
}
}
})
6.看练习帮助理解
6.v-bind
1.作用: 动态 的设置html的标签属性→>src url title .
2.语法:v-bind:属性名="表达式”
3.简写形式: :属性名="表达式" // : === v-bind
4.看练习帮助理解
7.v-for
1.作用: 基于数据循环，多次渲染整个元素 -> 数组、对象、数字..
<p V-for="">我是一个内容 </p>
2.遍历数组语法:
v-for="(item,index)in 数组"
item 每一项，index 下标
省略index:v-for="item in 数组
3.补充:v-for中的key
1.语法:key属性="唯一标识"
2.作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
3.不加key:v-for 的默认行为会尝试 原地修改元素(就地复用)。白话说,就是没有删除第一个li标签,只是把内容删除，后面的内容往前补
4.注意点:
1.key 的值只能是 字符串 或 数字类型
2.key 的值必须具有 唯一性
3.推荐使用 id 作为 key(唯一)，不推荐使用 index 作为 key(会变化，不对应)
语法：<li v-for="(item, index) in xxx" :key="唯一值">
4.看练习帮助理解
8.v-model
1.作用:给 表单元素 使用，双向数据绑定 -> 可以快速 获取 或 设置 表单元素内容
数据变化 -> 视图自动更新
视图变化 -> 数据自动更新
2.语法:v-model='变量'
3.看练习帮助理解
3.综合案例-小黑记事本
1.列表渲染/删除功能/添加功能/底部统计和清空 看综合案例
2.功能总结:
1.列表渲染:
v-for key的设置 {{}} 插值表达式
2.删除功能
v-on调用传参 filter过滤 覆盖修改原数组
3.添加功能
v-model绑定 unshift修改原数组添加
4.底部统计 和 清空
数组.length累计长度
覆盖数组清空列表
v-show 控制隐藏
