vue学习笔记（一） ----- vue指令（菜单列表案例）

一、渲染品牌列表

<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" class="form-control" v-model="id">

            </label>

            <label>

                Name:

                <input type="text" class="form-control" v-model="name">

            </label>

            <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->

            <input type="button" value="添加" class="btn btn-primary" @click="add()">

        </div>

    </div>

    <table class="table table-bordered table-hover table-striped">

        <thead>

        <tr>

            <th>Id</th>

            <th>Name</th>

            <th>Ctime</th>

            <th>Operation</th>

        </tr>

        </thead>

        <tbody>

        <tr v-for="item in list" :key="item.id">

            <td>{{ item.id }}</td>

            <td>{{item.name}}</td>

            <td>{{ item.ctime }}</td>

            <td>

                <a href="">删除</a>

            </td>

        </tr>

        </tbody>

    </table>

</div>

<script>

    // 创建 Vue 实例，得到 ViewModel

    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()},

                { id: 4, name: '大碗米线' ,ctime: new Date()},

            ]

        },

       methods:{

            add(){

                this.list.push({id:this.id,name:this.name,ctime:new Date()})

            }

       }

    });

</script>

来吧展示：

二、实现删除功能

阻止a链接默认跳转行为，并添加del事件，传递参数id

 <a href="" @click.prevent="del(item.id)">删除</a>

添加del()方法

测试一下del()方法

del(id){

      console.log(id)

 }

方法一：

