Sketch
Learning the second section of vue, because version 2.0 is not downward compatible, many of the video can not be implemented. Here are some main knowledge points
//v-on can be abbreviated as@ //Event bubbling means that when you click the button inside the div to trigger show1(), it will inevitably bubble to the div to execute show2(), which is very common in hierarchical Div //Prevent bubbling, native js method, set the cancelBubble property of event object to true //vue method @ click.stop //Prevent default behavior, native js method, set the event object's preventDefault property to true //vue method @ contextmenu.prevent //Keyboard event obtaining key code, native js method, using keyCode attribute of event object //vue method @ keyup. Key code or key name, for example, press enter @ keydown.13 or @ keydown.enter //Binding attribute v-bind:src, short: src only binds once to use v-once, and escapes the binding content to HTML to use v-html
Basic knowledge:
vue
$http.jsonp().then()
:class
@keyup
@keydownConfiguration library file
<script src="lib\vue.js"></script>
<! -- vue itself does not support data interaction. vue-resource.js must be introduced. Now vue officially recommends axios.js -- >
<script src="lib\vue-resource.js"></script>Script
<script>
window.onload = function () {
new Vue({
el: '#box',
data: {
myData: [],
t1: '',
now: -1,
},
methods: {
get: function(ev) {
if (ev.keyCode == 38 || ev.keyCode == 40) {
return;
}
if (ev.keyCode == 13) {
window.open('https://www.baidu.com/s?wd=' + this.t1);
this.t1 = '';
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.t1, {
jsonp: 'cb'
}).then(function(res) {
this.myData = res.data.s;
}, function() {
alert("shibai");
})
},
changeDown: function() {
this.now++;
if (this.now == this.myData.length) {
this.now = -1;
}
this.t1 = this.myData[this.now];
},
changeUp: function() {
this.now--;
if (this.now == -2) {
this.now = this.myData.length;
}
this.t1 = this.myData[this.now];
}
}
})
}
</script>Three methods: get() is used for data interaction with Baidu; cheangeDown() is used to move down the selected area; changeUp() is used to move up the selected area
html
<body>
<div id="box">
<input type="text" name="" id="" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
<ul>
<li v-for="(value, index) in myData" :class="{gray:index==now}">
{{value}}
</li>
</ul>
<p v-show="myData.length == 0">No data...</p>
</div>
</body>Effect
