vue是啥啊？
一个mvvm框架（库），和angular类似。
比较小巧，容易上手。
vue和angular区别：
-
vue——简单易学
指令以v-xxx
一片html代码配合json，再new出来vue实例
个人维护项目（尤雨溪）
适合移动端项目，小巧 -
angular——上手难
指令以ng-xxx
所有属性和方法都挂到$scope身上
angular由Google维护
适合：pc端项目
共同点：不兼容低版本IE
vue基本雏形：
//angular展示一条基本数据
var app = angular.module('app',[]);
app.controller('ctrl',['$scope',function($scope){
$scope.msg="welcom"
}])
html:
<div ng-controller="ctrl">{{msg}}</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--页面组件部分-->
<div id="app">
<h1>{{message}}</h1>
<button @click='action()'>click</button>
</div>
</body>
<script type="text/javascript">
//组件实例：每个组件都会有一个实例对象与其对应，该组件中所有的数据，事件，逻辑操作都会在该实例中处理
let vm = new Vue({
el:"#app",//el属性是节点属性:该实例操作哪个组件,就把那个组件的id/class/tag值写在参数位置,注意:需要添加先导符
//组件中需要的数据部分，存放在实例的data属性中，该属性对应的值是一个对象，组件所需的每一个变量都是该对象的一个键值对
data:{
message:'hhhhh'
},
//组件中对应的方法（事件函数）存放在实例的methods属性中，该属性对应的值是一个对象，组建中所需要的函数是该对象的一个键值对
methods:{
action:function(){
alert('hhhh')
}
}
})
</script>
</html>
常用指令：
指令是什么：扩展html标签的功能，属性。
v-model 一般应用在表单元素（input） 双向数据绑定
循环：v-for="name in arr" {{name}} {{$index}}——下标
v-for="name in obj" {{name}} {{$index}}——下标 {{$key}}——属性名
事件：
v-on:click="函数"
使用bootstrap+vue实现简易留言板（todolist）
bootstrap：css框架 跟jQueryMobile一样
只需要给标签赋予class，角色
依赖jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易留言板</title>
<link rel="stylesheet" type="text/css" href="libs/bootstrap.min.css"/>
<script src="libs/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" name="username" id="username" class="form-control" placeholder="请输入用户名" v-model="username"/>
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="text" name="age" id="age" class="form-control" placeholder="请输入年龄" v-model="age"/>
</div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-primary" v-on:click="add()"/>
<input type="reset" value="重置" class="btn btn-danger"/>
</div>
</form>
<hr />
<table class="table table-bordered table-hover">
<caption class="h3 text-info text-center">用户信息表</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 myData">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=index">删除</button>
</td>
</tr>
<tr v-show="myData.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=-2" >删除全部</button>
</td>
</tr>
<tr v-show="myData.length==0">
<td colspan="4" class="text-center 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>
<h4 class="modal-title"> 确认删除吗？</h4>
</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" @click="deleteMsg(nowIndex)">确认</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
myData:[],
username:'',
age:'',
nowIndex:-100
},
methods:{
add(){
this.myData.push({
name:this.username,
age:this.age
});
this.username='';
this.age='';
},
deleteMsg(n){
if(n==-2){
this.myData=[]
}else{
this.myData.splice(n,1);
}
}
}
});
</script>
</html>
网友评论