VUE过滤器与修饰符-vue day02

发布于：2022-12-11 ⋅ 阅读:(679) ⋅ 点赞:(0)

目录

昨日回顾

今日知识

1、品牌管理案例

2、过滤器（之前的品牌案例中有关于时间过滤器的书写）

3、键盘修饰符

4、自定义指令

补充内容

操作 DOM 与使用 VUE 思想的转换
谨记：数据驱动视图

昨日回顾

1、什么是vue 

渐进式框架、轻量级（上手难度低）

vue的两个核心理念  数据驱动视图 组件式开发

anugular.js 核心理念：all in js

渐进式？逐渐进入项目的方式

2、为什么学习流行框架？

减少开发时间

减少不必要的dom操作

3、框架和库的区别

框架：提供一套完整的解决方案，对项目入侵较大

库：对项目入侵较小，但是无法完成某些需求

4、MVC & MVVM

MVC后端分层开发理念 模型层（与数据库打交道）、视图层（与用户打交道）、调度层

MVVM 前端分层开发理念 V界面展示 M数据（数据量小的多） VM（调度）

5、vue的代码结构

6、插值表达式、v-cloak、v-text、v-html

7、v-bind、v-on

8、事件修饰符

放在时间类型后面

9、v-model 数据双向绑定

数据、视图双向

10、vue样式的使用

class

  1. 数组
  2. 三木表达式
  3. 数组内置对象（对象的键是样式的名字，值是Boolean类型）
  4. 直接通过对象

style

  1. 直接在元素上通过 :style 的形式，书写样式对象
  2. 将样式对象，定义到 data 中，并直接引用到 :style 中
  3. 在 :style 中通过数组，引用多个 data 上的样式对象

11、v-for key

key：提高重排（重新排布）效率

12、v-if v-show的区别

a) 区别：

i.   v-if删除dom元素 来控制dom元素的显示和隐藏  （搭档：v-else v-else-if）

ii.  v-show设置display:none 来控制dom元素的显示和隐藏

b) 应用场景：

i.   v-if只修改一次的时候可以使用v-if

ii.  v-show频繁切换的时候可以使用v-show

今日知识

1、品牌管理案例

实现功能：实现品牌的增删改查等功能

用到的外部文件：Bootstrap、vue

要实现的效果：

 

 

 

 代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3-品牌列表</title>
  <script src="./vue-2.4.0.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div id="app">
    <div class="container">
    
      <div class="panel panel-info">
          <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
          </div>
          <div class="panel-body">
            
            
            <form action="" method="POST" class="form-inline" role="form">
              <div class="form-group">
                <label class="" for="">ID</label>
                <input v-model="carId" type="text" class="form-control" id="id" placeholder="Input field">
              </div>
              <div class="form-group">
                <label class="" for="">name</label>
                <input v-model="carName" type="text" class="form-control" id="" placeholder="Input field">
              </div>
              
              
              <button @click.prevent="addCar" type="submit" class="btn btn-primary">添加</button>
              <div class="form-group">
                <label class="" for="">搜索关键字</label>
                <input v-model="keyword" type="text" class="form-control" id="" placeholder="Input field">
              </div>
            </form>
            
          </div>
      </div>
      
      
      <table class="table table-bordered table-hover">
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
          </tr>
          <tr v-for="(item,index) in getCarList()" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ctime | timeFormat('YYYY-MM-DD hh: mm: ss')}}</td>
            <td>
              
              <button @click="deleteCar(item)" type="button" class="btn btn-danger">删除</button>
              
              <a class="btn btn-info" data-toggle="modal" :href="'#'+item.id" @click="newName=''">修改</a>
              <div class="modal fade" :id="item.id">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title">修改昵称</h4>
                    </div>
                    <div class="modal-body">
                      <input type="text" class="form-control" v-model="newName">
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                      <button type="button" class="btn btn-primary" data-dismiss="modal" @click="verify(index)">确定</button>
                    </div>
                  </div>
                </div>
              </div>

            </td>
          </tr>
      </table>
      



    </div>
  </div>
  
  
  
  
  
