6.29 Vue 第二天 学习笔记
6.29 ?Vue ?學(xué)習(xí)筆記
?
1. Vue 等框架等特點(diǎn)，框架解放程序員，適合做單頁(yè)面程序，
2.案例學(xué)習(xí)，品牌管理案例，
主要學(xué)習(xí)有，添加操作，刪除操作，搜索操作，
刪除操作中的函數(shù)學(xué)習(xí)了兩遍。some 函數(shù)，splice ?函數(shù)，findIndex 函數(shù)
<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){
//這里沒(méi)有弄明白
// some == foreach 作用，起到循環(huán)尋找的作用，
/* //這個(gè)是一個(gè)方法，
this.list.some((item,i)=> {
if(item.id == id){ //在數(shù)組的some 方法中，如果return true , 就會(huì)立即終止整個(gè)數(shù)組的后續(xù)循環(huán)
this.list.splice(i,1);//splice 方法，三個(gè)參數(shù)
//第一個(gè)，刪除位置，第二個(gè)，刪除幾個(gè)，第三個(gè)，是否換新的
//比如splice(2,2,'lsj'),,從第二個(gè)位置開(kāi)始刪除，刪兩個(gè)，再加一個(gè)lsj字段
return true;
}
}); */
//第二個(gè)方法 查找索引的方法，也學(xué)院傳入一個(gè)內(nèi)部回掉函數(shù)，
var?index?= this.list.findIndex(item?=>?{
if(item.id?== id)
{
return?true;
}
});
this.list.splice(index,1);
}
?
}
?
});
</script>
?
</body>
?
3.過(guò)濾器的使用，用于常見(jiàn)的文本格式化，
過(guò)濾器格式 ?{{name | nameope}} ?nameope 過(guò)濾器的名稱(chēng)，
過(guò)濾器的構(gòu)造，
//全局過(guò)濾器
Vue.filter(‘過(guò)濾器名稱(chēng)’,function(參數(shù)列表){ ??//切記打引號(hào)
?
});
?
//私有過(guò)濾在vm ?中
filters : {
過(guò)濾器名稱(chēng) ： function(參數(shù)列表){
?
},
}
?
4. 字符串補(bǔ)足函數(shù)，padStart() 函數(shù)
?
5.文本框--的回車(chē)事件，，鍵盤(pán)事件，，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.定義全局指令。
通過(guò)三個(gè)指令函數(shù)實(shí)現(xiàn)。bind ??inserted ?updated
通過(guò)這個(gè)三個(gè)就可以自定義實(shí)現(xiàn)很多功能
其中和樣式相關(guān)的操作一般，可以在bind 中執(zhí)行，
行為相關(guān)的inserted ?中，
6.//使用Vue.directie 定義全局指令，
????????//其中參數(shù)一，是指令名稱(chēng)， 不用加v- ,但是調(diào)用的時(shí)候需要加v-
????????//參數(shù)二是一個(gè)對(duì)象，這個(gè)對(duì)象內(nèi)部是一些相關(guān)指令函數(shù)，可以在特定的階段執(zhí)行相關(guān)的操作，
????????Vue.directive('focus',{
????????????//其中有三個(gè)主要的方法，
????????????bind?:?function?(el){ //立即執(zhí)行，只執(zhí)行一次，
????????????????//第一個(gè)參數(shù)必須是el ，其表示被綁定了指令的那個(gè)元素， 原生dom 對(duì)象
????????????????el.focus();
????????????},
????????????inserted?:?function(el){ //元素插入到dom 中以后立即執(zhí)行，觸發(fā)一次，
????????????????//el.focus();
????????????},
????????????updated?:?function(){
?
????????????} //觸發(fā)多次，
?
????????});
?
???Vue.directive('color',{
????????????bind?:?function(el){
????????????????????el.style.color?= 'red';
????????????},
????????????inserted?:?function(el){
????????????????//el.style.color = 'red';
????????????}
????????});
?
7.定義私有指令，在Vm 的內(nèi)部，
通過(guò)directives 實(shí)現(xiàn)，
與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的6.29 Vue 第二天 学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 个人信用贷款的条件 满足这几点就可以
- 下一篇： html5倒计时秒杀怎么做,vue 设