一、Vue简介
Vue是一套用于构建用户界面的渐进式框架。
所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点。
Vue2官网地址：https://v2.cn.vuejs.org/
Vue3官网地址：https://cn.vuejs.org/
二、安装与创建第一个Vue实例
注意：在写代码之前要安装node.js和VS Code编辑器，这里省略。
创建Vue实例，初始化渲染的核心步骤：
1.准备容器
2.引包(官网)- 开发版本/生产版本开发版本：学习时使用开发版本，报错更详细；也可以直接下载vue.js文件
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>生产版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>3.创建Vue实例 new Vue()
4.指定配置项 el data => 渲染数据
el 指定挂载点，选择器指定控制的是哪个盒子
data 提供数据
创建第一个Vue实例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div class="box"></div><div class="box2"></div><div id="app"><!-- 这里将来会编写一些用于渲染的代码逻辑 --><h1>{{msg}}</h1><a href="###">{{count}}</a></div><script src="/day01/vue/vue.js"></script><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> --><script>const app = new Vue({// 通过el配置选择器，指定Vue管理的是哪个盒子el: "#app",// 通过data提供数据data: {msg: "Hello World",count: 6666,},});</script></body>
</html>
三、插值表达式
1.插值表达式概述
插值表达式是一种Vue的模板语法，我们可以用插值表达式渲染出Vue提供的数据。
上面代码的<h1>{{msg}}</h1>就是插值表达式
2.语法
<h3>{{title}}<h3><p>{{nickName.toUpperCase()}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{obj.name}}</p><p>{{fn()}}</p>3.错误用法
1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p> //如果在data中不存在 则会报错2.支持的是表达式，而非语句，比如：if for ...
<p>{{if}}</p>3.不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>4.代码示例
<body><div id="app"><p>{{nickname}}</p><p>{{nickname.toUpperCase()}}</p><p>{{nickname + '你好'}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{friend.name}}</p><p>{{friend.desc}}</p><p :title="friend.desc">我是李四</p></div><script src="/day01/vue/vue.js"></script><script>const app = new Vue({el: "#app", //绑定id是app的元素(又称：容器)// 通过data提供数据data: {nickname: "Hello World",age: 18,friend: {name: "张三",desc: "热爱学习vue",},},});</script>
</body>
四、响应式
响应式简单理解就是数据变，视图对应变。
① 访问数据： "实例.属性名"
② 修改数据： "实例.属性名"= "值"
<body><div id="app">{{msg}} {{count}}</div><!-- <script src="/day01/vue/vue.js"></script> --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {// 响应式数据msg: "你好",count: 100,},});</script>
</body>
五、Vue开发者工具安装——Vue.js Devtools
(一)Edge浏览器中安装
在扩展中直接搜素vue，Vue.js.devtools就是，点击获取安装
勾选上红框的内容
使用VS Code打开浏览器时F12就会有Vue标志了
(二)Google浏览器安装
参考文章：Vue的开发者调试工具（devtools5.3.4）安装
安装之后可以F12后看到多一个Vue的调试面板
六、Vue指令
(一)v-show与v-if
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：
1.v-show
- 作用： 控制元素显示隐藏
- 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
- 原理： 切换 display:none 控制显示隐藏
- 场景：频繁切换显示隐藏的场景
2.v-if
- 作用： 控制元素显示隐藏（条件渲染）
语法： v-if= "表达式" 表达式值 true显示， false 隐藏
原理： 基于条件判断，是否创建 或 移除元素节点
场景： 要么显示，要么隐藏，不频繁切换的场景
<div id="app"><div v-show="flag" class="box">我是v-show控制的盒子</div><div v-if="flag" class="box">我是v-if控制的盒子</div>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {flag: false}})
</script>(二)v-on与v-bind
1.v-on与v-bind语法
- <button v-on:事件名="内联语句">按钮</button>
- <button v-on:事件名="处理函数">按钮</button>
- <button v-on:事件名="处理函数(实参)">按钮</button>
- `v-on:` 简写为 **@**
- v-bind：动态设置html的标签属性 比如：src、url、title
- v-bind: 可以简写成 => :标签属性注意：
事件处理函数应该写到一个跟data同级的配置项（methods）中
methods中的函数内部的this都指向Vue实例
代码示例：
<body><div id="app"><p v-if="gender == 1">性别：男</p><p v-else>性别：女</p><button @click="count--">-</button><span>{{count}}</span><button @click="count++">+</button><hr /><button @click="fn">切换显示隐藏</button><h1 v-show="isShow">hello world</h1><!-- v-on调用传参 --><hr /><div class="box"><h3>自动售货机</h3><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button><button @click="buy(8)">牛奶8元</button></div><p>银行卡余额：{{money}}元</p><!-- v-bind:src => :src --><hr /><img :src="imgUrl" :title="msg" /></div></body><script src="/day01/vue/vue.js"></script><script>const app = new Vue({el: "#app",data: {gender: 2,count: 100,isShow: true,money: 100,imgUrl: "imgs/11-02.gif",msg: "hello",},methods: {fn() {console.log("执行了fn");// app.isShow= !app.isShow;this.isShow = !this.isShow;},buy(price) {this.money -= price;},},});</script>2.v-bind对样式控制的增强-操作class
为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。
2.1语法
<div> :class = "对象/数组">这是一个div</div>2.2对象语法
当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>适用场景：一个类名，来回切换
2.3数组语法
当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>使用场景：批量添加或删除类
<body><div id="app"><ul><liv-for="(item, index) in list":key="item.id"@click="activeIndex = index"><a :class="{active:index === activeIndex}" href="#">{{item.name}}</a></li></ul></div></body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><!-- <script src="./vue/vue.js"></script> --><script>const app = new Vue({el: "#app",data: {activeIndex: 0, // 记录高亮，给出默认的索引位置list: [{ id: 1, name: "京东秒杀" },{ id: 2, name: "每日特价" },{ id: 3, name: "品类秒杀" },],},});</script>
<style>* {margin: 0;padding: 0;}ul {display: flex;border-bottom: 2px solid #e01222;padding: 0 10px;}li {width: 100px;height: 50px;line-height: 50px;list-style: none;text-align: center;}li a {display: block;text-decoration: none;font-weight: bold;color: #333333;}li a.active {background-color: #e01222;color: #fff;}
</style>
思路：
1.基于数据，动态渲染tab（v-for）
2.准备一个下标 记录高亮的是哪一个 tab
3.基于下标动态切换class的类名
3.v-bind对有样式控制的增强-操作style
语法：
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
(三)v-for
v-for 用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用(item, index) in arr形式的特殊语法，也可以遍历对象和数字，其中：
item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组
<body><div id="app"><ul><li v-for="(item, index) in list" :key="index">{{item}}</li></ul><hr /><ul><li v-for="(book, index) in booksList" :key="book.id"><span>{{book.name}}</span><span>{{book.author}}</span><!-- 注册点击事件-> 通过id进行删除数组中的对应项 尽量不使用index删除，因为id更稳定 --><button @click="deleteBook(book.id)">删除</button></li></ul> </div></body><!-- <script src="vue/vue.js"></script> --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {list: ["张三", "李四", "王五", "jack"],booksList: [{ id: 1, name: "《红楼梦》", author: "曹雪芹" },{ id: 2, name: "《西游记》", author: "吴承恩" },{ id: 3, name: "《水浒传》", author: "施耐庵" },{ id: 4, name: "《三国演义》", author: "罗贯中" },],},methods: {deleteBook(id) {console.log(id);this.booksList = this.booksList.filter((item) => item.id !== id);}, },});</script>
v-for中的key
语法： key="唯一值"
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）
注意：
key 的值只能是字符串 或 数字类型
key 的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
(四)v-model
<body><div id="app"> 账户：<input type="text" v-model="username" /><br />密码：<input type="password" v-model="password" /><br /><button @click="login">登录</button><button @click="reset">重置</button></div></body><!-- <script src="vue/vue.js"></script> --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: { username: "",password: "",},methods: { login() {console.log(this.username, this.password);},reset() {this.username = "";this.password = "";console.log(this.username, this.password);},},});</script>
v-model在其他表单元素的使用
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
输入框 input:text ——> value
文本域 textarea ——> value
复选框 input:checkbox ——> checked
单选框 input:radio ——> checked
下拉菜单 select ——> value
...
<body><div id="app"><h3>xx学习网</h3>姓名：<input type="text" v-model="username" /><br /><br />是否单身：<input type="checkbox" v-model="isSingle" /><br /><br /><!-- 1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性，用于提交给后台的数据-->性别:<input v-model="gender" type="radio" name="gender" :value="1" />男<input v-model="gender" type="radio" name="gender" :value="2" />女<br /><br /><!-- 1. option 需要设置 value 值，提交给后台2. select 的 value 值，关联了选中的 option 的 value 值-->所在城市:<select v-model="cityId" ><option value="1">北京</option><option value="2">上海</option><option value="3">成都</option><option value="4">南京</option></select> {{cityId}}<br /><br />自我描述：<textarea v-model="desc"></textarea><button>立即注册</button></div><script src="./vue/vue.js"></script><script>const app = new Vue({el: "#app",data: {username: "789",isSingle: true,gender: 1,cityId: '3',desc: "",},methods: {fun() {console.log(this.cityId);},},});</script></body>
(五)综合案例——记事本
<body><!-- 主体区域 --><section id="app"><!-- 输入框 --><header class="header"><h1>记事本</h1><input placeholder="请输入任务" class="new-todo" v-model="todoName" /><button class="add" @click="addTodo">添加任务</button></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item, index) in list" :key="index"><div class="view"><span class="index">{{index+1}}</span><label>{{item.name}}</label><button class="destroy" @click="del(item.id)"></button></div></li></ul></section><!-- 统计和清空 --><footer class="footer" v-show="this.list.length > 0"><!-- 统计 --><span class="todo-count">合 计:<strong> {{list.length}} </strong></span><!-- 清空 --><button class="clear-completed" @click="resetToDo">清空任务</button></footer></section></body><!-- 底部 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {todoName: "",list: [{ id: 1, name: "跑步十公里" },{ id: 2, name: "跑步五公里" },{ id: 3, name: "跑步三公里" },],isShow: true,},methods: {del(id) {this.list = this.list.filter((item) => item.id !== id);},addTodo() {if (this.todoName.trim() !== "") {this.list.push({id: +new Date(),name: this.todoName,});// 添加完成后要清空输入框this.todoName = "";} else {return;}console.log(this.list);},resetToDo() {this.list = [];},},});</script>
七、指令修饰符
所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码
1.按键修饰符
@keyup.enter —>当点击enter键的时候才触发
<input type="text" v-model.trim="username" @keyup.enter="writeSomething"/>
<input type="text" v-model.trim.number="age" @keyup.enter="writeSomething"/>
<header class="header"><h1>记事本</h1><input@keyup.enter="addTodo"placeholder="请输入任务"class="new-todo"v-model="todoName"/><button class="add" @click="addTodo">添加任务</button>
</header>此时，点击添加按钮和回车，都能触发addTodo函数
小tips：通过函数的形参，可以拿到事件绑定的对象
<body><div id="app"><button @click="handleClick">点击我</button></div></body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {},methods: {handleClick(event) {console.log(event); // 这里可以访问到事件对象console.log(event.target);console.log(event.type);console.log(event.pageX);// 可以访问 event.target, event.type, event.pageX 等属性},},});</script>
2.v-model修饰符
v-model.trim —>去除两端空格
v-model.number —>转数字
姓名:<input type="text" v-model.trim="username" @keyup.enter="writeSomething"/>
年龄<input type="text" v-model.trim.number="age" @keyup.enter="writeSomething"/>3.事件修饰符
@事件名.stop —> 阻止冒泡
@事件名.prevent —>阻止默认行为
@事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为
