php做购物网站怎么样,苏州园区做网站公司,简易的旅游网页制作,嘉兴seo排名外包简述
学习vue的第二节#xff0c;由于2.0版本并不向下兼容#xff0c;视频中的不少内不能实现。下面列出一些主要知识点 // v-on 可简写为
// 事件冒泡是指当点击div内部的button触发show1()时#xff0c;必然会冒泡到div上执行show2()#xff0c;这才层级div中很常见
// …简述
学习vue的第二节由于2.0版本并不向下兼容视频中的不少内不能实现。下面列出一些主要知识点 // v-on 可简写为
// 事件冒泡是指当点击div内部的button触发show1()时必然会冒泡到div上执行show2()这才层级div中很常见
// 阻止冒泡原生js法设置事件对象的cancelBubble属性为true
// vue方法click.stop// 阻止默认行为原生js法设置事件对象的preventDefault属性为true
// vue方法contextmenu.prevent// 键盘事件获取键码原生js法使用事件对象的keyCode属性
// vue方法keyup.键码或键名,如获取按下回车keydown.13 或 keydown.enter// 绑定属性v-bind:src简写 :src 只绑定一次使用v-once将绑定内容转义成html使用v-html基本知识
vue
$http.jsonp().then()
:class
keyup
keydown配置库文件 script srclib\vue.js/script!-- vue本身不支持数据交互必须引入vue-resource.js现在vue官方也推荐axios.js--script srclib\vue-resource.js/scriptScript
scriptwindow.onload function() {new Vue({el: #box,data: {myData: [],content: ,now: -1,},methods: {get: function(ev) {// 这里的键码只能通过事件对象$event传进来因为输入大多数键都应该可以进行搜素我们要排除的就是up(38)和down(40)if (ev.keyCode 38 || ev.keyCode 40) {return;}// 这里当按下的键是Enter时应实现搜索跳转功能if(ev.keyCode 13) {window.open(https://www.baidu.com/s?wd this.content);this.content ;}this.$http.jsonp(https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd this.content, {jsonp: cb}).then(function(res) {this.myData res.data.s;}, function() {alert(搜索失败);})},changeDown: function() {this.now;if(this.now this.myData.length) {this.now -1;}// 这里实现输入框中也显示同样的内容this.content this.myData[this.now];},changeUp: function() {this.now--;if (this.now -2) {this.now this.myData.length;}this.content this.myData[this.now];}},})}/script三个方法get()用于对百度进行数据交互cheangeDown()用于实现选中区域下移changeUp()用于实现选中区域上移
HTML
bodydiv idboxinput typetext name id v-modelcontent keyupget($event) keydown.downchangeDown() keydown.upchangeUp()ul!-- 这里注意给class添加属性的时候采用的是{属性:true/false}的形式 --li v-for(item, index) in myData :class{grey: indexnow}{{item}}/li/ulp v-showmyData.length 0暂无数据.../p/div
/body效果
