一、简介
是一个mvvm框架（库），和angular类似，小巧易上手
mvc：mvp、mvvm、mv*、mvx
MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
- vue和angular的区别：
- vue——简单、易学
指令以 v-xxx
一片html代码配合上json，在new出来vue实例
个人维护项目
适合: 移动端项目,小巧
vue的发展势头很猛，github上star数量已经超越angular - angular——上手难
指令以 ng-xxx
所有属性和方法都挂到$scope身上
angular由google维护
合适: pc端项目
共同点: 不兼容低版本IE
小例子
<script src="vue.js"></script>
<script>
window.onload = function(){
var c = new Vue ({
el:'#box',
data:{
msg:'welcome'
}
});
}
</script>
</head>
<div id="box">
{{msg}}
</div>
二、 常用指令
- v-model 一般用在表单元素
<input type="text" v-model="msg">
<input type="text" v-model="msg">
{{msg}}
<!--双向数据绑定，改变一个都改变-->
el里放的是选择器：可以是标签 id class等
- v-for vue循环
属性 {{$index}} {{$key}}
var c = new Vue ({
el:'#box',
data:{
msg:'welcome',
msg1:123,
msg2:true,
arr:['a','b','c'],
json:{a:'aaa',
b:'bbb',
c:'ccc'
}
}
});
<ul>
<li v-for="value in json">
{{value}} {{$index}}
</li>
</ul>
<hr>
<ul>
<li v-for="value in arr">
{{value}} {{$index}} {{$key}}
</li>
</ul>
<hr>
<ul>
<li v-for="(k,v) in arr">
{{k}} {{v}} {{$index}} {{$key}}
</li>
</ul>
三、事件
- v-on:click="函数"
v-on:click/mouseout/mouseover/dblclick/mousedown.....
window.onload = function(){
var c = new Vue ({
el:'#box',
data:{
msg:'welcome',
msg1:123,
msg2:true,
arr:['a','b','c'],
json:{a:'aaa',
b:'bbb',
c:'ccc'
}
},
methods:{
show:function(){
alert("啦啦啦")
},
add:function(){
this.arr.push('d')
}
} ,
});
}
</script>
<div id="box">
<button value="" v-on:click="show()">show</button>
<button value="" v-on:click="add()">add</button>
<ul>
<li v-for="value in arr">{{value}}</li>
</ul>
</div>
- 显示隐藏 : v-show=“true/false”
- v-on:click/mouseover.....
简写方法： @click=" " - 事件对象：@click="show($event)"
new Vue ({
el: '#box',
data:{
},
methods:{
add:function(aa,bb){
alert(aa.clientX);
alert(bb);
}
}
})
}
<div id="box">
<button @click="add($event,12)">按钮</button>
</div>
- 事件冒泡，阻止冒泡：
a). ev.cancelBubble=true;
b). @click.stop 推荐
methods: {
show: function () {
alert("div的");
},
showhh: function () {
alert("button的");
}
}
<div id="box">
<div id="box1" @click="show()">
<button @click.stop="showhh()">按钮</button>
</div>
</div>
- 默认行为(默认事件)，阻止默认行为:
a). ev.preventDefault();
b). @contextmenu.prevent 推荐
methods: {
show: function (ev) {
alert("1");
// ev.preventDefault();
}
}
<div id="box">
<!--<input type="button" value="按钮" @contextmenu="show($event)">-->
<input type="button" value="按钮" @contextmenu.prevent="show()">
- 键盘：
@keydown、$event、ev.keyCode、
@keyup
常用键：回车
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
methods: {
show: function (ev) {
if(ev.keyCode==13){
alert("您按回车了");
}
},
show1:function(ev){
alert(ev.keyCode);
},
show2:function(ev){
alert("您按回车了");
}
}
<div id="box">
<input type="text" @keydown="show($event)">
<input type="text" @keyup="show1($event)">
<input type="text" @keydown.13="show2($event)">
</div>
四、 属性:
v-bind:src=""
width/height/title....
简写方法 ：src=" "
<img :src="url" alt="">
<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求
五、class和style
-
:class=" "
v-bind:class=" "- :class="[red]" red是数据
- :class="[red,b,c,d]"
- :class="{red:a, blue:false}"
- :class="json"
data:{
json:{red:a, blue:false}
}
data:{
red:'red',
a:'blue',
// 后面的类名，前面是数据
json:{red:true,blue:'a'}
// 后面是数据，前面是类名
}
<div id="box">
<!--<div :class=[red,a]>div</div>-->
<!--<div :class="{red:true,blue:a}">aaa</div>-->
<div :class="json">div</div>
- :style="" v-bind:style=""
- :style="[c]"
- :style="[c,d]"
注意: 复合样式，采用驼峰命名法 - :style="json"
c:{
color:'red',
},
d:{
backgroundColor:'blue'
},
json:{
color:'red',
backgroundColor:'blue'
}
<div :style="[c]">style</div>
<div :style="[c,d]">style</div>
<div :style="json">style</div>
六、 模板
{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转意输出
data:{
msg:'abc'
}
<div id="box">
<input type="text" v-model="msg">
<br>
{{msg}}
{{*msg}}
{{{msg}}}
</div>
七、过滤器:-> 过滤模板数据
系统提供一些过滤器:
一个过滤器：{{msg| filterA}}
两个：{{msg| filterA | filterB}}
大写：uppercase eg: {{'welcome'| uppercase}}
小写：lowercase
首字母大写：capitalize
钱：currency
{{msg| filterA 参数}}
八、交互
$http （ajax）
如果vue想做交互
引入: vue-resouce
get:
获取一个普通文本数据:
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
给服务发送数据:
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post:
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp:
接口：
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
- 百度下拉列表实例：
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(){
});
},
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-1;
}
this.t1 = this.myData[this.now];
}
}
});
};
<div id="box">
<input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
<ul>
<li v-for="value in myData" :class="{gray:$index==now}">{{value}}</li>
</ul>
<p v-show="myData.length==0">暂无数据</p>
</div>
作业:
1. 简易留言-> 确认删除? 确认删除全部
2. 用vue get 写个例子 weibo
网友评论