vue笔记-05（vue-增删改查案例知识点）

2020-05-06 本文已影响0人 7ColorLotus

在Vue中，使用事件绑定机制，绑定方法调用时，添加小括号，可以给方法传递参数
数组遍历 this.list.some查询到指定元素终止循环
数组删除 this.list.splice(i, 1) 删除指定索引位置的元素起的第1个元素，不插入新的数据，不写第三个参数

数组查找指定元素的索引this.list.findIndex当返回ture时返回指定的索引

//删除指定元素的方式一
var index = this.list.some((item, i) => {
    if(item.id == id){
        this.list.splice(i, 1)
        return true;
    }
})

//删除指定元素的方式二
var index = this.list.findIndex(item => {
    if(item.id == id ){
        return true;
    }
})
this.list.splice(index, 1);

安装dev-tool
- 翻墙方式：https://chrome.goole.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?h1=zh-CN
- 本地方式，下载安装包-安装扩展程序

this.list.filter做过滤查询

  //es6提供了新方法 string.prototype.include('要包含的字符串')
  var newList = this.list.filter(item => {
      if(item.name.includes(keywords)){
          return item;
      }
  })

过滤器
- Vue.js允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用再两个地方：mustache插值和v-bind表达式。过滤器应该被添加在javascript表达式的尾部，由管道符指示，接多个管道
- 全局过滤器定义语法,全局过滤器代码必须得放在vm 定义之前
```
  Vue.filter('过滤器的名称', function(data){
      return data + '123'
  })

  //应用代码
  {{ data|fitler }}
```
- 全局过滤器，可以被所有的vm使用
- 私有过滤器，只能被某个vm使用
```
  var vm = new Vue({
      el : '#app',
      data : {},
      methods : {},
      filters : {
          dateFormat: function(dateStr, pattern){
              //todo 过滤器内容
          }
      }
  })
```
- 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，此时私有过滤器优先被调用
字符串填充：String.prototype.padStart(maxLength,fillString='')或者String.prototype.padEnd(maxLength,fillString='')

自定义全局按键修饰符

  Vue.config.keyCodes.f2 = 113;

  @keyup.f2 = "add"

vue的初始加载方法的办法，在vm中定义create或者mounted属性
```
  mounted: function(){
              this.search()
          }
```
品牌列表代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01商品管理示例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
            integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>
    <div id="app">
        <div class="panel panel-default">
            <label>id</label>: <input type="text" v-model="id">
            <label>车型</label>: <input type="text" v-model="type" @keyup.enter="add">
            <input type="button" value="添加" @click="add">

            <input type="text" v-model="searchKey" @keyup.enter="search" v-focus v-color="'blue'">
            <input type="button" value="查询" @click="search">
        </div>

        <table class="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>车型</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="car in searchResult" :key="car.id">
                    <td>{{ car.id }}</td>
                    <td>{{ car.type }}</td>
                    <td>{{ car.time|chineseDateFilter|fullDateStrFilter }}</td>
                    <td>
                        <a href=";" @click.prevent="delCar(car.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        //全局过滤器，必须写在vm 定义前
        Vue.filter('chineseDateFilter', function(date){
            var y = date.getFullYear();
            var m = date.getMonth() + 1 + '';
            var d = date.getDay() + '';

            return y + '-' + m + '-' + d;
        })

        Vue.directive('focus', {
            inserted: function(el, binding){
                el.focus()
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                type: '',
                searchKey: '',
                cars: [
                    {id : '1', type: '宝马', time: new Date()},
                    {id : '2', type: '奔驰', time: new Date()},
                    {id : '3', type: '奔奔', time: new Date()}
                ],
                searchResult: []
            },
            mounted: function(){ //初始加载调用方法
                this.search()
            },
            methods: {
                add(){
                    this.cars.push({id: this.id, type: this.type, time: new Date()})
                    this.searchResult.push({id: this.id, type: this.type, time: new Date()})
                },
                delCar(carId){
                    let delIndex = this.cars.findIndex(item => item.id == carId)
                    if(delIndex != -1){
                        this.cars.splice(delIndex, 1)
                    }
                    console.log(this.cars)
                    this.search()
                },
                search(){
                    this.searchResult = [];
                    var totalCars = this.cars;
                    var _this = this;
                    totalCars.forEach(car => {
                        if(car.type.indexOf(_this.searchKey) > -1){
                            _this.searchResult.push(car);
                        }
                    });
                }
            },
            filters: { //局部过滤器
                fullDateStrFilter(str){
                    dateArray = str.split('-');
                    var y = dateArray[0];
                    var m = dateArray[1];
                    m = m.padStart(2, 0);
                    var d = dateArray[2];
                    d = d.padStart(2, 0);
                    return y + '-' + m + '-' + d;
                }
            },
            directives: {
                'fontweight':{
                    bind: function(el, binding){
                        el.style.fontWeight = binding.value
                    }
                },
                'fontsize':function(el, binding){ //bind和updated的简写
                        el.style.fontSize = binding.value + 'px'
                },
                'color':function(el,binding){
                    el.style.color = binding.value
                }
            }
        })

        
    </script>
</body>
</html>

vue笔记-05（vue-增删改查案例知识点）

猜你喜欢

热点阅读