2020-02-08
2020-02-08 本文已影响0人
我是萌哒哒小羊
键盘事件，v-for循环，事件控制，过滤器写法（公有，私有），全局指令写法
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></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" style="background-color: #0480BE;">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
id:
<input type="text" class="form-control" v-model="Id">
</label>
<label>
name:
<!-- 键盘事件 -->
<input type="text" class="form-control" v-model="name" @keyup.f2="add">
</label>
<!-- 在vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加上小括号，就可以给函数传参 -->
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label>
搜索关键字
<input type="text" class="form-control" v-model="keywords" v-focus id="search" v-color >
</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>
<!-- 在search方法内部，通过for循环，把符合 搜索关键字的数据，保存到 一个新数组中，返回 -->
<tr v-for="item in list" :key="item.Id">
<td>{{item.Id}}</td>
<td>{{item.Name}}</td>
<td>{{item.Ctime | dataFormat}}</td>
<td>
<!-- a标签会默认跳转，所以需要prevent阻止 -->
<a href="" @click.prevent="del(item.Id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="app2">
<script type="text/javascript">
</script>
</div>
<script type="text/javascript">
//判断是全局或者是局部 就是通过方法上面有没有s filter就是全局 而 filters就是局部
//全局过滤器写法
Vue.filter('dataFormat', function(dataStr){
var dt = new Date(dataStr)
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
return y + '-' + m + '-' + d
})
//定义全局指令
//其中：参数一：指令的名称，注意，在定义的时候，指令的名称前面，不需要加v-前缀
//但是：在调用的时候，必须在指令前 加上v-前缀进行调用
//参数二 是一个对象 这个对象身上 有一些指令相关的函数 这些函数在特定的阶段，只想相关的操作
//Vue.directive('方法名',{})
Vue.directive('focus',{
bind:function(el){//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
//注意：在每个函数中，第一个参数，永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的js对象
//在元素 刚绑定了指令的时候，还没有 插入到dom中去，这时候，调用focus方法没有用
//因为，一个元素，只有插入dom之后，才能获取焦点
},
inserted:function(el){//inserted 表示元素 插入到dom中的时候，会执行inserted 函数【触发一次】
el.focus()
},
updated:function(){ //当vnode更新的时候 会执行update 可能触发多次
}
})
Vue.directive('color',{
//样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
//将来元素肯定显示到页面中，这时候，游览器的渲染引擎必然会解析样式，应用给这个元素
bind:function(el,binding){
//和样式相关的操作，一般都可以在bind执行
//console.log(binding.value)
//console.log(binding.expression)
el.style.color = 'red'
}
})
var vm = new Vue({
el:"#app",
data:{
Id:'',
name:'',
keywords:'',
list:[
{Id:1,Name:'奔驰',Ctime:new Date()},
{Id:2,Name:'奥迪',Ctime:new Date()}
]
},
methods:{
add(){
var car = {Id:this.Id,Name:this.name,Ctime:new Date()}
this.list.push(car)
},
del(id){
this.list.some((item,i)=>{
if(item.Id == id){
this.list.splice(i,1)
return ture;
}
})
},
search(keywords){
// var newList = []
// this.list.forEach(item=>{
// if(item.name.indexOf(keywords) != -1){
// newList.push(item)
// }
// })
// return newList
}
},
});
// document.getElementById('search').focus()
var vm2 = new Vue({
el:'#app2',
data:{},
methods:{},
filters:{
//定义私有过滤器 过滤器有两个条件 【名称和处理函数】
//过滤器名称：function（处理数据的名称，pattern）
dataFormat:function(dataStr,pattern)
}
})
</script>
</body>
</html>
