vue.js精讲02
- 2017-09-17
笔记及源码地址 ： https://github.com/wll8/vue_note
vue 中的事件深入。
事件： @click/mouseover…
事件简写： @ 如 @clkck
属性简写: : 如 :src
传入原生事件对象： $event
-
事件冒泡：
原生 ev.cancelBubble=true;
vue .stop; -
默认事件：
原生 ev.preventDefault();
vue .prevent; -
键盘事件：
keydown 文字没出现
keyup 文字出现
键码 .13
键名 .enter -
属性：
src=”{{url}}” 废弃
:src=”url” -
class和style
class
style 复合样式驼峰命名 -
模板
数据更新，视图变化。 -
注，教程失效部分
属性： src=”{{url}}” 改为 :src=”url”
单次更新 {{*msg}} 改为 v-once
解析html {{{msg}}} 改为 v-html -
过滤器
过滤模板数据。 {{‘Hi’ | uppercase}}
uppercase 转大写
lowercase 转小写 -
注，教程失效部分
所有内置过滤器已经删除。
数据交互
vue想做数据交互，可以使用 vue-resouce。
引入 vue-resouce ，相当于在 vue 实例是挂载了一个 $http 方法。
- get
this.$http.get('url').then(function(res){
alert(res.data); // 成功
},function(err){
console.log(err); // 失败
})
注，教程失效部分：
在教程中在 $http.get(‘url’,{a:1,b:2}) 形式的参数没有传送成功。
使用 $http.get(‘url?a=1&b=2’) 可以传送成功。
- post
post 正常发送数据需要sglfemulateJSON:true参数。
this.$http.post('05.post.php',{a:1, b:2, },{
emulateJSON:true // post 需要加些参数才能把参数发送成功
}).then(function(res){
alert(res.data);
},function(err){
console.log(err)
})
- jsonp
jsonp 是 get 请求。
使用jsonp:'cb'配置回调用函数。
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a',{
jsonp:'cb' // 配置回调函数名，默认 callback
}).then(function(res){
alert(res.data.s);
},function(err){
console.log(err);
})
相关源码
05.数据交互.html
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>
<div id="box">
<button @click="f1()">get 获取文本</button>
<hr>
<button @click="f2()">get 发送参数</button>
<hr>
<button @click="f3()">post 发送参数</button>
<hr>
<button @click="f4()">jsonp 360</button>
<hr>
<button @click="f5()">jsonp 百度</button>
</div>
<script>
var vm=new Vue({
el:'#box',
methods:{
f1:function(){
this.$http.get('05.data.txt').then(function(res){
alert(res.data);
},function(err){
console.log(err);
})
},
f2:function(){
this.$http.get('05.get.php?a=1&b=2').then(function(res){
alert(res.data);
},function(err){
console.log(err)
})
},
f3:function(){
this.$http.post('05.post.php',{
a:1,
b:2,
},{
emulateJSON:true // post 需要加些参数才能把参数发送成功
}).then(function(res){
alert(res.data);
},function(err){
console.log(err)
})
},
f4:function(){
this.$http.jsonp('https://sug.so.360.cn/suggest?word=a').then(function(res){ // jsonp 走 get
alert(res.data.s);
},function(err){
console.log(err);
})
},
f5:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a',{
jsonp:'cb' // 配置回调函数名，默认 callback
}).then(function(res){
alert(res.data.s);
},function(err){
console.log(err);
})
},
}
})
</script>
06.百度搜索.html
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>
<style>
.cur{
background: #ccc;
}
</style>
<div id="box">
<input v-focus v-model="keyword" @keyup="get_data($event)" @keyup.down="keydown_fn()" @keyup.up.prevent="keyup_fn()">
<div>
<ul>
<li v-for="(item, index) in res_data" :class="{cur:cur_index == index}">{{item}}</li>
</ul>
<p v-show="res_data.length==0">暂无数据...</p>
</div>
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
keyword:'', // 用户输入的关键词
res_data:[], // 返回的结果列表
cur_index:-1, // 当前光标所在的结果上面
},
directives:{
focus:{ // 定义局部指令 v-focus
inserted:function(el){
el.focus(); // 获取焦点
}
}
},
methods:{
get_data:function(ev){
if(ev.keyCode==38 || ev.keyCode==40) return; // 上下键则不发送请求
if(ev.keyCode==13) open('https://www.baidu.com/s?wd='+this.res_data[this.cur_index]); // 回车搜索结果
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.keyword,{
jsonp:'cb'
}).then(function(res){
this.res_data=res.data.s;
},function(){})
},
keydown_fn:function(){
if(this.cur_index == this.res_data.length) this.cur_index=-1;
this.cur_index++;
this.keyword=this.res_data[this.cur_index];
},
keyup_fn:function(){
if(this.cur_index == -1) this.cur_index=this.res_data.length;
this.cur_index--;
this.keyword=this.res_data[this.cur_index];
},
}
})
</script>
