6.29 Vue 学习笔记
1. Vue 等框架等特点,框架解放程序员,适合做单页面程序,
2.案例学习,品牌管理案例,
主要学习有,添加操作,删除操作,搜索操作,
删除操作中的函数学习了两遍。some 函数,splice 函数,findIndex 函数
<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" v-model="id" class="form-control">
label>
<label>
Name:
<input type="text" v-model="name" class="form-control">
label>
<input type="button" value="添加品牌" @click="add">
div>
div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr><td>IDtd>
<td>Nametd>
<td>Ctimetd>
<td>删除td>
tr>
thead>
<tbody>
<tr v-for="item in list">
<td>{{item.id}}td>
<td>{{item.name}}td>
<td>{{item.name}}td>
<td><a href="" @click.prevent="del(item.id)">删除a>td>
tr>
tbody>
table>
div>
<script>
var vm = new Vue({
el : '#app',
data : {
id : '',
name : '',
list : [
{id : 1, name : '大奔',ctime : new Date()},
{id : 2, name : '法拉第',ctime : new Date()},
{id : 3, name : '大众',ctime : new Date()}
]
},
methods : {
add (){
var car = {id : this.id,name : this.name,ctime : new Date()};
this.list.push(car);
this.id = '';
this.name = '';
},
del(id){
//这里没有弄明白
// some == foreach 作用,起到循环寻找的作用,
/* //这个是一个方法,
this.list.some((item,i)=> {
if(item.id == id){ //在数组的some 方法中,如果return true , 就会立即终止整个数组的后续循环
this.list.splice(i,1);//splice 方法,三个参数
//第一个,删除位置,第二个,删除几个,第三个,是否换新的
//比如splice(2,2,'lsj'),,从第二个位置开始删除,删两个,再加一个lsj字段
return true;
}
}); */
//第二个方法 查找索引的方法,也学院传入一个内部回掉函数,
var index = this.list.findIndex(item => {
if(item.id == id)
{
return true;
}
});
this.list.splice(index,1);
}
}
});
script>
body>
3.过滤器的使用,用于常见的文本格式化,
过滤器格式 {{name | nameope}} nameope 过滤器的名称,
过滤器的构造,
//全局过滤器
Vue.filter(‘过滤器名称’,function(参数列表){ //切记打引号
});
//私有过滤在vm 中
filters : {
过滤器名称 : function(参数列表){
},
}
4. 字符串补足函数,padStart() 函数
5.文本框--的回车事件,,键盘事件,,keyDown .keyUP 事件
<input type="text" class="form-control" v-model="name" @keyup.enter="add">
按键修饰符: .enter --- .tab --- .delete -- .esc --- .left 等等
Vue.config.keyCodes.f2 = 113;
6.定义全局指令。
通过三个指令函数实现。bind inserted updated
通过这个三个就可以自定义实现很多功能
其中和样式相关的操作一般,可以在bind 中执行,
行为相关的inserted 中,
6.//使用Vue.directie 定义全局指令,
//其中参数一,是指令名称, 不用加v- ,但是调用的时候需要加v-
//参数二是一个对象,这个对象内部是一些相关指令函数,可以在特定的阶段执行相关的操作,
Vue.directive('focus',{
//其中有三个主要的方法,
bind : function (el){ //立即执行,只执行一次,
//第一个参数必须是el ,其表示被绑定了指令的那个元素, 原生dom 对象
el.focus();
},
inserted : function(el){ //元素插入到dom 中以后立即执行,触发一次,
//el.focus();
},
updated : function(){
} //触发多次,
});
Vue.directive('color',{
bind : function(el){
el.style.color = 'red';
},
inserted : function(el){
//el.style.color = 'red';
}
});
7.定义私有指令,在Vm 的内部,
通过directives 实现,