資訊專欄INFORMATION COLUMN
這次用vue做的是百度下拉菜單，知識(shí)總結(jié)
1、事件:事件都是通過(guò)v-on:綁定，簡(jiǎn)寫就是@
2、屬性:都是通過(guò)v-bind:綁定，除了style和class，簡(jiǎn)寫就是用冒號(hào) ：，class和style有點(diǎn)不同:說(shuō)白了就是class里面可以扔數(shù)組也可以扔json
3、阻止冒泡: @click.stop＝"show()"
4、阻止默認(rèn)行為:@contextmenu.prevent contextmenu也是一個(gè)事件：右擊菜單
5、鍵盤事件
@keydown $event ev.keyCode
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
分別將get、post、jsonp三種方式簡(jiǎn)單雛形寫下來(lái)參考：
get方式獲取一個(gè)普通文本數(shù)據(jù):
this.$http.get("aa.txt").then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
get方式給服務(wù)發(fā)送數(shù)據(jù):√
this.$http.get("get.php",{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post方式:
this.$http.post("post.php",{
a:1,
b:20
},{
emulateJSON:true//需要加上這段數(shù)據(jù)才能把json數(shù)據(jù)加載上去
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp方式:
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
wd:"a"
},{
jsonp:"cb" //callback名字，默認(rèn)名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
如圖：
分析：
原理：
通過(guò)input里面的tvalue值傳到j(luò)sonp里面查數(shù)據(jù)，查完數(shù)據(jù)通過(guò)回調(diào)函數(shù)存在mydata里面，mydata通過(guò)循環(huán)遍歷顯示在頁(yè)面上
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
1、這次用的是百度的js文件鏈接 如果jsonp傳的不是callback就還需要聲明一下，如：jsonp:"cb"
在輸入框中輸入數(shù)據(jù)通過(guò)get方法獲取文件找到要查詢的數(shù)據(jù)如下，this.tvalue就是輸入框中的數(shù)據(jù)，取到數(shù)據(jù)成功返回第一個(gè)function，并將數(shù)據(jù)存在數(shù)組中。
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
{
wd:this.tvalue
},{
jsonp:"cb"
}).then(function (res) {
this.mydata=res.data.s;
},function (res) {
alert("取數(shù)據(jù)失敗");
})
2、通過(guò)鍵盤事件給當(dāng)前l(fā)i添加類讓當(dāng)前行高亮，這里面也是通過(guò)設(shè)定一個(gè)變量，讓noIndex自增自減，添加orange類的條件是當(dāng)前下標(biāo)＝當(dāng)前變量
:class={orange:$index==noIndex}
3、讓高亮行的數(shù)據(jù)顯示在input里面
this.tvalue=this.mydata[this.noIndex]; 寫在new Vue里面的變量都需要在用的時(shí)候加this，寫在結(jié)構(gòu)的直接寫變量
4、因?yàn)樵邳c(diǎn)擊上下鍵跳動(dòng)的時(shí)候不用在獲取數(shù)據(jù)，所以在get()中將上鍵38下鍵40（數(shù)字是所在鍵的e.keyCode的值）判斷一下，如果是就return，點(diǎn)擊enter－keyCode=13，讓它直接搜索到當(dāng)前內(nèi)容，搜索百度的地址是這樣的
https://www.baidu.com/s?wd=
if(ev.keyCode==38||ev.keyCode==40)return;
if(ev.keyCode==13){
window.open("https://www.baidu.com/s？wd="+this.tvalue);
this.tvalue="";
}
結(jié)構(gòu)：
- {{item}}
暫時(shí)無(wú)數(shù)據(jù)。。。
凡是用到交互，都得引入
**該寫vue中vm了**
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/81798.html
摘要：公司倒閉年多了，而我在公司倒閉時(shí)候做的開源項(xiàng)目，最近卻上了，看著這個(gè)數(shù)據(jù)，真是不勝唏噓。緣起年月份的時(shí)候，松哥所在的公司因?yàn)榻?jīng)營(yíng)不善要關(guān)門了，關(guān)門的是深圳分公司，北京總部還在正常運(yùn)轉(zhuǎn)。 公司倒閉 1 年多了，而我在公司倒閉時(shí)候做的開源項(xiàng)目，最近卻上了 GitHub Trending，看著這個(gè)數(shù)據(jù)，真是不勝唏噓。 緣起 2017 年 11 月份的時(shí)候，松哥所在的公司因?yàn)榻?jīng)營(yíng)不善要關(guān)門了...
摘要：職業(yè)生涯，離開校門自己的第一份工作，每天上下班都騎自行車，下雨也是，只為省點(diǎn)車費(fèi)。，屬于外包行業(yè)。雖然互聯(lián)網(wǎng)行業(yè)加班是正常的。至今，面試流程技術(shù)復(fù)試，心中暗喜。但是，我毫無(wú)畏懼。 學(xué)校 -> 實(shí)習(xí) -> 畢業(yè)，前端——我一直在路上 就要畢業(yè)了，從學(xué)校到實(shí)習(xí)直至畢業(yè)，一路走來(lái)，酸甜苦辣，記錄這段時(shí)間的點(diǎn)滴，以后在回味肯定另有一番風(fēng)情！ 感悟 2017/5-2018-7是非常特別的時(shí)光，見...
原文博客 閑扯 很久以前，自己擁有一個(gè)用hexo搭建的靜態(tài)博客網(wǎng)站:ox:，記得當(dāng)時(shí)為了把它搞出來(lái)，廢了不少勁:anger:，然后后來(lái)又?jǐn)鄶嗬m(xù)續(xù)更改過(guò)一些配置和樣式，但是因?yàn)楦杏X(jué)各種麻煩，所以就放在github上積累和很多的塵土:cupid:，到現(xiàn)在也懶得在打掃了（其實(shí)是好久不用，有點(diǎn)忘了怎么用了:-1::poop:），前段時(shí)間在百度統(tǒng)計(jì)上看了看那個(gè)靜態(tài)網(wǎng)站的訪問(wèn)人數(shù)，發(fā)現(xiàn)已經(jīng)很久很久沒(méi)人訪問(wèn)過(guò)了...
閱讀 1760·2023-04-26 00:20
閱讀 1804·2021-11-08 13:21
閱讀 1930·2021-09-10 10:51
閱讀 1557·2021-09-10 10:50
閱讀 3249·2019-08-30 15:54
閱讀 2131·2019-08-30 14:22
閱讀 1429·2019-08-29 16:10
閱讀 3089·2019-08-26 11:50
