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