七、vue.js

作者: 飞奔的小白 | 来源:发表于2018-01-27 01:52 被阅读0次

七、vue.js
(Vue-cli)七、Vuex（state&getters&mu
Vue.js动态组件解析
【MAC 上学习 Vue】Day 1. 创建 Hello Wor
Vue 循环、点击、双向绑定
Vue.js入门
Vue起步
MAC上学习Vue---Day1. 创建Hello World
一.Vue.js起步
Vue.js 第一天

百度搜索列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/vue-resource.min.js"></script>
<script type="text/javascript">
window.onload=function(){
    new Vue({
        el:'#itany',
        data:{
            keyword:'',
            myData:[],
            now:-1//当前选中项的索引
        },
        methods:{
            getData(e){
                // 如果按方向键上和下，则不发请求
                if(e.keyCode == 38 ||e.keyCode == 40){
                    return;
                }
                this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                    params:{
                        wd:this.keyword
                    },
                    jsonp:'cb'//百度使用的jsonp参数名为cb,所以需要修改
                }).then(resp => {
                    console.log(resp.data.s);
                    this.myData = resp.data.s;
                })
            },
            changeDown(){
                this.now++;
                this.keyword = this.myData[this.now];
                if(this.now == this.myData.length){
                    this.now = -1;
                }
            },
            changeUp(){
                this.now--;
                this.keyword== this.myData[this.now];
                if(this.now == -2){
                    this.now = this.myData.length-1;
                }
            }
        }
    })
}
</script>
<style type="text/css" media="screen">
.current{
    background:#ccc;
}   
</style>
</head>
<body>
<div id="itany">
    <input type="text" name="" value="" v-model="keyword" @keyup="getData(event);" @keydown.up.prevent="changeUp" @keydown.down="changeDown">
    <ul>
        <li v-for="(value,index) in myData" :class="{current:index==now}">{{value}}</li>
    </ul>
    <p v-show="myData.length==0">暂无数据</p>
</div>
</body>
</html>