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){
    }
 }
}

在这里插入图片描述

posted @ 2020-10-24 19:39 杨芋可可阅读(267) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

杨芋可可

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

一、渲染品牌列表

二、实现删除功能

三、实现搜索功能

四、格式化时间

1. 方法一：

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

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

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

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

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

公告

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

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