1.vue的简介
一个简单小巧的渐进式JavaScript 框架，读作view，作者是中国人，与angular前端框架类似，是一个mvvm库
2.vue编写前端代码的基本步骤
（1）一片html代码
<div id="box">
{{msg}}
</div>
（2）一个vue对象
new Vue({
el:#box,
data:{
msg:'1'
},
methods:{
fn:function(){}
}
});
3.vue常用指令
（1）v-model:常用于表单元素，做双向绑定
例：<input type="text" v-model="msg" />
（2）循环:v-for
|
| ①遍历数组 |
|
| v-for="item in arr" |
|
| {{item}}//item代表数组中的数据值 |
|
| v-for="(item,index) in arr" |
|
| {{item}} {{index}} //其中item代表数据值，index代表数字值的索引 |
|
| ②遍历json数据 |
|
| v-for="(item,key) in json" |
|
| {{item}} {{key}} //其中key代表json数据对中的键，item代表json数据对中的数据部分 |
（3）事件：v-on:事件名
|
| ①点击事件:v-on:click |
|
| ②双击事件:v-on:dblclick |
|
| ③键盘按键按下事件：v-on:keydown |
|
| ④键盘按键抬起事件：v-on:keyup |
|
| ⑤鼠标移入，鼠标移出，鼠标经过事件等。。。。。。 |
（4）隐藏或显示：v-show="true|false"
（5）小练习：制作简易留言板（bootstrap + vue）
源码：
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
<script src="js/jquery-2.2.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"/>
<script src="js/vue.js" type="text/javascript"></script>
<script src="js/layer.js"></script>
<script type="text/javascript">
window.onload = function () {
new Vue({
el:'#box',
data:{
username:'',
password:'',
arr:[],
nowIndex:-1000,
alertInfo:''
},
methods:{
add:function () {
if (this.username.trim() == "") {
layer.alert('用户名不可为空!');
return false;
}
if(this.password.trim() == ""){
layer.alert('密码不可为空!');
return false;
}
this.arr.push({
username:this.username,
password:this.password
});
this.username = '';
this.password = '';
},
del:function () {
if(this.nowIndex == -1){
this.arr = [];
}else{
this.arr.splice(this.nowIndex,1);
}
}
}
});
}
</script>
</head>
<body>
<div id="box" class="container">
<form role="form">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" class="form-control" v-model="username">
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="text" id="password" class="form-control" v-model="password">
</div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-info btn-sm" v-on:click="add()"/>
<input type="button" value="重置" class="btn btn-danger btn-sm"/>
</div>
<hr/>
<table class="table table-bordered">
<caption class="h4 text-center text-info">用户信息表</caption>
<tr>
<th class="text-center">序号</th>
<th class="text-center">用户名</th>
<th class="text-center">密码</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center" v-for="(item,index) in arr">
<td>{{index+1}}</td>
<td>{{item.username}}</td>
<td>{{item.password}}</td>
<td>
<input type="button" value="删除" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#delModal" v-on:click="nowIndex = index; alertInfo = '确认删除吗？';"/>
</td>
</tr>
<tr v-show="arr.length == 0">
<td colspan="4" class="text-muted text-center">
暂无数据
</td>
</tr>
<tr v-show="arr.length != 0">
<td colspan="4" class="text-right">
<input type="button" class="btn btn-info btn-sm" value="删除全部" data-toggle="modal" data-target="#delModal" v-on:click="nowIndex = -1;alertInfo = '确认删除全部吗？';"/>
</td>
</tr>
</table>
</form>
<div class="modal fade" id="delModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title h4">{{alertInfo}}</div>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group text-right">
<input type="button" value="确认" class="btn btn-success btn-sm" v-on:click="del()" data-dismiss="modal"/>
<input type="button" value="取消" class="btn btn-info btn-sm" data-dismiss="modal"/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
4921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
