[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>
614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
