目录
- 什么是Vue?
- 常用指令
- 事件
- 属性
- class和style
- 过滤器
- 数据交互
1. 什么是Vue?
vue是一个mvvm框架(库)，它和angular类似，但相对比较容易上手、小巧。具体详情可以查阅vue官网
//vue雏形 el绑定元素，可以理解是angular的controll层，data放初始化数据。
//vm实例是全局，可能通过类似vm.$el/vm.$data来获取它的属性
//js
window.onload=function(){
//第一种方式，利用el来绑定
var vm=new Vue({
el:'#box',
data:{
msg:'welcome vue'
}
});
//第二种方式，利用$mount来挂载
var vm=new Vue({
data:{
msg:'welcome vue'
}
}).$mount('#box'); // 手动挂载 vm.$mount('#box');
};
//html
<div id="box">
{{msg}}
</div>
2. 常用指令
2.1 v-model 一般表单元素(input) 双向绑定，可显示文本/数组/对象，但对象会直接显示成[object Object]。
注意正常绑定模型是使用{{msg}}，如果接口返回过慢，可能会导致闪烁会先显示出大括号。为了避免这种情况可以用1、属性v-text="msg"等价于{{msg}}，2、增加个自定义属性v-cloak，把显示区域设为display:none。
其次它有{{msg}}和{{{msg}}}的用法
1、如果是加多一个号，使用{{*msg}}代表只绑定赋值一次，后来模型怎么变也不我的事
2、如果在最外层包多一层大括号，代表html转意输出。 可以这么理解{{msg}}绑定的是像jQuery的text()，而{{{msg}}}绑定的是像jQuery的html()，属性v-html="msg"等价于{{{msg}}}
<input type="text" v-model="msg">
<input type="text" v-model="msg">
<br>
{{msg}}
<br>
{{*msg}}
<br>
{{{msg}}}
2.2 v-for 主要用做循环数组和JSON对象，数组v-for="name in arr"和对象v-for="name in json"都有{{$index}}，对象v-for="(k,v) in json"有{{$key}}。
//js
window.onload=function(){
new Vue({
el:'#box',
data:{
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
});
};
//html
<div id="box">
<ul>
<li v-for="value in arr">
{{value}} {{$index}}
</li>
</ul>
<hr>
<ul>
<li v-for="value in json">
{{value}} {{$index}} {{$key}}
</li>
</ul>
<hr>
<ul>
<li v-for="(k,v) in json">
{{k}} {{v}} {{$index}} {{$key}}
</li>
</ul>
</div>
2.3 v-show="true/false" 显示与隐藏，默认dom元素不写表示true
//js
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
a:true
}
});
};
//html
<div id="box">
<input type="button" value="按钮" v-on:click="a=false">
<div style="width:100px; height:100px; background: red" v-show="a">
</div>
</div>
注意这里如果用v-for有重复数据的话，需要使用track-by="$index"，绑定不同的序号。例如
<ul>
<li v-for="val in arr" track-by="$index">
{{val}}
</li>
</ul>
自定义指令，不推荐使用元素指令，如想实现类似建议用组件的方式来。注意必须以v-开头，可以带参数
<span v-red>
asdfasd
</span>
Vue.directive('red',function(){
this.el.style.background='red';
});
//带参数
<span v-red="a">
asdfasd
</span>
Vue.directive('red',function(color){
this.el.style.background=color;
});
window.onload=function(){
var vm=new Vue({
el:'#box',
data:{
a:'blue'
}
});
};
//元素指令
<div id="box">
<zns-red>asdfasdf</zns-red>
</div>
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
3. 事件
v-on:click="函数" 这里的函数调用可以直接写函数名称，不需要写括号()；v-on可以理解为像jQuery一样用on绑定事件类型，注意事件需要写在methods里面去定义：v-on:click/mouseout/mouseover/dblclick/mousedown..... 它可以简写为@click=""推荐
//js
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){
alert(1);
}
}
});
};
//html
<div id="box">
<input type="button" value="按钮" v-on:click="show()">
</div>
事件调用可以使用$event参数，它可以当作当前target来使用，例如可以用它来阻止事件冒泡/默认行为等
1、阻止冒泡: a). ev.cancelBubble=true;b). @click.stop 推荐
2、阻止默认行为:a). ev.preventDefault(); b). @contextmenu.prevent 推荐
3、键盘值事件 例如 a). @keyup.13 b). @keyup.enter 都是回车事件
- 方向键的上、下、左、右
- @keyup/keydown.left
- @keyup/keydown.right
- @keyup/keydown.up
- @keyup/keydown.down
//冒泡事件
//js
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev){
alert(1);
ev.cancelBubble=true;
},
show1:function(){
alert(1);
},
show2:function(){
alert(2);
}
}
});
};
//html
<div id="box">
<div @click="show2()">
<input type="button" value="按钮" @click="show($event)">
<input type="button" value="按钮" @click.stop="show()">
</div>
</div>
//默认行为
//js
window.onload=function(){
new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev){
alert(1);
ev.preventDefault();
},
show:function(){
alert(1);
}
}
});
};
//html
<div id="box">
<input type="button" value="按钮" @contextmenu="show($event)">
<input type="button" value="按钮" @contextmenu.prevent="show()">
<input type="text" @keyup.enter="show()"> <!-- 你按了回车键 -->
</div>
4. 属性
vue绑定属性用v-bind: 例如v-bind:src="" ，其它width/height/title....也是。它可以简写成:src="" 推荐
//两种方式显示图片，建议用它推荐的属性绑定方式
//js
window.onload=function(){
new Vue({
el:'#box',
data:{
url:'https://www.baidu.com/img/bd_logo1.png',
w:'200px',
t:'这是一张美丽的图片'
}
});
};
//html
<div id="box">
 <!-- 效果能出来，但是会报一个vue warning警告 -->
