Day1
创建Vue实例
准备容器
引包 —— 开发版本
创建Vue实例 —— new Vue()
指定配置项 el 和 data => 渲染数据
el指定挂载点，指定控制的是哪个盒子
data提供数据
<!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 id="app"><!-- 将来会编写一些用于渲染的代码逻辑 --><!-- 插值表达式 --><h1>{{msg}}</h1><a href="#">{{count}}</a></div><!-- 引包 —— 官网v2.cn.vuejs.org 开发版本(包含完整的注释和警告)/生产版本--><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({//通过el配置选择器，指定Vue管理的是哪个盒子el:'#app',//通过data提供数据data:{msg:'Hello 黑马',count:666}})</script></body>
</html>
插值表达式{{ 表达式 }}
表达式：能求得结果的 ；{{}}插值：用于渲染展示给用户看的文本的
🔺插值表达式不具备解析标签的能力
+ - * /
三元表达式
obj.name
arr[0]
obj.fn()
▲表达式中的数据需要在data里面声明
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- 容器 --><div id="app"><!-- 将来会编写一些用于渲染的代码逻辑 --><!-- 插值表达式 --><!-- toUpperCase()转大写 --><p>{{ msg.toUpperCase() }}</p><p>{{ msg + '你好' }}</p><p>{{ count >= 18 ? '成年' : '未成年' }}</p><p>{{ friend.name }}</p></div><!-- 引包 —— 官网v2.cn.vuejs.org 开发版本(包含完整的注释和警告)/生产版本--><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><!-- <script src="vue.js"></script> --><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({//通过el配置选择器，指定Vue管理的是哪个盒子el:'#app',//通过data提供数据data:{msg:'Hello',count:18,friend:{name:'jepson',desc:'热爱学习'}}})</script></body>
</html> 
Vue核心特性 —— 数据可以进行响应式处理
何为响应式：数据msg变化(修改)，视图自动更新
data里的数据如何访问或修改："实例.属性名" = "值"
app上拥有msg属性
直接在控制台修改对应属性；视图会更新
<!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 id="app"><h1>{{msg}}</h1><p>{{count}}</p></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({el:'#app',data:{//响应式数据msg:'你好 黑马',count:666}})</script></body>
</html>
极简插件官网_Chrome插件下载_Chrome浏览器应用商店
Vue指令
指令：带有 v-前缀 的特殊标签属性 <div v-html="str"></div>
v-html
作用：将一个文本当做html标签来解析
语法：v-html = "表达式"
<!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 id="app"><div v-html="msg"></div></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({el:'#app',data:{msg:`<a href="http://www.itheima.com">黑马程序员</a>`}})</script></body>
</html><!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 id="app"><div v-html="msg"></div></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({el:'#app',data:{msg:`<h1>学前端，来黑马</h1>`}})</script></body>
</html>v-show/v-if
控制元素的显示隐藏
区别：
v-show
v-show = "表达式" 表达式值为true显示；值为false隐藏
通过切换css的display:none来控制显示隐藏
场景：适用于频繁需要切换显示隐藏
v-if
v-if = "表达式" 表达式值为true显示；值为false隐藏
根据条件控制元素的创建和移除；其中隐藏就是移除
场景：x；点击叉号
v-if/v-else/v-else-if
v-else-if = "表达式"
<!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 id="app"><p v-if="gender === 1">性别：男</p><p v-else>性别：女</p><hr><p v-if="score >= 90">成绩评定A：奖励电脑一台</p><p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p><p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p><p v-else>成绩评定D：惩罚一周不能玩手机</p></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({el:'#app',data:{gender:2,score:95}})</script></body>
</html>
v-on
注册事件
语法：方式1.v-on:事件名 = "内联语句"
添加监听 + 提供处理逻辑
<!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 id="app"><button v-on:click="count--">-</button><span>{{count}}</span><button v-on:click="count++">+</button></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({el:'#app',data:{count:100}})</script>
</body>
</html>
鼠标滑入 click => mouseenter
简写：v-on:click => @click
@事件名
语法：方式2.语句改成函数名
v-on:事件名 = "methods中的函数名"
<!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 id="app"><button @click="fn">切换显示隐藏</button><h1 v-show="isShow">黑马程序员</h1></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app2 = new Vue({el:'#app',data:{isShow:true//默认值},methods:{fn(){app2.isShow = ! app2.isShow}}})</script>
</body>
</html>🔺methods函数内的this指向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 id="app"><button @click="fn">切换显示隐藏</button><h1 v-show="isShow">黑马程序员</h1></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app2 = new Vue({el:'#app',data:{isShow:true//默认值},methods:{fn(){this.isShow = ! this.isShow}}})</script>
</body>
</html>传参
语法：@click = "fn(参数1,参数2)"
<!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 id="app"><div class="box"><h3>自动售货机</h3><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button></div><p>银行卡余额：{{money}}元</p></div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app2 = new Vue({el:'#app',data:{money:100},methods:{buy(price){this.money -= price}}})</script>
</body>
</html>
v-bind
动态设置html的标签属性 -> src、url、title ...
场景：有些时候图片路径是动态设置的；不是写死的
语法：v-bind:属性名 = "表达式"
简写：:属性名 = "表达式"
<!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 id="app"><!-- <img v-bind:src="imgUrl" v-bind:title="msg"> --><img :src="imgUrl" :title="msg"> </div><script src="vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app2 = new Vue({el:'#app',data:{imgUrl:'../excel/logo.jpg',msg:'logo'}})</script>
</body>
</html>
这个title，鼠标悬停在图片上才会显示
点击按钮切换图片
<!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 id="app"><!-- v-show值为true显示 --><button v-show="index > 0" @click="index--">上一页</button><img v-bind:src="list[index]" ><button v-show="index < list.length-1" @click="index++">下一页</button></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{index:0,list:['../img/1.jpg','../img/2.jpg','../img/3.jpg','../img/4.jpg',]}})</script></body> </html>
v-for
多用于数组、对象...
遍历数组语法： v-for = "(item,index) in 数组"
item —— 数组中的每一项 ； index —— 数组下标
▲ index可省：v-for = "item in 数组"
<!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 id = "app"><h3>小黑水果店</h3><ul><li v-for="(item,index) in list">{{item}} - {{index}}</li></ul><ul><li v-for="item in list">{{item}}</li></ul></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{list:['西瓜','苹果','鸭梨','榴莲']}})</script></body>
</html>
小黑的书架
js中的filter()：对数组进行过滤；创建一个新数组，新数组中的元素是 通过检查的指定数组中符合条件的所有元素
语法：Array.filter(function(currentValue, indedx, arr), thisValue)
其中，函数 function 为必须，数组中的每个元素都会执行这个函数。且如果返回值为 true，则该元素被保留；函数的第一个参数 currentValue 也为必须，代表当前元素的值。
item => item.id!==id 看箭头函数那里
this.booksList = this.booksList.filter((item) => {return item.id!==id;})
前端——JS基础-CSDN博客
<!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 id = "app"><h3>小黑的书架</h3><ul><li v-for="(item,index) in booksList" :key="item.id"><span>{{item.name}}</span><span>{{item.author}}</span><button @click="fn(item.id)">删除</button></li></ul></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{booksList:[{id:1 , name:'《红楼梦》',author:'曹雪芹'},{id:2 , name:'《西游记》',author:'吴承恩'},{id:3 , name:'《水浒传》',author:'施耐庵'},{id:4 , name:'《三国演义》',author:'罗贯中'}]},methods:{fn(id){//console.log('删除',id)this.booksList = this.booksList.filter(item => item.id!==id)}}})</script> </body> </html>
v-for里的key
:key="唯一值"
给元素添加的唯一标识；这里相当于给li添加的唯一标识；key值必须具有唯一性，推荐使用id
不加key的话；相当于四个没起名的li；删哪个不知道；需要三个就留前三个li；删最后一个
加key；那就知道了，删key=id那个
v-model
给表单元素使用的，双向数据绑定（数据变化->视图自动更新；视图变化->数据自动更新）
可以快速/实时 获取/设置表单元素内容
语法：v-model = "变量"
<!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 id="app">账户：<input type="text" v-model="username"><br><br>密码：<input type="password" v-model="password"><br><br><button @click="login">登录</button><button @click="reset">重置</button></div><script src="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=''}}})</script>
</body>
</html>
小黑记事本
序号用index；防止删除不连贯
Day2
指令的修饰符 .
按键修饰符
@keyup.enter="fn" //键盘回车监听
v-model修饰符
v-model.trim //去除首尾空格
v-model.number //转数字
事件修饰符
@事件名.stop //阻止冒泡
不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></head><body><div id="app"><div @click="fatherFn" style="background-color: pink;width:200px;height:200px"><div @click="sonFn" style="background-color: skyblue;width:100px;height:100px">子元素</div></div></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{},methods:{fatherFn(){alert('老父亲被点击了')},sonFn(){alert('儿子被点击了')}}})</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"></head><body><div id="app"><div @click="fatherFn" style="background-color: pink;width:200px;height:200px"><div @click.stop="sonFn" style="background-color: skyblue;width:100px;height:100px">子元素</div></div></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{},methods:{fatherFn(){alert('老父亲被点击了')},sonFn(){alert('儿子被点击了')}}})</script>
</body>
</html>
@事件名.prevent //阻止默认行为
阻止事件本身行为,如阻止超链接的点击跳转 => @click.prevent
v-bind对样式控制的增强
对类名class操作的增强
不希望写死；想动态控制类名
写死：
<!DOCTYPE html> <html lang="en"> <head><style>.box{width:200px;height:200px;border:3px solid #000;font-size:30px;margin-top:10px;}.pink{background-color: pink;}.big{width:300px;height:300px;}</style> </head><body><div id="app"><div class="box pink big">黑马程序员</div></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{}})</script> </body> </html>
语法：:class = "对象/数组"
对象：
<div class="box" :class="{类名1:布尔值,类名2:布尔值}">黑马程序员</div>
<!DOCTYPE html> <html lang="en"> <head><style>.box{width:200px;height:200px;border:3px solid #000;font-size:30px;margin-top:10px;}.pink{background-color: pink;}.big{width:300px;height:300px;}</style> </head><body><div id="app"><div class="box" :class="{pink:true,big:true}">黑马程序员</div></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{}})</script> </body> </html>数组：
<div class="box" :class="['类名1','类名2']">黑马程序员</div>
<!DOCTYPE html> <html lang="en"> <head><style>.box{width:200px;height:200px;border:3px solid #000;font-size:30px;margin-top:10px;}.pink{background-color: pink;}.big{width:300px;height:300px;}</style> </head><body><div id="app"><div class="box" :class="['pink','big']">黑马程序员</div></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{}})</script> </body> </html>
对象适用场景 —— 一个类名来回切换
案例：京东秒杀tab导航高亮
<!DOCTYPE html>
<html lang="en">
<head><style>*{margin:0;padding:0;}.nav{list-style-type: none;display:flex;border-bottom: 2px solid black;}.nav-box{display:flex;justify-content: center;align-items: center;padding:20px;}.text{text-decoration:none;font-weight:bold;color:black}/* 高亮 */.active{background-color: red;}</style></head>
<body><div id="app"><ul class="nav"><!-- 对象 —— {类名：布尔值} --><!-- @click="activeIndex = index" 内联语句，用于提供处理逻辑 --><li class="nav-box" v-for="(item,index) in list" :key="item.id" :class="{active: index === activeIndex}" @click="activeIndex = index"><a href="#" class="text">{{item.name}}</a></li></ul></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{activeIndex:1,//记录高亮list:[{id:1,name:'京东秒杀'},{id:2,name:'每日特价'},{id:3,name:'品类秒杀'}]}})</script>
</body>
</html>
对style的增强
语法：style="样式对象"
<div class="box" :style="{CSS属性名1：CSS属性值，CSS属性名2：CSS属性值"></div>
<!DOCTYPE html>
<html lang="en">
<head><style>.box{width:200px;height:200px;background-color: pink;}</style>
</head>
<body><div id="app"><!-- 'background-color' --><div class="box" :style="{width:'400px',height:'400px',backgroundColor:'green'}"></div></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{}})</script>
</body>
</html>
案例：进度条
<!DOCTYPE html>
<html lang="en">
<head><style>.inner{width:50%;height:20px;border-radius:10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}</style>
</head>
<body><div id="app"><div><div class="inner" :style="{width:percent+'%'}"><span>{{percent}}%</span></div></div><br><button @click="percent=25">设置25%</button><button @click="percent=50">设置50%</button><button @click="percent=75">设置75%</button><button @click="percent=100">设置100%</button></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{percent:0}})</script>
</body>
</html>
v-model应用于其他表单元素
常见的表单元素都可以用v-model绑定关联；不是只有输入框input:text可以
=> 快速 获取 或 设置 表单元素的值
输入框：input:text
文本框：textarea
复选框：input:checkbox
单选框：input:radio
下拉菜单：select
<!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 id="app"><h3>小黑学习网</h3>姓名：<input type="text" v-model="username"><br><br><!-- 复选框：input:checkbox -->是否单身：<input type="checkbox" v-model="isSingle"><br><br><!-- 单选框：input:radioname:给单选框加上name属性可以分组；同一组互相会互斥value:给单选框加上value属性,用于提交给后台的数据-->性别:<input v-model="gender" type="radio" name="gender" value="1">男<input v-model="gender" type="radio" name="gender" value="2">女<br><br><!-- 下拉菜单：selectoption需要设置 value值；用于提交给后台select的value值，关联了选中的option的value值-->所在城市：<select v-model="cityId"><option value="101">北京</option><option value="102">上海</option><option value="103">成都</option><option value="104">南京</option></select><br><br>自我描述：<textarea v-model="desc"></textarea><br><br><button>立即注册</button></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{username:'',isSingle:true,gender:1,cityId:'103',desc:''}})</script>
</body>
</html>
计算属性
语法：{{计算属性名}}
🔺声明在computed配置项中；一个计算属性对应一个函数
computed:{
计算属性名(){
基于现有数据，编写求值逻辑
return 结果
}
}，
为什么写在computed计算属性里而不写在methods方法里：计算属性会对计算出来的结果进行缓存，再次使用直接读取缓存；当依赖项变化了，会自动重新计算然后再次缓存。
<!DOCTYPE html>
<html lang="en">
<head><style>table{border: 1px solid black;}td,th{border: 1px solid black;text-align: center; width:80px;}</style>
</head>
<body><div id="app"><h3>小黑的礼物清单</h3><table><tr><th>名字</th><th>数量</th></tr><tr v-for="(item,index) in list" :key="item.id"><td>{{item.name}}</td><td>{{item.num}}个</td></tr></table><p>礼物总数：{{totalCount}}个</p></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{list:[{id:1,name:'篮球',num:3},{id:2,name:'玩具',num:2},{id:3,name:'铅笔',num:5},]},computed:{totalCount(){let total = this.list.reduce((sum,item)=>sum+item.num,0)return total}}})</script>
</body>
</html>
分析：let total = this.list.reduce((sum,item)=>sum+item.num,0)
item数组中的每一项
首先列表和数组的区别：
列表：可以包含多种数据类型的元素；而数组：只能是同一数据类型
reduce函数：
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
函数先前返回的值（total）、数组中当前被处理的元素（currentValue）、当前索引（currentIndex）和数组本身（
array）
initialValue是初始值，可选参数
reduce()方法_reduce方法-CSDN博客
扩展 —— 既要获取又要设置的完整写法
语法：
computed:{
计算属性名:{
//获取
get(){
计算逻辑
return 结果
}，
//设置
set(修改的值）{
修改逻辑
}
}
}
<!DOCTYPE html>
<html lang="en">
<head><style>input{width:30px;}</style>
</head>
<body><div id="app">姓：<input type="text" v-model="firstName">+名：<input type="text" v-model="lastName">=<span>{{fullName}}</span><br><br><button @click="changeName">改名卡</button></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{firstName:'刘',lastName:'备'},methods:{changeName(){this.fullName='吕小布'}},computed:{fullName() {return this.firstName + this.lastName}}})</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><style>input{width:30px;}</style>
</head>
<body><div id="app">姓：<input type="text" v-model="firstName">+名：<input type="text" v-model="lastName">=<span>{{fullName}}</span><br><br><button @click="changeName">改名卡</button></div><script src="vue.js"></script><script>const app = new Vue({el:'#app',data:{firstName:'刘',lastName:'备'},methods:{changeName(){this.fullName='吕小布'}},computed:{fullName:{get(){return this.firstName + this.lastName},//这里fullName修改的值，传递给set方法的形参set(value){this.firstName = value.slice(0, 1)this.lastName = value.slice(1)}}}})</script>
</body>
</html>