del(id){

// console.log(id)

//分析业务逻辑

//1，根据拿到的商品id,找到对应的商品商品索引

//2.找到对应的索引值，取数组中，调用splice()方法删除对应的元素

   for(var i=0;i<this.list.length;i++){

      if(this.list[i].id == id ){

      this.list.splice(i,1)

      break

   }

 }

方法二：

del(id){

 var index = this.list.findIndex(function (item,i,arr) {

    return item.id = id

    })

   this.list.splice(index,1)

}

来吧展示：

三、实现搜索功能

创建搜索框，并进行双向数据绑定

<input type="button" value="添加" class="btn btn-primary" @click="add()">

 <label>

 搜索名称关键字：

<input type="text" class="form-control" v-model="keywords">

</label>

给文本框增加一个change事件去监听文本框的值的变化，并拿到搜索的关键字

<input type="text" class="form-control" v-model="keywords" @change="searchByName()">

searchByName(){

    console.log(this.keywords)

 }

测试：

3. 进行搜索框keywords的匹配渲染

 <tr v-for="item in searchByName()" :key="item.id">

list在这里是一个si数据，可以在这传入一个函数

item in 这个方法的返回值

先调用这个函数，变成一个返回值，然后让item 读出来然后渲染出来

如果在serchByName()中return 一个数组

searchByName(){

   // console.log('ok')

   // console.log(this.keywords)

   return [

     { id: 1, name: '黄焖鸡', ctime: new Date() },

     { id: 2, name: '烤鱼', ctime: new Date() }

     ]

   }

页面的数据不再是list中的数据，而是searchByName return出来的数据

动态去创建return 的返回值

方法一：indexOf()方法

 searchByName(){

 // console.log('ok')

// console.log(this.keywords)

 // return [

//     { id: 1, name: '黄焖鸡', ctime: new Date() },

//     { id: 2, name: '烤鱼', ctime: new Date() }

// ]

var result = []

//遍历循环list

for(var i = 0;i<this.list.length;i++){

 if(this.list[i].name.indexOf(this.keywords) !== -1){

 //如果搜索框的keywords

  // console.log(this.list[i].name)

// 拿到的是所有list.name

 //与搜索框中的keywords进行对比，

// 如果 == 0说明存在下标为0的数据 则渲染keywords

//=0 的情况有:

// 1.存在下标为0的数据，存在就渲染keywords

//2. ‘’为空，为空就渲染list

// 如果 == -1 说明不存在这个数据，即没有keywords也没有list中的数据

 result.push(this.list[i])

  }

  }

   return result

}

indexOf()方法的使用:

方法二：inculdes()方法

 searchByName(){

    var result = []

    for(var i = 0;i<this.list.length;i++){

    if(this.list[i].name.includes(this.keywords)) result.push(this.list[i])

     }

    return result

}

includes()方法的使用：

方法三：

searchByName(){

 // var newArr = this.list.filter(function (item) {

 //有this指向的问题，所以要更改成箭头函数

   var newArr = this.list.filter((item) => {

   return item.name.includes(this.keywords)

   //return 一个 ture 那么item对象就会放到新数组中去

  })

  return newArr

 }

数组的fiter()方法：作用是循环指定的数组

并把满足回调函数中的指定条件的项返回，从而得到一个新数组

来吧展示：

四、格式化时间

1. 方法一：

2. 方法二：结合过滤器和moment去处理时间

安装moment
导入moment文件

<script src="node_modules/moment/min/moment.min.js"></script>

在创建时间的后面添加一个管道符和即将要进行过滤的名称

<tr v-for="item in searchByName()" :key="item.id">

      <td>{{ item.id }}</td>

      <td>{{item.name}}</td>

      <td>{{ item.ctime | filterctime}}</td>

      <td>

        <a href="" @click.prevent="del(item.id)">删除</a>

      </td>

</tr>

在vm实例之前去定义一个全局过滤器

Vue.filter('filterctime',function () {

        return moment().format('YYYY-MM-DD HH:mm:ss')

    })

var vm = new Vue({

    ........

})

来吧展示：

五、按下enter键自己田间事件（使用按键修饰符）

官方文档：vue中按键修饰符的使用

<label>

   Name:

  <input type="text" class="form-control" v-model="name" @keyup.enter="add()">

<!-- 只有键盘抬起，并且按的是回车键的时候才会触发add事件-->

</label>

来吧展示：

五、全局自定义指令去获取文本框的焦点

官方文档：https://cn.vuejs.org/v2/guide/custom-directive.html

bind:function (el) {

  console.log(el)

 },

bind:function (el) {

            console.log(el)

            //在这里el.focus()没有生效

            // el.focus()

            el.style.color="red"

            //el.style.color="red"生效了,原因是一个时机的问题，样式不管时机，行为要注意时机的问题，只有有样式，浏览器肯定会去执行，样式只有有，就会被解析

 }

说明想要el.focus()生效,必须先插入到文档中才能生效

Vue.directive('focus',{

        //指令绑定到的元素,被Vue实例解析的时候,就会立即执行bind()函数

        bind:function (el) {

            console.log(el)

            // el.focus()

            el.style.color="red"

            // 想要el.focus()生效,必须先插入到文档中才能生效

        },

        inserted:function (el) {

       //调用机制:当指令绑定到的元素,被插入到文档的父节点时候,调用inserted函数

      // JS DOM API原生方法

      //既然已经在页面上渲染了，那么必然就可以获取到焦点

      //行为与样式不一样，只是一瞬间的事情

      //所以JS的行为最好写到inerted中去

     el.focus()

        }

})

总结：

在自定义指令的时候，如果需要操作元素的JS行为，最好写到inserted()去中

如果要操作元素的样式，最好写到bind中去

六、自定义指令更改颜色样式v- color

方法一：直接在bind中去自定义写入样式

 <input type="button" value="添加" class="btn btn-primary"

 @click="add()" v-color>

Vue.directive('color',{

        bind:function (el,binding) {

         el.style.color="pink"

        },

        inserted:function (el) {

        }

 })

来吧展示：

2. 在v-color中传入颜色的值

 <input type="button" value="添加" class="btn btn-primary"

  @click="add()" v-color="red">

    Vue.directive('color',{

        bind:function (el,binding) {

        //默认如果在v-color中传入了颜色值，那么就显示传入的值，如果没有传，默认是pink

            el.style.color=binding.expression || 'pink'

            // console.log(binding)

            // console.log(binding.expression)

            // console.log(binding.value)

        },

        inserted:function (el) {

        }

    })

来吧展示：

七、在实例对象中自定义指令更改颜色样式v- color

<td>

   <a href="" @click.prevent="del(item.id)" v-style>删除</a>

</td>

methods:{...}

filters:{},

 directives:{

  style:{

    bind(el,binding){

    el.style.fontStyle = 'italic'

    },

    inserted(el){

    }

 }

}

巴特西

vue学习笔记（一） ----- vue指令（菜单列表案例）

一、渲染品牌列表

二、实现删除功能

三、实现搜索功能

四、格式化时间

1. 方法一：

2. 方法二：结合过滤器和moment去处理时间

五、按下enter键自己田间事件（使用按键修饰符）

五、全局自定义指令去获取文本框的焦点

六、自定义指令更改颜色样式v- color

七、在实例对象中自定义指令更改颜色样式v- color

最新文章

热门文章

巴特西

vue学习笔记（一） ----- vue指令（菜单列表案例）

一、渲染品牌列表

二、实现删除功能

三、实现搜索功能

四、格式化时间

1. 方法一：

2. 方法二：结合过滤器和moment去处理时间

五、按下enter键自己田间事件（使用按键修饰符）

五、全局自定义指令去获取文本框的焦点

六、自定义指令 更改颜色样式v- color

七、在实例对象中自定义指令 更改颜色样式v- color

最新文章

热门文章

六、自定义指令更改颜色样式v- color

七、在实例对象中自定义指令更改颜色样式v- color