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>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 实现,

你可能感兴趣的:(前端学习)