Vue（1）
一.初识Vue
1. Vue是什么
1.1 概念：Vue是一个用于构建用户界面的渐进式框架
构建用户界面：基于数据渲染出用户看到的页面
渐进式：Vue相关的生态语法：**Vuejs：声明式渲染，组件系统；**客户端路由（VueRouter），大规模状态管理（Vuex），构建工具（Webpack / Vite）
框架：一套完整的项目解决方案，大大提高开发效率（70%）
1.2 Vue的两种使用方法
①Vue核心包开发，场景：局部模块改造
②Vue核心包&Vue插件工程化开发，场景：整站开发
2.创建Vue实例，初始化渲染
核心步骤：1.准备容器
2.引包（官网）-开发版本 / 生产版本
3.创建Vue实例 new Vue（）
4.指定配置项→渲染数据：①el 指定挂载点②data 提供数据
{{msg}}
{{count}}
3.插值表达式（一种Vue的模板语法）
3.1作用：利用表达式进行插值，渲染到页面中
3.2语法：{{表达式}}
3.3注意点
（1）使用的数据必须存在（data）
（2）支持的是表达式，而非语法
（3）不能再标签属性中使用{{ }}插值
{{nickname}}
{{nickname.toUpperCase()}}
{{nickname+'你好'}}
{{age>=18?'成年':'未成年'}}
{{friend.name}}
{{friend.desc}}
3.Vue响应式特性
比如：数据的响应式处理→响应式：数据变化，视图自动更新
如何访问or修改？data中的数据，最终会被添加到实例上
①访问数据：“实例 . 属性名”
②修改数据：“实例 . 属性名”=“值”
二.Vue指令（带有v-前缀的特殊标签属性）（官网→学习→API）
根据不同的指令，针对标签实现不同的功能
1.v-html：设置元素的innerHTML
2.v-show 与 v-if
（1）v-show
1.作用：控制元素显示隐藏
2.语法：v-show=“表达式” 表达式的值true显示，false隐藏
3.原理：切换display：none控制显示隐藏
4.场景：频繁切换显示隐藏的场景
（2） v-if
1.作用：控制元素显示隐藏（条件渲染）
2.语法：v-if=“表达式” 表达式的值true显示，false隐藏
3.原理：基于条件判断，是否创建或移除元素节点
4.场景：要么显示，要么隐藏，不频繁切换的场景
我是v-show控制的盒子
我是v-if控制的盒子
3.v-else 与 v-else-if
（1） 作用：辅助v-if 进行判断渲染
（2）语法：v-else（表否则）
v-else-if = “表达式”
（3） 注意：需要紧挨着v-if 一起使用
性别：♂男
性别：♀女
成绩A
成绩B
成绩C
成绩D
4.v-on
（1） 作用：注册事件=事件监听 + 提供处理逻辑
（2） 语法：
①v-on：事件名=“内联语句”（v-on:可替换为@）
{{count}}
②v-on：事件名=“methods中的函数名”
"app">
"isShow">黑马
3.注意：methods函数内的this指向Vue实例
5.v-on调用传参
小黑自动售货机
"app">
"box">
小黑自动售货机
银行余额：{{money}}元
6.v-bind
（1） 作用：动态的设置HTML的标签属性→src url title
（2） 语法：v-bind：属性名=“表达式”
（3） 简写：v-bind：src → ：src
图片切换案例
"app">
<img :src="list[index]" alt="">
7.v-for
（1）作用：基于数据循环，多次渲染整个元素 → 数组 (对象，数字…)
（2）遍历数组语法：v-for = “( item,index) in 数组” （item每一项，index下标）
小黑水果店
小黑水果店
-
{{item}}-{{index}}
-
{{item}}
（3） 图书管理案例-小黑的书架
小黑的书架
-
{{ item.name }}
{{ item.author }}
（4）v-for中的key
语法：key属性 = " 唯一标识 "
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
v-for的默认行为会尝试原地修改元素（就地复用）
注意点:1.key的值只能是字符串或者数字类型
2.key的值必须具备唯一性
3.推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）
8.v-model
（1）作用：给表单元素使用，双向数据绑定 → 可以快速 获取 或者 设置 表单元素内容
①数据变化 → 视图自动更新
②试图变化 → 数据自动更新
（2）语法：v-model = ‘变量’
"app">
"box">
账户："text" v-model="username">
密码："password" v-model="password">
三.综合案例 - 小黑记事本
"en">
"UTF-8" />
"X-UA-Compatible" content="IE=edge" />
"viewport" content="width=device-width, initial-scale=1.0" />
"stylesheet" href="./css/index.css" />
记事本
"app">
"header">
小黑记事本
"todoName" placeholder="请输入任务" class="new-todo" />
"main">
"todo-list">
- "todo" v-for="(item, index) in list" :key="item.id">
"view">
"index">{{ index + 1 }}.