vue
6.29 vue 第二天 学习笔记 -凯发ag旗舰厅登录网址下载
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 实现，
与50位技术专家面对面20年技术见证，附赠技术全景图总结
以上是凯发ag旗舰厅登录网址下载为你收集整理的6.29 vue 第二天 学习笔记的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。
- 上一篇：
- 下一篇：