[2017.03.16]
安装vue:nmp install vue;
在页面中引入vue.js:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
入门小例子:
<body>
<div id="box">
{{msg}}
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var c = new Vue({
el:'#box', //选择器
data:{
msg:'Welcome'
}
});
};
</script>
data里的数据:
字符串,数字,数组,json,bool;
常用指令:
v-model(产生数据):
<div id="box">
<input type="text" v-model="msg">
</div>
ps:其中数据双向绑定,msg修改时同步的;
v-for(循环):(自带index)--对于json数据还带有key
要输出json数据&数组时需要循环输出:
对于数组:
arr:["apple", "pear","orange"]
<ul>
<li v-for="(value,index) in arr">
{{value}} {{index}}
</li>
</ul>
对于json:
<li v-for="(value,index,key) in json">
{{value}} {{index}} {{key}}
</li>
v-for="(k,v) in json"
{{k}} {{v}}
v-show: 隐藏消失
v-show="false"时消失;
<input type="button" value="disappear" v-on:click="showornot=true"><br>
<div v-show="showornot">
我要出现辣!
</div>
基本事件:
v-on:click --点击事件
事件方法放在methods里,methods与data同级;
一定要注意它所在的选择器要对应上才可以,否则事件设置时无效的;
<input type="button" value="show" v-on:click="show()"><br>
<input type="button" value="add" v-on:click="add()"><br>
methods:{
show:function(){
alert(1);//输出数据
},
add:function(){
this.arr.push("banana");//对该选择器下的数组进行动态添加
}
}
v-on:mouseover, mouseout, mousedown, dblclick(双击);
简易留言板(bootstrap + vue.js):
bootstrap:css框架 ---只需要给元素赋class,角色;
一些样式无需自己定义;
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
布局:
两个信息输入框,添加按钮,重置按钮,信息展示框(框内每条记录有三个字段和一个操作),有删除全部按钮;
样式:
输入框--class="form-control",placehold 底部默认提示;
组合--class="form-group";
按钮--class="btn btn-primary"(蓝色普遍按钮),class="btn btn-danger"(红色警示按钮);
表格--class="table table-bordered table-hover"(细边框,鼠标滑过每条记录时的加深效果);
表格列--colspan="4" class="text-center"(合并一列);
其他--class="text-info text-center"(字体加粗以及居中);
模态框--role="dialog" class="modal fade bs-example-modal-sm" id="layer"(role角色就是模态框,fade由上滑下,bs-example-modal-sm型号small),模态框内层有content,content内层分header和body,header可以放置关闭x和标题,body内可以放置其他提示以及一些关键确认按钮;
功能:
添加记录,重置输入框,删除记录,清除记录;
① 添加纪录:就是读取输入框内信息,对数组进行push内容
v-on:click="add()"
add:function(){
this.mydata.push({
name:this.username,
age:this.age
});
}
其中username和age是这个vue的内部数据变量;
② 重置输入框:采用v-model属性,尤其是它的数据双向绑定
在输入框加载时就将username和age作为默认值;
v-on:click="reset()"
reset:function(){
this.username = "";
this.age = "";
}
③ 删除记录以及清除记录:在删除时我们想要它能跳出一个确认提示框--采用模态框
删除按钮需要和模态框进行绑定;
data-toggle="modal" data-target="#layer"(layer时模态框的id);
在删除时需要获得当前需被删除的记录索引,所以在按下删除按钮时就须获得当前的索引值index(现在的index时不需要$符号的);
v-on:click="nowIndex=index"
然后在确认提示框的确认按钮下对记录进行删除/清除;(函数名不能采用delete)
v-on:click="deleteMsg(nowIndex)"
deleteMsg:function(n){
if(n == -2){
this.mydata = [];
}
else
this.mydata.splice(n,1);
}
效果:
初始:
添加记录:
确认提示框:
删除第一条记录:
清除所有记录:
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
window.onload = function(){
new Vue({
el:"#box",
data:{
mydata:[
{name:'Tom', age:'13'},
{name:'Amy', age:'19'},
{name:'Tony', age:'54'}
],
username:'',
age:'',
nowIndex:-100
},
methods:{
add:function(){
this.mydata.push({
name:this.username,
age:this.age
});
},
reset:function(){
this.username = "";
this.age = "";
},
deleteMsg:function(n){
if(n == -2){
this.mydata = [];
}
else
this.mydata.splice(n,1);
}
}
});
}
</script>
</head>
<body>
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label for="username">username</label>
<input type="text" id="username" class="form-control" placeholder="enter username" v-model="username">
</div>
<div class="form-group">
<label for="age">age</label>
<input type="text" id="age" class="form-control" placeholder="enter age" v-model="age">
</div>
<div class="form-group">
<input type="button" id="add" value="add" class="btn btn-primary" v-on:click="add()">
<input type="button" id="submit" value="reset" class="btn btn-danger" v-on:click="reset()">
</div>
</form>
<hr>
<table class="table table-bordered table-hover">
<caption class="h3 text-info text-center">Message</caption>
<!-- text-info 加粗 -->
<tr class="text-info text-center">
<th class="text-center">NO</th>
<th class="text-center">name</th>
<th class="text-center">age</th>
<th class="text-center">operate</th>
</tr>
<tr class="text-center" v-for="(item,index) in mydata">
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=index">delete</button>
</td>
</tr>
<!-- 合并四个单元格 -->
<tr v-show="mydata.length != 0">
<td colspan="4" class="text-center">
<button class="btn btn-danger" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">delete all</button>
</td>
</tr>
<tr v-show="mydata.length == 0">
<td colspan="4" class="text-center text-info text-muted">
<p>暂无数据...</p>
</td>
</tr>
</table>
<!-- 模态框 弹出框 -->
<div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
<h3 class="modal-title">确认删除吗?</h3>
</div>
<div class="modal-body text-right">
<button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
<button class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">确认</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>