Vue(二)

四、绑定事件

1. 大麦网列表页

• 城市:

{{item}}

• 分类:

{{item}}

【{{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指令的详细用法

姓名：{{name}}

地址：

{{address}}

是否同意：

{{isOK}}

爱好：

抽烟

喝酒

烫头

唱

跳

篮球     {{hobbies}}

性别：

男

女        {{sex}}

学历：

小学

硕士

博士

博士后{{xueli}}

美食：

螃蟹龙虾鸡腿牛排海鲜{{meishi}}

修饰符lazy

{{msg}}

修饰符number

{{age+10}}

修饰符trim

长度：{{city.length}}

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. 按键修饰符

搜索：

{{content}}

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. 小练习

属性名称：属性值：

v-model="val">添加

属性名称：

删除

{{obj}}

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. 购物车

总计：¥{{totalPrice | toFixed2}}

${{totalPrice | toUS | toFixed2}}

全选	商品名称	商品图片	商品单价	购买数量	小计	操作
	{{item.name}}		¥{{item.price | toFixed2}}	- +	¥{{item.price*item.count | 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('您确定消费的起吗？请理性消费！')}}}})

六、项目案例--课程管理

课程名称：

查询

---

首页

上一页

{{pageIndex}}

/{{totalPage}}下一页尾页

显示数量:

51015

20

编号	名称	课时	年级	操作
{{item.SubjectId}}	{{item.SubjectName}}	{{item.ClassHour}}	{{item.Grade.GradeName}}	修改 删除

课程名称：

课程课时：

所属年级：

请选择年级

{{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()},})