1、站点添加实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/vue.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加站点</h3>
</div>
<div class="panel-body form-inline">
<label>Id:<input type="text" class="form-control" v-model="id"></label>
<!--按enter触发add-->
<label>Name:<input type="text" class="form-control" v-model="name" @keyup.enter="add"></label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label>搜索名称关键字:
<input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'blue'">
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | dateFormat()}}</td>
<td><a href="#" @click.prevent="del(item.id)">删除</a></td>
</tr>
</tbody>
</table>
</div>
<div id="app1">
<p v-fontweight="900" v-fontsize="50">{{dt | dateFormat}}</p>
</div>
<script>
//过滤器Vue
Vue.filter('dateFormat',function (dateStr,pattern="") {
//将字符串获取当前时间
var dt = new Date(dateStr);
var y = dt.getFullYear()
var m = (dt.getMonth() +1).toString().padStart(2,'0')
var d = dt.getDate().toString().padStart(2,'0')//填充后两个长度
/* return y + '-' + m + '-'+ d
return '${y}-${m}-${d}'*/
//if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
if(pattern && pattern.toLowerCase() === 'yyyy-mm-dd'){
//return '${y}-${m}-${d}'
return y + '-' + m + '-'+ d
}else {
var hh = dt.getHours().toString().padStart(2,'0')
var mm = dt.getMinutes().toString().padStart(2,'0')
var ss = dt.getSeconds().toString().padStart(2,'0')
return y + '-' + m + '-'+ d +' '+hh+':'+mm+':'+ss
}
})
//自定义按键修饰符
Vue.config.keyCodes.f2 = 113
//自定义指令 v-focus,
//param1 名称
//param2 inserted update bind
Vue.directive('focus',{
bind:function (el) {//首先执行 执行一次,el dom对象，触发的dom
//在元素刚绑定，含没有插入到dom
},
inserted:function (el) {//插入到dom
el.focus()//行为
},
updated:function (el) {
}//触发一次
})
Vue.directive('color',{
//样式
bind:function (el,binding) {
el.style.color = 'red'
//console.log(binding.name)
// console.log(binding.expression)
// console.log(binding.value)
el.style.color = binding.value
}
})
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
keywords:'',
websites:[
{id:1,name:'百度',ctime:new Date()},
{id:2,name:'京东',ctime:new Date()},
{id:3,name:'淘宝',ctime:new Date()}
]
},
methods:{
add(){//添加
//1获取id和name,直接从data获取
//2.组织出一个对象
//3.把这个对象，调用数组的相关方法，添加到当前的data上的websites
if(this.id!='' && this.name!= ''){
var website = {id:this.id,name:this.name,ctime:new Date()}
this.websites.push(website)
this.id = this.name = ''
}else {
alert('id和name不能为空')
}
},
del(id){//根据id删除数据
var index = this.websites.findIndex(item =>{
if (item.id == id){
return true;
}
})
this.websites.splice(index,1)
},
//通过关键字过滤所有符合条件的website
search(keywords){
// 注意：forEarch some filter findIndex这些都是属于数组的新方法，都是进行遍历
return this.websites.filter(item => {
// if(item.name.indexOf(keywords) != -1){
//es6 提供的一个新方法 string.prototype.includes
if(item.name.includes(keywords)){
return item
}
})
}
}
})
var vm1 = new Vue({
el: '#app1',
data: {
dt: new Date()
},
methods: {},
filters: {
dateFormat: function (dateStr, pattern = '') {
//将字符串获取当前时间
var dt = new Date(dateStr);
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
if (pattern && pattern.toLowerCase() === 'yyyy-mm-dd') {
return y + '-' + m + '-' + d
} else {
var hh = dt.getHours().toString().padStart(2,'0')
var mm = dt.getMinutes().toString().padStart(2,'0')
var ss = dt.getSeconds().toString().padStart(2,'0')
return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss + '~~~~'
}
}
},
directives:{//自定义私有指令
'fontweight':{
bind:function (el,binding) {
el.style.fontweight = binding.value
}
},
'fontsize':function (el,binding) {
console.log(binding.value)
el.style.fontsize = parseInt(binding.value) + 'px'
}
}
})
//document.getElementById('search').focus()
</script>
</body>
</html>
实际效果
2、列表添加与删除动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.min.js"></script>
<style>
li{
border: 1px dashed #999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 14px;
100%;
}
li:hover{
background-color: pink;
transition: all 0.4s ease;
}
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,.v-leave-active{
transition: all 0.6s ease;
}
/*实现列表删除元素的后续列表渐渐的飘上来*/
.v-move{
transition: all 0.6s ease;
}
.v-leave-active{
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<div>
<label>
Id:
<input type="text" v-model="id">
</label>
<label>
Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- <ul>-->
<!--实现列表动画不能使用transition包裹
要使用transition-group-->
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}} ----- {{item.name}}
</li>
</transition-group>
<!-- </ul>-->
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
id:'',
name:'',
list:[
{id:1,name:'赵高'},
{id:2,name:'秦桧'},
{id:3,name:'严嵩'},
{id:4,name:'魏忠贤'}
]
},
methods:{
add(){
if(this.id!="" && this.name != ""){
this.list.push({id:this.id,name:this.name})
}
},
del(i){
this.list.splice(i,1)
}
}
})
</script>
</body>
</html>
实际效果
3.实例