</body>
<script>

  // 时间  过滤器
  Vue.filter('timeFormat',function (data,format) {
    let Y = data.getFullYear().toString()
    let M = (data.getMonth()+1).toString().padStart(2,'0')
    let D = (data.getDate()).toString().padStart(2,'0')
    let h = (data.getHours()).toString().padStart(2,'0')
    let m = (data.getMinutes()).toString().padStart(2,'0')
    let s = (data.getSeconds()).toString().padStart(2,'0')
    return format.replace('YYYY',Y).replace('MM',M).replace('DD',D).replace('hh',h).replace('mm',m).replace('ss',s)
  })




  let vm = new Vue({
    el:'#app',
    data:{
      deleteIndex:-1,
      carId:'',
      carName:'',
      keyword:'',
      flag:null,
      newName:'',
      carList:[
        {
          id:'1',
          name:'凯迪拉克',
          ctime:new Date(),
        },
        {
          id:'2',
          name:'大黄蜂',
          ctime:new Date(),
        },
        {
          id:'3',
          name:'雷克萨斯',
          ctime:new Date(),
        },
      ],
    },
    methods:{
      addCar(){

        if (this.carList.some(item=>item.id==this.carId)) {
          alert('id重复')
        }else{
          this.carList.push({
          id:this.carId,
          name:this.carName,
          ctime:new Date(),
          })
        }

        this.carId = ''
        this.carName = ''
        console.log(this.carList);
        
      },
      deleteCar(item){
        this.flag = confirm('确定要删除数据吗？')
        if(this.flag) this.carList.splice(this.carList.indexOf(item),1)
      },
      getCarList(){
        return this.carList.filter(item=>{
          return item.name.includes(this.keyword)
        })
      },
      verify(index){
        this.carList[index].name = this.newName
      }
    }
      
  })
</script>
</html>

2、过滤器（之前的品牌案例中有关于时间过滤器的书写）

概念：vue允许自定义过滤器，可以被用作一些常见的文本格式化

用法：过滤器可以用在两个地方：双花括号插值    v-bind。过滤器应该被添加在JavaScript表达式的尾部，由 “ 管道 ” 符（  |  ）指示。

作用：在页面显示值之前加一层过滤。展示我们过滤后的值

注意：过滤器可以用在两个地方：双花括号插值    v-bind 表达式

使用语法：可以同时使用多个过滤器，后面过滤器的 data 就是前面表达式传过来的值

        {{ 变量 | 过滤器名 }}

        {{ 变量 | 过滤器 | 另一个过滤器 }}

定义语法：

        全局定义：

                通过 vue 提供的 filter 方法定义：vue.filter()

                参数：过滤器的名字和过滤器执行函数

                示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./vue-2.4.0.js"></script>
  <title>过滤器执行函数</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <div>{{msg | getStart(666)}}</div>
    <div>{{msg | getStart(666) | getStart2(11111)}}</div>
  </div>
</body>
<script>
  /* 
    参数1 名字 
    参数2 函数(数据，格式（传递参数）)
  */
  Vue.filter('getStart',function (data,format) {
    console.log(data);
    console.log(format);
    return data.replace('坏人','**')
  })

  Vue.filter('getStart2',function (data,format) {
    console.log(data);
    console.log(format);
    return data.replace('你','*')
  })


  let vm = new Vue({
    el:'#app',
    data:{
      msg:'你是个坏人'
    },
    methods:{},
  })
</script>
</html>

        私有定义：

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

        示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./vue-2.4.0.js"></script>
  <title>私有过滤器函数</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <div>{{msg | getStart(666)}}</div>
    <div>{{msg | getStart(666) | getStart2(11111)}}</div>

    <div> {{num}} </div>
    <div> {{num | addn(4)}} </div>


  </div>

  <div id="app2">
    <div>{{msg}}</div>
    <div>{{msg | getStart(666)}}</div>
    <div>{{msg | getStart(666) | getStart2(11111)}}</div>

    <div> {{num}} </div>
    <div> {{num | addn(4)}} </div>


  </div>
