6.29 Vue 第二天 学习笔记
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>ID</td>
<td>Name</td>
<td>Ctime</td>
<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年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的6.29 Vue 第二天 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 个人信用贷款的条件 满足这几点就可以
- 下一篇： Vue 学习 之 7.01 学习笔记