Vue day02

最新推荐文章于 2024-09-27 13:58:28 发布

wz990223

最新推荐文章于 2024-09-27 13:58:28 发布

阅读量89

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/wz990223/article/details/118142623

版权

学习品牌管理案例（数据驱动视图）

1，书写静态页面，页面可以使用BS，先引入

2，分析数据，哪些需要定义在data里面

3，绑定相应事件，完成操作

添加carList用到了v-for遍历和v-model双向绑定.push实现新增

add() {
        // 设置标志位
        let flag = true;
        for (let i = 0; i < this.carList.length; i++) {
          if (this.id == this.carList[i].id) {
            flag = false;
            alert('id重复')
            break;
          }
        }
        if (flag) {
          let obj = {
            id: this.id,
            name: this.name,
            ctime: new Date(),
          }
          // 添加到数组中
          this.carList.push(obj);
          // 清空输入框
          this.id = "";
          this.name = "";
        }
      },

删除用到了findIndex根据id找到对应下标再通过splice截取数组来改变原数组的大小。

splice(3,1,2)3:索引 1：个数 2：替换的值

<td><button class="btn btn-primary" @click="deleteCar(item.id)">删除</button></td>

deleteCar(id) {
        console.log(id);
        // 根据id找到对应下标
        let index = this.carList.findIndex((item) => {
          return item.id == id;
        });
        // 根据下标删除对应元素
        this.carList.splice(index, 1);
      },

搜索功能;

1. 先去获取输入的内容

2. 我们应该给列表加一层过滤，返回满足条件的列表

注意：使用v-for遍历的时候可以用一个方法代替数组，这个方法需要返回一个新数组

// 搜索车
      sarchCarList() {
        // 将数据返回到表格中
        return this.carList.filter((item) => {
          // 在列表中找到搜索的车
          return item.name.includes(this.search);
        });
      },

日期格式化

let date = new Date();

 dateFormat() {
        let date = new Date();
        let Y = date.getFullYear();
        let M = date.getMonth() + 1 > 10 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1);
        // padStart(2,0)
        // 这个是字符串提供的方法，所以我们先要保证调用的地方是个字符串
        // 这个方法里两个参数 -第一个表示显示的位数，第二个表示位数不足时在前面补充的内容
        let D = date.getDate().toString().padStart(2, 0);
        let h = date.getHours().toString().padStart(2, 0);
        let m = date.getMinutes().toString().padStart(2, 0);
        let s = date.getSeconds().toString().padStart(2, 0);

Vue.js 过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由管道符 | 指示

使用语法

{{变量 | 过滤器名}}
{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

全局定义：

通过Vue提供的filter方法定义：Vue.filter()
参数：过滤器的名字或过滤器执行函数
回调函数有两个参数data和format。data 是被过滤数据，format是过滤器被调用时传递参数

私有定义

filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。

Vue.filter('add', function (data, format) {
    // data 是被过滤数据
    console.log(data);
    // format是过滤器被调用时传递参数
    console.log(format);
    // 最终显示内容
    return data + format;
  })

知识点补充

padStart(2,0)

这个是字符串提供的方法，所以我们先要保证调用的地方是个字符串

这个方法里两个参数 -第一个表示显示的位数，第二个表示位数不足时在前面补充的内容

padEnd(2,0)

这个是字符串提供的方法，所以我们先要保证调用的地方是个字符串

这个方法里两个参数 -第一个表示显示的位数，第二个表示位数不足时在后面补充的内容

键盘修饰符

注册一个监听按键事件

监听所有按键：v-on:keyup
监听指定按键：v-on:keyup.按键码
使用按键别名 vue提供的按键别名

自定义按键

<input type="text" @keyup='keyup1'>
    <!-- 2.	监听指定按键：v-on:keyup.按键码 -->
    <!-- 回车13 -->
    <input type="text" @keyup.13='keyup1'>
    <!-- 注意一些默认事件比如f5刷新 -->
    <input type="text" @keyup.116='keyup1'>
    <p>使用按键别名 vue提供的按键别名</p>
    <input type="text" @keyup.enter='keyup1'>
    <!-- 自定义案件 -->
    <input type="text" @keyup.c='keyup1'>

自定义指令

全局定义

使用这个方法进行全局定义：Vue.directive()

参数：

1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）

2. 对象，里面包含三个钩子方法

bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted 这个元素已经渲染到界面上之后执行
update 当元素有更新的时候执行

3. 这三个方法的参数有哪些

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。

 Vue.directive("color", {
    bind(el, bind) {
      el.style.color = "black"
      el.style.color = bind.value;
    },
    inserted(el) {
      el.style.fontSize = "60px";
    },
    update(el) {
      console.log(el);
    },
  });

私有定义

实例里有个directives属性，这个属性是个对象
里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的

简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。

const vm2 = new Vue({
    el: "#app2",
    data: {
      color2: "red",
    },
    methods: {},

    directives: {
      app2color(el, bind) {
        console.log(el);
        el.style.color = bind.value;
      },
    },
  });