</body>
<script>
  /* 
    全局过滤器
    参数1 名字 
    参数2 函数(数据，格式（传递参数）)
  */
  Vue.filter('getStart',function (data,format) {
    console.log(data);
    console.log(format);
    return data.replace('坏人','**')
  })

  Vue.filter('getStart2',function (data,format) {
    console.log(data);
    console.log(format);
    return data.replace('你','*')
  })


  let vm = new Vue({
    el:'#app',
    data:{
      msg:'你是个坏人',
      num:33,
    },
    methods:{},
  })
  let vm2 = new Vue({
    el:'#app2',
    data:{
      msg:'你是个坏人',
      num:33
    },
    methods:{},
    // 私有过滤器
    filters:{
      addn(data,n){
        return data + n
      }
    }
  })
</script>
</html>

        注意事项：

                1、函数的第一个参数都是 data，也就是需要过滤的值

                2、过滤器可以自定义一些参数

                3、过滤器函数的返回值就是最终显示的值

3、键盘修饰符

        注册一个监听按键事件

                1、监听所有按键：v-on: keyup

                2、监听指定案件：v-on: keyup.按键码

                注意：每个键盘按键都会对应一个键盘码

        使用按键别名

            vue 提供的按键别名

             .enter / .tab / .delete（捕获 “删除” 和 “退格” 键）/ .esc / .space / .up / .down / .left / .right

                例：监听 enter 按键；v-on: key.enter

        自定义按键别名

                例如：vue.config.keyCodes.f1 = 112

        注意：键盘默认事件的等级要高  f5没有取消默认刷新，tab没有取消默认tab事件

键盘修饰符示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>键盘事件</title>
  <script src="./vue-2.4.0.js"></script>
</head>
<body>
  <div id="app">
    键盘按下事件
    <input type="text" @keyup="keyup" v-model="value"><br>
    按下keyCode为65的打印    a
    <input type="text" @keyup.65="keyup" v-model="value"><br>
    mmmmmm 
    <input type="text" @keyup.m="keyup" v-model="value"><br>
    空格 
    <input type="text" @keyup.space="keyup" v-model="value"><br>
    f5  没有取消默认刷新事件
    <input type="text" @keyup.f5.prevent="keyup" v-model="value"><br>
    tab 没有取消默认tab事件
    <input type="text" @keyup.tab.prevent="keyup" v-model="value"><br>
    <input type="text" @keyup.tab="keyup" v-model="value">
    <input type="text" @keyup.tab="keyup" v-model="value">
    <input type="text" @keyup.tab="keyup" v-model="value">
    <input type="text" @keyup.tab="keyup" v-model="value">
    <input type="text" @keyup.tab="keyup" v-model="value">
  </div>
</body>
<script>
  // 自定义按键别名
  Vue.config.keyCodes.m = 77
  let vm = new Vue({
    el:'#app',
    data:{
      value:''
    },
    methods:{
      keyup(event){
        console.log(event);
        console.log(this.value);
      }
    }
  })
</script>
</html>

4、自定义指令

      全局定义：

      方法：Vue.directive()

      参数：

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

              2、对象，里面包含三个钩子方法（Vue 实例在被创建时，会经过一系列的初始化过程，初始化过程中会运行一些函数，叫做生命周期钩子函数，通过运用钩子函数，用户在可以在Vue实例初始化的不同阶段添加自己的代码，以此来实现自己想做的事情。钩子函数在Vue初始化、更新数据、销毁时会被自动调用。）

        ① bind只调用一次，指令第一次绑定到元素元素是调用，可以进行一次性的初始值初始化设置

        ② inserted 这个元素已经渲染到界面上之后执行

        ③ updata 当元素有更新的时候执行

    私有定义：（updatad）

        使用方法：实例里有个 directives 属性，这个属性是个对象，与 data，methods平级

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

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

