四物遇、綁定事件
1. 大麥網(wǎng)列表頁
<div id="app">
<ul class="type">
<li>城市:</li>
<li@click="cityActive=index"v-for="(item,index) in citys":class="{active:cityActive===index}">{{item}}</li></ul>
<ul class="type">
<li>分類:</li>
<li@click="typeActive=index"v-for="(item,index) in types":class="{active:typeActive===index}">{{item}}</li>
</ul>
<div class="list">
<div class="item"v-for="item in showData"><img@click="gotoDetail(item.id)":src="item.verticalPic">
<div class="content"><div class="title">【{{item.cityname}}】 {{item.name}}</div>
<div>{{item.categoryname}}</div>
<div>{{item.cityname}} | {{item.venue}}</div>
<div>{{item.showtime}}</div>
<div class="price">{{item.price_str}} 元</div>
</div>
</div>
</div>
</div>
new Vue({el:'#app',// 定義數(shù)據(jù)
data(){
return{// 城市數(shù)組
citys:['全部','成都','北京','上海','杭州','溫州','天津','上饒','深圳'],// 選中城市的高亮索引
cityActive:0,// 分類數(shù)組
types:['全部','音樂會','演唱會','話劇歌劇','展覽休閑','舞蹈芭蕾','兒童親子'],// 選中分類的高亮索引typeActive:0,// 定義一個商品數(shù)組(用于保存所有的商品信息)
resultData:[],// 定義一個商品數(shù)組(用于顯示展示的商品信息)showData:[]}},// 定義方法
methods:{// 過濾數(shù)據(jù)的方法
filterData(){// 先根據(jù)城市篩選
if(this.cityActive===0){
this.showData=this.resultData
}
else{// 根據(jù)城市進(jìn)行篩選
this.showData=this.resultData.filter(r=>r.cityname===this.citys[this.cityActive])}// 再根據(jù)分類篩選if(this.typeActive!==0){
this.showData=this.showData.filter(r=>r.categoryname===this.types[this.typeActive])}},// 跳轉(zhuǎn)到詳情頁gotoDetail(id){
// 跳轉(zhuǎn)到詳情頁window.location.href="./detail.html?id="+id}
},// 此時冤馏，我已經(jīng)可以操作數(shù)據(jù)了
created(){axios.get("./data/data.json").then(({data:{pageData:{resultData}}})=>{this.resultData=resultDatathis.showData=resultData})},// 偵聽器
watch:{// 偵聽選中的城市索引
cityActive(){this.filterData()},// 偵聽選中的分類的索引
typeActive(){this.filterData()}}})
2. 大麥網(wǎng)詳情頁
<div class="detail">
<img:src="item.verticalPic">
<div class="content">
<div class="title">【{{item.cityname}}】 {{item.name}}</div>
<div>{{item.categoryname}}</div>
<div>{{item.cityname}} | {{item.venue}}</div>
<div>{{item.showtime}}</div>
<div><span>票檔：</span><span@click="priceActive=index"class="price":class="{active:priceActive===index}"v-for="(item,index) in prices">{{item}}</span></div><div><span>數(shù)量：</span>
<button@click="count--":disabled="count===1">-</button>
<input class="text"type="text":value="count"readonly>
<button@click="count++":disabled="count===6">+</button></div>
<div><span>合計(jì)：</span><span>{{totalPrice | toFixed2}}元</span></div>
</div>
</div>
newVue({el:'.detail',data(){
return{// 商品信息
item:{},// 票檔
prices:[99,199,229,289,339],// 票檔選中的索引
priceActive:0,// 購票數(shù)量
count:1}},// 頁面掛載完畢的生命周期
mounted(){// 獲取當(dāng)前商品的id?
let id=window.location.search.split('=')[1]// 根據(jù)id請求商品信息
axios.get("./data/data.json").then(({data:{pageData:{resultData}}})=>{// 數(shù)組的find方法评抚，根據(jù)條件返回滿足條件的第一個對象肩狂。
this.item=resultData.find(r=>r.id===id)})},// 計(jì)算屬性
computed:{totalPrice(){return this.count*this.prices[this.priceActive]}},// 過濾器
filters:{toFixed2(val){return val.toFixed(2)}}})
3. v-model指令的詳細(xì)用法
<divid="app"><div class="item"><span>姓名：</span><!-- v-model指令姓建，綁定文本框的內(nèi)容缴啡，實(shí)現(xiàn)雙向數(shù)據(jù)綁定 --><input type="text"v-model="name">{{name}}</div>
<div class="item"><span>地址：</span>
<!-- v-model指令优构，綁定多行文本框的內(nèi)容琢融，實(shí)現(xiàn)雙向數(shù)據(jù)綁定 -->
<text area? cols="80"rows="4"v-model="address"></text area>{{address}}</div>
<div class="item"><span>是否同意：</span>
<!-- 單個復(fù)選框，通過v-model綁定一個布爾值 -->
<inputtype="checkbox"v-model="isOK">{{isOK}}</div>
<div class="item"><span>愛好：</span>
<!-- 多個復(fù)選框簿寂，通過v-model綁定到同一個數(shù)組 -->
<input type="checkbox"value="抽煙"v-model="hobbies">抽煙
<input type="checkbox" value="喝酒"? ? v-model="hobbies">喝酒
<input? type="checkbox" value="燙頭" v-model="hobbies">燙頭
<input type="checkbox"? value="唱"? ? v-model="hobbies">唱
<input type="checkbox"value="跳"v-model="hobbies">跳
<input type="checkbox"value="籃球"v-model="hobbies">籃球? ? ?{{hobbies}}</div>
<div class="item"><span>性別：</span>
<!-- 多個單選框漾抬，通過v-model綁定同一個數(shù)據(jù) -->
<input type="radio"value="男"name="sex"v-model="sex">男
<input type="radio"value="女"name="sex"v-model="sex">女? ? ? ? {{sex}}</div>
<div class="item"><span>學(xué)歷：</span>
<!-- 通過v-model可以給下拉框綁定一個屬性 -->
<select v-model="xueli"><option value="小學(xué)">小學(xué)</option>
<option value="碩士">碩士</option>
<option value="博士">博士</option>
<option value="博士后">博士后</option></select>{{xueli}}</div>
<div class="item"><span>美食：</span>
<!-- 下拉框設(shè)置multiple屬性后，就可以選擇多個項(xiàng) -->
<!-- 通過v-model可以給下拉框綁定一個數(shù)組 -->
<select v-model="meishi"multiple><option value="螃蟹">螃蟹</option><option value="龍蝦">龍蝦</option><option value="雞腿">雞腿</option><option value="牛排">牛排</option><option value="海鮮">海鮮</option></select>{{meishi}}</div>
<div class="item"><span>修飾符lazy</span>
<!-- v-model指令常遂，添加.lazy修飾符纳令，在文本框失去焦點(diǎn)后在更新數(shù)據(jù)? -->
<input type="text"v-model.lazy="msg">{{msg}}</div>
<div class="item"><span>修飾符number</span>
<!-- v-model指令，添加.number修飾符克胳，在修改文本框內(nèi)容時平绩，會將修改后的內(nèi)容轉(zhuǎn)為number類型 --><input type="text"v-model.number="age">{{age+10}}</div>
<div class="item"><span>修飾符trim</span>
<!-- v-model指令，添加.trim修飾符毯欣，在修改文本框內(nèi)容時馒过，會忽略前后的空格 -->
<input type="text"v-model.trim="city"><span>長度：{{city.length}}</span></div></div>
let vm=new Vue({
el:'#app',
data:{name:'張三',address:'北京市朝陽區(qū)',// 用于表示是否同意
isOK:true,// 愛好數(shù)組
hobbies:["燙頭","跳"],// 性別
sex:'女',// 學(xué)歷
xueli:'博士',// 美食
meishi:[],// 消息
msg:'',//年齡
age:20,
city:'北京'},})
4. 綁定事件
<divid="app">
<!-- v-on:指令綁定事件，可以指定一個事件方法酗钞，事件方法要在methods里面定義腹忽。
指定事件方法時，如果沒有給方法傳遞參數(shù)砚作，默認(rèn)會傳遞一個事件對象參數(shù) -->
<button v-on:click="sayHi">Say Hi</button><br><br>
<!-- 如果我們傳遞了一個參數(shù)窘奏，還想再傳遞事件對象參數(shù)，就要通過$event關(guān)鍵字設(shè)置葫录。 -->
<button v-on:click="sayHello('你好',$event)">Say Hello</button>
<br><br>
<!-- 如果事件處理的邏輯比較簡單着裹，可以直接在行內(nèi)編寫。 -->
<button v-on:click="name+='*'">修改name</button>{{name}}<hr>
<!-- @是v-on:的簡寫 --><!-- 通過.prevent事件修飾符米同，阻止默認(rèn)行為 -->
<div class="a"@click="a"@contextmenu.prevent="cm">
<!-- 通過.stop事件修飾符骇扇，阻止事件冒泡 -->
<div class="b"@click.stop="b"></div></div>
<br>
<!-- 通過.once事件修飾符，讓事件方法只執(zhí)行一次 -->
<button@click.once="once">只觸發(fā)一次</button>
<br><br>
<!-- 通過.self事件修飾符面粮，控制事件在當(dāng)前元素自身觸發(fā)少孝，不在內(nèi)部元素身上觸發(fā) -->
<div class="c"@click.self="c"><div class="d"></div></div><br>
<!-- 默認(rèn)情況下，手機(jī)的捕獲模式是熬苍，從內(nèi)部往外部挨個執(zhí)行稍走。
如果外部事件添加.capture修飾符，此時事件的不會模式就變成了柴底，從外部外內(nèi)部挨個執(zhí)行婿脸。 -->
<div class="e"@click.capture="e">
<div class="f"@click="f"></div>
</div><br>
<!-- passive就是為了告訴瀏覽器，不用查詢了柄驻，我們沒用preventDefault阻止默認(rèn)動作 -->
<div class="g"@scroll.passive="g">?
<div class="h"></div></div></div>
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(){
// 通過事件對象褪迟，阻止默認(rèn)行為
// e.preventDefault();
console.log('哈哈');},
once(){alert('你好呀冗恨！')},
c(){alert('大家好答憔！我是c')},
e(){alert('大家好味赃！我是e')},
f(){alert('大家好！我是f')},
g(){console.log(11);}},})
五虐拓、深度響應(yīng)式
1. 按鍵修飾符
<div id="app">
<p>
<label>搜索：</label>
<!-- Vue針對鍵盤事件心俗，提供了按鍵修飾符
? ? ? ? 一共有9個按鍵修飾符，分別是：
? ? ? ? .enter 是回車鍵
? ? ? ? .tab 是tab鍵
? ? ? ? .delete 是刪除鍵和退格鍵
? ? ? ? .esc 是退出鍵
? ? ? ? .space 是空格鍵
? ? ? ? .up 是上箭頭
? ? ? ? .down 是下箭頭
? ? ? ? .left 是左箭頭
? ? ? ? .right 是右箭頭
? ? ? ? -->
<input type="text"v-model="keywords"@keyup.enter="keydown">
<!-- 按鍵修飾符蓉驹，也可以用按鍵碼代替城榛，注意：Vue3中取消了按鍵碼 -->
<!-- <input type="text" v-model="keywords" @keyup.13="keydown"> -->
</p>
<p>{{content}}</p>
</div>
new Vue({
el:'#app',
// data選項(xiàng)，定義屬性态兴，該選項(xiàng)可以是一個對象狠持，也可以是一個方法返回一個對象。
data:{
// 商品數(shù)組
goodses:['小米手機(jī)','華為電腦','蘋果手表','尼康相機(jī)'],
// 搜索關(guān)鍵字
keywords:'',
// 搜索結(jié)果
content:''},
// methods選項(xiàng)瞻润，定義方法
methods:{
keydown(){
// 字符串的
includes()方法喘垂，用于檢查字符串中是否包含指定的內(nèi)容，包含返回truethis.content=this.goodses.find(g=>g.includes(this.keywords))}},})
2. 深度響應(yīng)式
<div id="app">
<button@click="name='李四'">修改姓名</button>
<h2>{{name}}</h2>
<hr>
<button@click="obj.name='張飛'">修改姓名</button>
<button@click="addJob">添加工作屬性</button>
<button@click="delAge">刪除年齡屬性</button>
<h2>{{obj}}</h2>
<hr>
<button@click="arr.push('可樂')">添加可樂</button>
<button@click="arr.splice(1,1,'榴蓮')">通過方法修改元素</button>
<button@click="updateArr">通過下標(biāo)修改元素</button>
<button@click="delArr">通過下標(biāo)刪除元素</button>
<h2>{{arr}}</h2>
</div>
// Vue實(shí)例绍撞，在初始化的時候正勒，會將對象身上的所有數(shù)據(jù)，做響應(yīng)式處理傻铣，
// 之后再向?qū)ο笾刑砑訉傩哉抡辏@些屬性就不再具備響應(yīng)式能力了。
// 針對數(shù)組非洲，只能通過以下方法鸭限，才能實(shí)現(xiàn)響應(yīng)式：push() pop() unshift() shift() splice() reverse() sort()
// 如何解決上面的問題？
// 方式1：通過Vue的set方法两踏，更新指定的對象屬性或數(shù)組成員败京；delete方法，刪除指定對象的屬性或數(shù)組的成員
// 方式2：通過Vue實(shí)例的$set方法缆瓣，更新指定的對象屬性或數(shù)組成員喧枷；$delete方法，刪除指定對象的屬性或數(shù)組的成員Vue.config.productionTip=falseletvm=newVue({el:"#app",data:{// 基本類型數(shù)據(jù)name:'張三',
// 對象數(shù)據(jù)obj:{name:'張杰',age:20,sex:'男'},
// 數(shù)組數(shù)據(jù)arr:['面包','餅干','薯片','巧克力']},methods:{
// 給對象添加工作屬性的方法addJob(){
// 通過觀察可以發(fā)現(xiàn)弓坞，我們可以給對象添加屬性隧甚，但是添加后的屬性，不具備響應(yīng)式能力渡冻。
// this.obj.job='前端開發(fā)工程師'// set方法的參數(shù)分別是：指定的對象戚扳，對象的屬性，屬性值
// Vue.set(this.obj,'job','前端開發(fā)工程師')this.$set(this.obj,'job','前端開發(fā)工程師')},
// 刪除對象身上年齡的方法delAge(){
// delete this.obj.age
// delete煩煩煩的參數(shù)分別是：指定的對象族吻，對象的屬性
// Vue.delete(this.obj,'age')this.$delete(this.obj,'age')},
// 修改數(shù)組身上的成員updateArr(){// this.arr[1] = '蘋果'
// 這里set方法的參數(shù)分別是：指定的數(shù)組帽借，數(shù)組的下標(biāo)珠增，對應(yīng)的數(shù)據(jù)this.$set(this.arr,1,'蘋果')},
// 根據(jù)下標(biāo)刪除數(shù)組元素delArr(){
// delete this.arr[1]
// 這里的delete方法的參數(shù)分別是：指定的數(shù)組，數(shù)組的下標(biāo)this.$delete(this.arr,1)}},})
3. 小練習(xí)
<div id="app"><p>屬性名稱：<input type="text" v-model="pname">屬性值：<input type="text"??
v-model="val"><button@click="addProtory">添加</button></p>
<p>屬性名稱：<input type="text" v-model="pname2">
<button@click="delProtory">刪除</button></p>
<div>{{obj}}</div></div>
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. 購物車
<div id="app">
<!-- 如果數(shù)組中有數(shù)據(jù)蒂教，顯示購物車 -->
<table v-if="goodses.length>0">
<tr>
<th><inputtype="checkbox"v-model="isckAll">全選</th>
<th>商品名稱</th><th>商品圖片</th>
<th>商品單價</th><th>購買數(shù)量</th>
<th>小計(jì)</th>
<th>操作</th></tr>
<tr v-for="(item,index) in goodses":key="item.id"><td>
<input type="checkbox" v-model="item.isck"></td>
<td>{{item.name}}</td><td><img:src="item.img"></td>
<td>￥{{item.price | toFixed2}}</td>
<td>
<!-- :disabled綁定的值為true，按鈕禁用 -->
<button@click="item.count--":disabled="item.count===1">-</button>
<input readonlytype="text":value="item.count"><button@click="item.count++":disabled="item.count===10">+</button>
</td><td>￥{{item.price*item.count | toFixed2}}</td>
<td><button@click="delGoods(index)">刪除</button></td></tr>
<tr><tdcolspan="7"class="totalPrice"><span>總計(jì)：￥{{totalPrice | toFixed2}}</span>
<!-- 過濾器可以鏈?zhǔn)秸{(diào)用 -->
<span style="color:red;">${{totalPrice | toUS | toFixed2}}</span></td></tr></table>
<!-- 否則顯示下面的div -->
<div class="empty" v-else>您的購物車空空如也</div></div>
new Vue({
el:"#app",
// 數(shù)據(jù)
data:{
// 商品數(shù)組
goodses:[{
// 商品編號id:'1001',
// 商品名稱name:'小米手機(jī)',
// 商品圖片img:'https://img.alicdn.com/bao/uploaded/i3/2279837698/O1CN01gkdsUP26jjYlI8HCS_!!2279837698.jpg',
// 商品單價price:1999,
// 購買數(shù)量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:'聯(lián)想電腦',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)}}},
// 計(jì)算屬性
computed:{
// 表示是否全選
isckAll:{
// 返回結(jié)果
get(){
// 商品數(shù)組中所有的商品的狀態(tài)為true時凝垛，返回truereturnthis.goodses.length>0&&this.goodses.every(g=>g.isck)},
// 修改結(jié)果?
set(val){
// 循環(huán)所有的商品，設(shè)置所有商品的狀態(tài)為最新的全選狀態(tài)
this.goodses.forEach(g=>{g.isck=val});}},
// 表示總價totalPrice(){
/* let total = 0
? ? ? ? ? ? ? ? ? ? for(let i=0;i<this.goodses.length;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:{
// 數(shù)字保留兩位小數(shù)
toFixed2(val){returnval.toFixed(2)},
// 轉(zhuǎn)美金的方法
toUS(val){returnval/6.444}},
// 監(jiān)聽器
watch:{
// 監(jiān)聽totalPrice計(jì)算屬性的值的變化
totalPrice(val){if(val>100000){alert('您確定消費(fèi)的起嗎蜓谋？請理性消費(fèi)梦皮！')}}}})
六、項(xiàng)目案例--課程管理
<div id="app"><div><span>課程名稱：</span>
<!-- 文本框跟屬性是雙向綁定 -->
<input type="text" v-model="keywords">
<button@click="getSubjects">查詢</button>
</div><hr>
<div class="main">
<table>
<thead>
<tr>
<th>編號</th><th>名稱</th><th>課時</th><th>年級</th><th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in subjects":key="index"><td>{{item.SubjectId}}</td><td>{{item.SubjectName}}</td>
<td>{{item.ClassHour}}</td><td>{{item.Grade.GradeName}}</td><td><button@click="getOne(item.SubjectId)">修改</button>
<button@click="del(item.SubjectId)">刪除</button>
</td></tr></tbody><tfoot><tr><tdcolspan="5">
<!-- 當(dāng)事件處理的代碼比較簡單時桃焕，直接將邏輯寫到行內(nèi) --><button@click="pageIndex=1":disabled="pageIndex===1">首頁</button>
<button@click="pageIndex--":disabled="pageIndex===1">上一頁</button>
<span>{{pageIndex}}</span>
<span>/</span><span>{{totalPage}}</span><button@click="pageIndex++":disabled="pageIndex===totalPage">下一頁</button><button@click="pageIndex=totalPage":disabled="pageIndex===totalPage">尾頁</button>
<span>顯示數(shù)量:</span><select v-model="pageSize">
<option value="5">5</option><option value="10">10</option><option value="15">15</option>
<option value="20">20</option></select></td></tr></t foot></table>
<div class="edit">
<div>課程名稱：
<input type="text"v-model="subject.subjectName">
</div>
<div>課程課時：<input type="text"v-model="subject.classHour"></div><div>所屬年級：
<select v-model="subject.gradeId"><option value="0">請選擇年級</option>
<option v-for="(item,index) in grades":key="index":value="item.GradeId">{{item.GradeName}}</option></select></div><div>
<!-- 判斷subject對象的subjectId屬性剑肯，如果是空，就做添加观堂；否則做修改让网。 -->
<button@click="add"v-if="subject.subjectId===''">添加</button>
<button@click="update"v-else>修改</button>
<button@click="clear">取消</button>
</div></div>
</div></div>
new Vue({
el:"#app",
// 定義屬性
data:{
// 課程數(shù)組
subjects:[],
// 總數(shù)量count:0,
// 定義搜索關(guān)鍵字keywords:'',
// 定義每頁顯示數(shù)量pageSize:5,
// 定義當(dāng)前頁碼pageIndex:1,
// 定義課程對象，用于添加和修改操作subject:{subjectId:'',subjectName:'',classHour:'',gradeId:'0'},
// 定義一個年級數(shù)組grades:[]},
// 定義方法methods:{
// 獲取年級信息的方法
asyncgetGrades(){let{data}=awaitaxios.get('http://www.bingjs.com:81/Grade/GetAll')this.grades=data},// 獲取課程信息的方法asyncgetSubjects(){
// 發(fā)送請求型将，獲取課時信息l
et{data:{data,count}}=awaitaxios.get('http://www.bingjs.com:81/Subject/GetSubjectsConditionPages',{params:{
// 課程名稱subjectName:this.keywords,
// 每頁顯示數(shù)量pageSize:this.pageSize,
// 當(dāng)前頁碼pageIndex:this.pageIndex}})
// 獲取課程數(shù)組this.subjects=data
// 獲取總數(shù)量this.count=count},
// 清空課程信息的方法
clear(){
// 清空數(shù)據(jù)
this.subject={subjectId:'',subjectName:'',classHour:'',gradeId:'0'}},
// 添加課程的方法
asyncadd(){
// 添加前先做非空驗(yàn)證
if(this.subject.subjectName===''){returnalert('請輸入課程名稱')}elseif(this.subject.classHour===''){returnalert('請輸入課時')}elseif(this.subject.gradeId==='0'){returnalert('請選擇所屬年級')}
// 發(fā)送請求寂祥，執(zhí)行添加
let{data}=awaitaxios.post('http://www.bingjs.com:81/Subject/Add',this.subject)
// 返回true，表示添加成功
if(data){alert('添加成功七兜！')
// 添加成功后丸凭，重新調(diào)用查詢方法this.getSubjects()
// 清空數(shù)據(jù)this.clear()}else{alert('添加失敗腕铸！')}},
// 根據(jù)課程編號查詢課程信息asyncgetOne(subjectId){
// 根據(jù)課程編號惜犀，發(fā)送請求，獲取對應(yīng)的課程信息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(){
// 修改前先做非空驗(yàn)證if(this.subject.subjectName===''){returnalert('請輸入課程名稱')}elseif(this.subject.classHour===''){returnalert('請輸入課時')}elseif(this.subject.gradeId==='0'){returnalert('請選擇所屬年級')}
// 發(fā)送請求狠裹，執(zhí)行修改let{data}=awaitaxios.post('http://www.bingjs.com:81/Subject/Update',this.subject)
// 返回true虽界，表示修改成功if(data){alert('修改成功！')
// 修改成功后涛菠，重新調(diào)用查詢方法this.getSubjects()
// 清空數(shù)據(jù)this.clear()}else{alert('修改失斃蛴！')}},
// 刪除課程的方法asyncdel(subjectId){
// 提示是否確定刪除if(confirm('是否確定刪除俗冻？')){
// 發(fā)送請求礁叔，刪除數(shù)據(jù)let{data}=awaitaxios.post('http://www.bingjs.com:81/Subject/Delete',{subjectId})
// 返回true，表示刪除成功if(data){alert('刪除成功迄薄！')
// 刪除成功后琅关，重新調(diào)用查詢方法this.getSubjects()}else{alert('刪除失敗讥蔽！')}}}},
// 計(jì)算屬性computed:{
// 總頁數(shù)totalPage(){
// ceil方法涣易，向上取整returnMath.ceil(this.count/this.pageSize)}},
// 偵聽器watch:{
// 偵聽pageSize的值是否發(fā)生變化pageSize(){
// 偵聽到每頁顯示數(shù)量發(fā)生變化后画机，重新切換回第一頁this.pageIndex=1
// 重新調(diào)用獲取課程信息的方法this.getSubjects()},
// 偵聽pageIndex的值是否發(fā)生變化pageIndex(){
// 重新調(diào)用獲取課程信息的方法this.getSubjects()}},
// 在這個生命周期函數(shù)中，發(fā)送ajax請求新症，獲取課程數(shù)據(jù)created(){
// 調(diào)用獲取課程信息的方法 this.getSubjects()
// 調(diào)用獲取年級信息的方法this.getGrades()},})
