-(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）
目录
Vue 快速上手
Vue 概念
创建实例
插值表达式
响应式特性
开发者工具
Vue 指令
v-show
v-if
v-else v-else-if
v-on
v-bind
v-for
key
v-model
Vue 快速上手
Vue 概念
概念：Vue 是一个用于 构建用户界面 的 渐进式 框架
构建用户界面:基于数据渲染出用户看到的页面
渐进式:循序渐进
Vue 的两种使用方式： ① Vue 核心包开发 场景： 局部 模块改造 ② Vue 核心包 & Vue 插件 工程化开发 场景： 整站 开发
框架:一套完整的项目解决方案
优点：大大提升开发效率 ( 70%↑ ) 缺点：需要理解记忆 规则 → 官网
创建实例
初始化渲染,核心步骤 4步： 1. 准备容器 2. 引包 (官网) – 开发版本 / 生产版本 3. 创建 Vue 实例 new Vue() 4. 指定配置项 → 渲染数据 ① el 指定挂载点 ② data 提供数据
Document {{msg}}//vue构造函数const app = new Vue({//通过el配置选择器，指定vue是哪个盒子el:'#app',data:{msg:'hello world'}})插值表达式
插值表达式 {{}} 是一种 Vue 的模板语法
1. 作用: 利用表达式进行插值，渲染到页面中 表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
2. 语法：{{ 表达式 }}
3. 注意点：
（1）使用的数据必须存在 （data）
响应式特性
数据改变，视图会自动更新
开发者工具
装插件调试 Vue 应用
（1）通过谷歌应用商店安装 （国外网站） （2）极简插件: 下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件 https://chrome.zzzmh.cn/index
Vue 指令
Vue 会根据不同的【指令】，针对标签实现不同的【功能】 指令：带有 v- 前缀 的 特殊 标签属性
v-show
1. 作用： 控制元素显示隐藏 2. 语法： v-show = “ 表达式 ” 表达式值 true 显示 ， false 隐藏 3. 原理： 切换 display:none 控制显示隐藏 4. 场景： 频繁切换显示隐藏的场景
v-if
1. 作用： 控制元素显示隐藏（ 条件渲染 ） 2. 语法： v-if = “ 表达式 ” 表达式值 true 显示 ， false 隐藏 3. 原理： 基于 条件判断 ，是否 创建 或 移除 元素节点 4. 场景： 要么显示，要么隐藏，不频繁切换的场景
v-else v-else-if
1. 作用： 辅助 v-if 进行判断 渲染 2. 语法： v-else v-else-if = “表达式” 3. 注意： 需要紧挨着 v-if 一起使用
Document 性别：♂ 男
性别：♀ 女
= 90">成绩评定A：奖励电脑一台
= 70">成绩评定B：奖励周末郊游
= 60">成绩评定C：奖励零食礼包
成绩评定D：惩罚一周不能玩手机
const app = new Vue({el: '#app',data: {gender: 2,score: 95}})v-on
1. 作用： 注册事件 = 添加监听 + 提供处理逻辑 2. 语法： ① v-on:事件名 = “内联语句”
3. 简写： @事件名 4. 注意： methods函数内的 this 指向 Vue 实例
v-on 调用传参
Document .box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}小周自动售货机
银行卡余额：{{ money }}元
const app = new Vue({el: '#app',data: {money: 100},methods: {buy (price) {this.money -= price}}})网页显示为：
v-bind
1. 作用： 动态的设置html的 标签属性 → src url title … 2. 语法： v-bind :属性名 =”表达式” 3. 注意： 简写形式 :属性名=”表达式”
v-for
1. 作用： 基于 数据 循环， 多次 渲染整个元素 → 数组 、对象、数字… 2. 遍历数组语法： v-for = “( item, index ) in 数组 ” item 每一项， index 下标 省略 index: v-for = “ item in 数组 “
key
v-for 的默认行为会尝试 原地修改元素 （ 就地复用 ） 语法： key属性 = “唯一标识” 作用： 给列表项添加的 唯一标识 。便于Vue进行列表项的 正确排序复用 。 注意点： 1. key 的值只能是 字符串 或 数字类型 2. key 的值必须具有 唯一性 3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
v-model
1. 作用: 给 表单元素 使用, 双向数据绑定 → 可以快速 获取 或 设置 表单元素内容 ① 数据变化 → 视图自动更新 ② 视图 变化 → 数据 自动更新 2. 语法: v-model = ‘变量’