自定义示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./vue-2.4.0.js"></script>
    <title>自定义指令directive</title>
  </head>
  <body>
    <div id="app">
      <div>你喜欢的电影：《喜羊羊》《海绵宝宝》</div>
      <div v-color="mycolor">你喜欢的电影：《喜羊羊》《海绵宝宝》</div>
      <div v-color="'blue'">你喜欢的电影：《喜羊羊》《海绵宝宝》</div>
      <div v-color="'pink'">你喜欢的电影：《喜羊羊》《海绵宝宝》</div>
      <div v-color2="'pink'">你喜欢的电影：《喜羊羊》《海绵宝宝》</div>

      <input type="text" v-myfocus="mycolor" v-model="value" />
      <input type="text" v-focus="mycolor" v-model="value" />
    </div>

    <div id="app2">
      <div>你喜欢的电影：《喜羊羊》《海绵宝宝》</div>
      <div v-color="mycolor">你喜欢的电影：《喜羊羊》《海绵宝宝》</div>
      <div v-color="'blue'">你喜欢的电影：《喜羊羊》《海绵宝宝》</div>
      <div v-color="'pink'">你喜欢的电影：《喜羊羊》《海绵宝宝》</div>

      <input type="text" v-color="mycolor" v-model="value" />
      <input type="text" v-focus="mycolor" v-model="value" />
    </div>
  </body>
  <script>
    /* 
    全局自定义指令：
    参数1   指令名字（定义不加 v- ，使用时加 v-）
    参数2   对象{bind(el绑定的dom元素)}
  */
    Vue.directive("color", {
      bind(el, binding) {
        console.log(el);   // el 是这个元素
        console.log(binding);    // binding 是一个对象
        // el.style.color = "red";
        el.style.color = binding.value;
      },
      inserted(el) {
        // 这个元素已经渲染到界面上之后执行
        console.log(el);
      },
      update(el) {
        console.log(el);
      },
    });

    // 自动聚焦
    Vue.directive("myfocus", {
      bind(el, binding) {
        console.log(el);
        console.log(binding);
        // el.focus();
      },
      inserted(el) {
        el.focus();   // 只有在渲染之后才可以执行焦点函数，否则不生效，并且一个页面只有一个焦点，后面的会覆盖前面的
      },
      update(el) {
        console.log(el);
        el.style.color = "skyblue";
      },
    });

    let vm = new Vue({
      el: "#app",
      data: {
        mycolor: "red",
        value: "",
      },
      methods: {},
      // 私有自定义指令
      directives: {
        // 下面这种写法默认是 bind 
        color2(el, binding) {
          console.log(el);
          console.log(binding);
          el.style.color = "skyblue";
          el.style.fontSize = '30px'
        },
        // 或者是像这种比较全的写法都可以
        focus:{
          inserted(el){
            el.focus()
          },
          bind(el,binding){

          },
          update(){}
        }
      },
    });

    let vm2 = new Vue({
      el:'#app2',
      data:{
        mycolor:'red',
        value:''
      },
      methods:{},
    })



  </script>
</html>

补充内容

1、window.confirm() 显示一个带有指定消息和确认及取消按钮的对话框。

示例：

function myFunction(){

    var x;

    var r=confirm("按下按钮!");

    if (r==true){

        x="你按下了\"确定\"按钮!";

    }

    else{

        x="你按下了\"取消\"按钮!";

    }

    document.getElementById("demo").innerHTML=x;

}

2、.splice(开始截取的位置，截取的个数，要添加的新元素......)

3、toFixed() 四舍五入保留两位小数

4、ceil() 向上取整

5、floor() 向下取整

6、swich-case 要比 if-else 效率高

7、eval(字符串) 运算字符串，是一个危险的函数，最好不要用

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布