四、绑定事件
1. 大麦网列表页
【{{item.cityname}}】 {{item.name}}
{{item.categoryname}}
{{item.cityname}} | {{item.venue}}
{{item.showtime}}
{{item.price_str}} 元
new Vue({el:'#app',// 定义数据
data(){
return{// 城市数组
citys:['全部','成都','北京','上海','杭州','温州','天津','上饶','深圳'],// 选中城市的高亮索引
cityActive:0,// 分类数组
types:['全部','音乐会','演唱会','话剧歌剧','展览休闲','舞蹈芭蕾','儿童亲子'],// 选中分类的高亮索引typeActive:0,// 定义一个商品数组(用于保存所有的商品信息)
resultData:[],// 定义一个商品数组(用于显示展示的商品信息)showData:[]}},// 定义方法
methods:{// 过滤数据的方法
filterData(){// 先根据城市筛选
if(this.cityActive===0){
this.showData=this.resultData
}
else{// 根据城市进行筛选
this.showData=this.resultData.filter(r=>r.cityname===this.citys[this.cityActive])}// 再根据分类筛选if(this.typeActive!==0){
this.showData=this.showData.filter(r=>r.categoryname===this.types[this.typeActive])}},// 跳转到详情页gotoDetail(id){
// 跳转到详情页window.location.href="./detail.html?id="+id}
},// 此时，我已经可以操作数据了
created(){axios.get("./data/data.json").then(({data:{pageData:{resultData}}})=>{this.resultData=resultDatathis.showData=resultData})},// 侦听器
watch:{// 侦听选中的城市索引
cityActive(){this.filterData()},// 侦听选中的分类的索引
typeActive(){this.filterData()}}})
2. 大麦网详情页
【{{item.cityname}}】 {{item.name}}
{{item.categoryname}}
{{item.cityname}} | {{item.venue}}
{{item.showtime}}
票档： {{item}}
合计： {{totalPrice | toFixed2}}元
newVue({el:'.detail',data(){
return{// 商品信息
item:{},// 票档
prices:[99,199,229,289,339],// 票档选中的索引
priceActive:0,// 购票数量
count:1}},// 页面挂载完毕的生命周期
mounted(){// 获取当前商品的id
let id=window.location.search.split('=')[1]// 根据id请求商品信息
axios.get("./data/data.json").then(({data:{pageData:{resultData}}})=>{// 数组的find方法，根据条件返回满足条件的第一个对象。
this.item=resultData.find(r=>r.id===id)})},// 计算属性
computed:{totalPrice(){return this.count*this.prices[this.priceActive]}},// 过滤器
filters:{toFixed2(val){return val.toFixed(2)}}})
3. v-model指令的详细用法
姓名：
学历：
小学
硕士
博士
博士后 {{xueli}}
let vm=new Vue({
el:'#app',
data:{name:'张三',address:'北京市朝阳区',// 用于表示是否同意
isOK:true,// 爱好数组
hobbies:["烫头","跳"],// 性别
sex:'女',// 学历
xueli:'博士',// 美食
meishi:[],// 消息
msg:'',//年龄
age:20,
city:'北京'},})
4. 绑定事件
Say Hi
Say Hello
修改name {{name}}
只触发一次
new Vue({
el:'#app',
data(){return{name:'张三'}},
methods:{
sayHi(e){
console.log(e);
console.log('Hi');
},
sayHello(val,e){
console.log(val);
console.log(e);
},
a(){
alert('大家好！我是a')
},
b(){
// 通过事件对象，阻止事件冒泡
// e.stopPropagation();alert('大家好！我是b')},
cm(){
// 通过事件对象，阻止默认行为
// e.preventDefault();
console.log('哈哈');},
once(){alert('你好呀！')},
c(){alert('大家好！我是c')},
e(){alert('大家好！我是e')},
f(){alert('大家好！我是f')},
g(){console.log(11);}},})
五、深度响应式
1. 按键修饰符
new Vue({
el:'#app',
// data选项，定义属性，该选项可以是一个对象，也可以是一个方法返回一个对象。
data:{
// 商品数组
goodses:['小米手机','华为电脑','苹果手表','尼康相机'],
// 搜索关键字
keywords:'',
// 搜索结果
content:''},
// methods选项，定义方法
methods:{
keydown(){
// 字符串的
includes()方法，用于检查字符串中是否包含指定的内容，包含返回truethis.content=this.goodses.find(g=>g.includes(this.keywords))}},})
2. 深度响应式
修改姓名
{{name}}
修改姓名
添加工作属性
删除年龄属性
{{obj}}
添加可乐
通过方法修改元素
通过下标修改元素
通过下标删除元素
{{arr}}
// Vue实例，在初始化的时候，会将对象身上的所有数据，做响应式处理，
// 之后再向对象中添加属性，这些属性就不再具备响应式能力了。
// 针对数组，只能通过以下方法，才能实现响应式：push() pop() unshift() shift() splice() reverse() sort()
// 如何解决上面的问题？
// 方式1：通过Vue的set方法，更新指定的对象属性或数组成员；delete方法，删除指定对象的属性或数组的成员
// 方式2：通过Vue实例的$set方法，更新指定的对象属性或数组成员；$delete方法，删除指定对象的属性或数组的成员Vue.config.productionTip=falseletvm=newVue({el:"#app",data:{// 基本类型数据name:'张三',
// 对象数据obj:{name:'张杰',age:20,sex:'男'},
// 数组数据arr:['面包','饼干','薯片','巧克力']},methods:{
// 给对象添加工作属性的方法addJob(){
// 通过观察可以发现，我们可以给对象添加属性，但是添加后的属性，不具备响应式能力。
// this.obj.job='前端开发工程师'// set方法的参数分别是：指定的对象，对象的属性，属性值
// Vue.set(this.obj,'job','前端开发工程师')this.$set(this.obj,'job','前端开发工程师')},
// 删除对象身上年龄的方法delAge(){
// delete this.obj.age
// delete烦烦烦的参数分别是：指定的对象，对象的属性
// Vue.delete(this.obj,'age')this.$delete(this.obj,'age')},
// 修改数组身上的成员updateArr(){// this.arr[1] = '苹果'
// 这里set方法的参数分别是：指定的数组，数组的下标，对应的数据this.$set(this.arr,1,'苹果')},
// 根据下标删除数组元素delArr(){
// delete this.arr[1]
// 这里的delete方法的参数分别是：指定的数组，数组的下标this.$delete(this.arr,1)}},})
3. 小练习
new Vue({el:'#app',data:{obj:{name:'吴亦凡',age:30},
// 属性名pname:'',
// 属性值val:'',
// 删除时，用的属性名pname2:''},
methods:{
addProtory(){
this.$set(this.obj,this.pname,this.val)},
delProtory(){this.$delete(this.obj,this.pname2)}},})
4. 购物车
全选
商品名称 商品图片
商品单价 购买数量
小计
操作
{{item.name}}
¥{{item.price | toFixed2}}
-
+
¥{{item.price*item.count | toFixed2}}
删除
总计：¥{{totalPrice | toFixed2}}
${{totalPrice | toUS | toFixed2}}
您的购物车空空如也
new Vue({
el:"#app",
// 数据
data:{
// 商品数组
goodses:[{
// 商品编号id:'1001',
// 商品名称name:'小米手机',
// 商品图片img:'https://img.alicdn.com/bao/uploaded/i3/2279837698/O1CN01gkdsUP26jjYlI8HCS_!!2279837698.jpg',
// 商品单价price:1999,
// 购买数量count:3,
// 是否选中isck:false},
{id:'1002',name:'西门子冰箱',img:'https://img.alicdn.com/bao/uploaded/i4/2347095319/O1CN01xhxce31pA9MmYjHPc_!!2347095319.jpg',price:3999,count:2,isck:true},
{id:'1003',name:'索尼电视',img:'https://img.alicdn.com/bao/uploaded/i1/782731205/O1CN01o18KOx1KlvvaEIosx_!!0-item_pic.jpg',price:4999,count:1,isck:true},
{id:'1004',name:'联想电脑',img:'https://img.alicdn.com/bao/uploaded/i2/459462135/O1CN01yN7bD91RdsIyoddVW_!!459462135.jpg',price:5999,count:4,isck:false}]},
// 方法
methods:{
delGoods(index){if(confirm('是否确定删除？')){this.goodses.splice(index,1)}}},
// 计算属性
computed:{
// 表示是否全选
isckAll:{
// 返回结果
get(){
// 商品数组中所有的商品的状态为true时，返回truereturnthis.goodses.length>0&&this.goodses.every(g=>g.isck)},
// 修改结果
set(val){
// 循环所有的商品，设置所有商品的状态为最新的全选状态
this.goodses.forEach(g=>{g.isck=val});}},
// 表示总价totalPrice(){
/* let total = 0
for(let i=0;i
if(this.goodses[i].isck){
total += this.goodses[i].count * this.goodses[i].price
}
}
return total */lettotal=0this.goodses.forEach(g=>{if(g.isck){total+=g.price*g.count}})returntotal/*
return this.goodses.filter(g=>g.isck).map(g=>g.price*g.count).reduce((c,g)=>{
return c + g
},0) */
}},
// 过滤器
filters:{
// 数字保留两位小数
toFixed2(val){returnval.toFixed(2)},
// 转美金的方法
toUS(val){returnval/6.444}},
// 监听器
watch:{
// 监听totalPrice计算属性的值的变化
totalPrice(val){if(val>100000){alert('您确定消费的起吗？请理性消费！')}}}})
六、项目案例--课程管理
编号 名称 课时 年级 操作
{{item.SubjectId}} {{item.SubjectName}}
{{item.ClassHour}} {{item.Grade.GradeName}} 修改
删除
首页
上一页
{{pageIndex}}
/ {{totalPage}} 下一页尾页
显示数量:
5 10 15
20
课程课时：
所属年级：
请选择年级
{{item.GradeName}}
new Vue({
el:"#app",
// 定义属性
data:{
// 课程数组
subjects:[],
// 总数量count:0,
// 定义搜索关键字keywords:'',
// 定义每页显示数量pageSize:5,
// 定义当前页码pageIndex:1,
// 定义课程对象，用于添加和修改操作subject:{subjectId:'',subjectName:'',classHour:'',gradeId:'0'},
// 定义一个年级数组grades:[]},
// 定义方法methods:{
// 获取年级信息的方法
asyncgetGrades(){let{data}=awaitaxios.get('http://www.bingjs.com:81/Grade/GetAll')this.grades=data},// 获取课程信息的方法asyncgetSubjects(){
// 发送请求，获取课时信息l
et{data:{data,count}}=awaitaxios.get('http://www.bingjs.com:81/Subject/GetSubjectsConditionPages',{params:{
// 课程名称subjectName:this.keywords,
// 每页显示数量pageSize:this.pageSize,
// 当前页码pageIndex:this.pageIndex}})
// 获取课程数组this.subjects=data
// 获取总数量this.count=count},
// 清空课程信息的方法
clear(){
// 清空数据
this.subject={subjectId:'',subjectName:'',classHour:'',gradeId:'0'}},
// 添加课程的方法
asyncadd(){
// 添加前先做非空验证
if(this.subject.subjectName===''){returnalert('请输入课程名称')}elseif(this.subject.classHour===''){returnalert('请输入课时')}elseif(this.subject.gradeId==='0'){returnalert('请选择所属年级')}
// 发送请求，执行添加
let{data}=awaitaxios.post('http://www.bingjs.com:81/Subject/Add',this.subject)
// 返回true，表示添加成功
if(data){alert('添加成功！')
// 添加成功后，重新调用查询方法this.getSubjects()
// 清空数据this.clear()}else{alert('添加失败！')}},
// 根据课程编号查询课程信息asyncgetOne(subjectId){
// 根据课程编号，发送请求，获取对应的课程信息let{data}=awaitaxios.get('http://www.bingjs.com:81/Subject/GetSubjectById',{params:{subjectId}})
// 获取课程信息
this.subject={subjectId:data.SubjectId,subjectName:data.SubjectName,classHour:data.ClassHour,gradeId:data.GradeId}},
// 修改课程的方法asyncupdate(){
// 修改前先做非空验证if(this.subject.subjectName===''){returnalert('请输入课程名称')}elseif(this.subject.classHour===''){returnalert('请输入课时')}elseif(this.subject.gradeId==='0'){returnalert('请选择所属年级')}
// 发送请求，执行修改let{data}=awaitaxios.post('http://www.bingjs.com:81/Subject/Update',this.subject)
// 返回true，表示修改成功if(data){alert('修改成功！')
// 修改成功后，重新调用查询方法this.getSubjects()
// 清空数据this.clear()}else{alert('修改失败！')}},
// 删除课程的方法asyncdel(subjectId){
// 提示是否确定删除if(confirm('是否确定删除？')){
// 发送请求，删除数据let{data}=awaitaxios.post('http://www.bingjs.com:81/Subject/Delete',{subjectId})
// 返回true，表示删除成功if(data){alert('删除成功！')
// 删除成功后，重新调用查询方法this.getSubjects()}else{alert('删除失败！')}}}},
// 计算属性computed:{
// 总页数totalPage(){
// ceil方法，向上取整returnMath.ceil(this.count/this.pageSize)}},
// 侦听器watch:{
// 侦听pageSize的值是否发生变化pageSize(){
// 侦听到每页显示数量发生变化后，重新切换回第一页this.pageIndex=1
// 重新调用获取课程信息的方法this.getSubjects()},
// 侦听pageIndex的值是否发生变化pageIndex(){
// 重新调用获取课程信息的方法this.getSubjects()}},
// 在这个生命周期函数中，发送ajax请求，获取课程数据created(){
// 调用获取课程信息的方法 this.getSubjects()
// 调用获取年级信息的方法this.getGrades()},})