</div>
5. class和style
class和style也是属性，所以它们绑定的方式跟前面我们讲的绑定图片src类似，例如:class=""等价于v-bind:class="" 或者:style=""等价于v-bind:style="" 。:style和:class都可以接受数组和JSON，不过需要注意的是复合样式，采用驼峰命名法。
//head :class接受数组
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
red:'red',
blue:'blue',
a:true,
b:false,
json:{
red:true,
blue:true
},
style:{
color:'red',
backgroundColor:'gray'
}
}
});
};
</script>
//html
<div id="box">
<strong :class="[red,blue]">文字...</strong>
<strong :class="{red:true,blue:true}">文字...</strong>
<strong :class="{red:a,blue:b}">文字...</strong>
<strong :class="json">文字...</strong>
<strong :style="style">文字...</strong>
</div>
6. 过滤器
过滤模板数据，系统提供一些过滤器。
a、例如capitalize/lowercase/uppercase/currency/json。 格式参考：{{msg| filterA | filterB}}或{{msg| filterA 参数}}，例如capitalize是首字母大写，lowercase是全部小写，uppercase是全部大写，currency是转换成钱单位显示，json是显示obj对象数据，而不是[object Object]
b、debounce配合事件，延迟执行，单位是毫秒
c、limitBy作用是限制显示几个，limitBy可以带参数，第一个参数代表要取几个，第二个参数代表从哪里开始，前边算或者结尾都可以，用法类似substring。注意序号是从0开始算。
d、filterBy 过滤数据，有点类似搜索引擎做的事。filterBy ‘谁’过滤条件显示对应的数据
e、orderBy 排序 orderBy 1/-1 1代表正序 -1代表倒序
f、自定义过滤器，可以带参数
<div id="box">
{{'welcome' | uppercase}}
{{'WELCOME' | lowercase}}
{{'WELCOME' | lowercase | capitalize}}
{{12 | currency}}
{{12 | currency '￥'}}
{{obj | json}}
</div>
<input type="text" @keyup="show | debounce 2000"> //代表show事件延迟两秒执行
data数据为 arr:[1,2,3,4,5]
<li v-for="val in arr | limitBy 2"> //限制默认显示两个
{{val}}
</li>
<li v-for="val in arr | limitBy 2 arr.length-2"> //限制显示从后面倒数两位的两个
{{val}}
</li>
data数据为arr:['width','height','background','orange'], a:''
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | filterBy a">
{{val}}
</li>
</ul>
<li v-for="val in arr | orderBy -1"> //倒序
{{val}}
</li>
//自定义过滤器，不带参数
<div id="box">
{{a | toDou}}
</div>
Vue.filter('toDou',function(input){
return input<10?'0'+input:''+input;
});
//自定义过滤器，带参数
<div id="box">
{{a | toDou 1 2}}
</div>
Vue.filter('toDou',function(input,a,b){
alert(a+','+b);
return input<10?'0'+input:''+input;
});
//双向过滤
<div id="box">
<input type="text" v-model="msg | filterHtml">
<br>
{{{msg}}}
</div>
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[^<]+>/g,'');
},
write:function(val){ //view -> model
console.log(val);
return val;
}
});
7. 数据交互
数据交互请求需要用到vue-resource ，this.$http有几种方式方向，例如get/post/jsonp等
<script>
window.onload=function(){
new Vue({
el:'body',
data:{
},
methods:{
get:function(){
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
},
post:function(){
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true //post需要设置请求头
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
},
getJSONP1:function(){
this.$http.jsonp('https://sug.so.360.cn/suggest',{
word:'a'
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
},
getJSONP2:function(){
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);
});
},
getPageData:function(n){
this.$http({
url:URL,
data:{
act:'get',
page:n
}
}).then(function(res){
console.log(res.data);
});
}
}
});
};
</script>
网友评论