Vue — 第二天（v-model和过滤器）

以你之姓@ 2023-03-13 05:48 7阅读 0赞

VUE-02-v-model和过滤器

## 昨日反馈与回顾 ##

### 代码仓库的问题 ###

不要修改你克隆下来的仓库中任意代码，否则，下次pull时，可能会报错，从而得到不到最新的代码。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]

如果已经遇到了这个冲突：

*  解决冲突(git 中解决冲突)
 *  把关键代码拷出来，放弃这个仓库，重新再次clone（后续git pull）

## 处理样式 ##

样式由两个部分决定：

*  class
 *  style

### v-bind绑定class ###

> 目标：知道通过vue怎么去操作类，也就是class属性的值。

动态绑定class属性，有三种方式：

*  三元运算符
 *  绑定对象：如果属性值为true，则添加属性名给class
 *  绑定数组

代码：

`:class` 动态绑定类名 `class` 原生属性，可以同时存在，他们包含的所有类会合并在一起生效。

### v-bind绑定style ###

> 目标：知道通过vue怎么去操作行内样式，也就是style属性的值。

动态绑定style属性有两种方式：

*  对象形式
 *  数组形式

v-bind绑定style使用对象：

<div id="app">
            <h3 class="title">v-bind-绑定style</h3>
        
           
            <div class="box" :style="styleObj">
                1. 绑定对象
            </div>
    
            
            <div class="box" :style="styleArr">
                2. 绑定数组
            </div>
            <button @click="hBlack">改成黑色的字</button>
        </div>
        <script> // v-bind 是用来动态绑定元素的属性，而style也是元素的属性 // 目标： 可以通过动绑定style来控制样式 。 // 方式： // 1. 绑定对象 // 2. 绑定数组 const vm = new Vue({ el: "#app", // el: document.getElementById("app"), data: { styleObj: { color:'red', // 如果属性名有-，则要加'' 'background-color':'blue' }, // 数组中的每一项都是一个对象，其中以键值对的格式设置了style styleArr:[ { color:'red','font-weight':'bold'}, { 'font-size':'50px'} ] }, methods: { hBlack () { // 直接把styleObj中的color设置成black this.styleObj.color = "black" } } }) </script>

如果同时存在 :style 和 style vue操作的样式会覆盖默认样式。

总结：

*  :style 使用对象 \{css属性名:css属性值\}
 *  :style 使用数组 \[\{css属性名:css属性值\}\]

## v-model ##

### 目标 ###

知道如何绑定多种类型的表单元素

### 基本使用 ###

<div id="app">
            <h3 class="title">v-model</h3>
            用户名：<input v-model="userName" >
            <br>
             
            <button @click="userName=123">123</button>
            <button @click="hPrint">打出userName</button>
        </div>
        <script>
            // v-model 
            // 是用来对表单元素进行双向绑定的。
            //   表单元素: 用户可以进行交互的元素，textarea,select,input,checkbox...
            //   双向绑定: 
            //      -1. 用户在input中的修改，会影响到数据
            //      -2. 数据的修改会影响input
    
            // 格式：<表单元素 v-model="数据项">
    
            const vm = new Vue({
                el: "#app",
                data: {
                    userName: '小王'
                },
                methods: {
                    hPrint () {
                        console.log( this.userName )
                    }
                }
                
            })
        </script>

### 表单元素 ###

*  文本域
 *  复选框
 *  单选框
 *  下拉框

<div id="app">
            <h3 class="title">v-model</h3>
            <div class="box">
                
                用户名：<input v-model="userName" >
            </div>
    
            <div class="box">
                
                性别：
                <input type="radio" value="男" v-model="gender">帅哥
                <input type="radio" value="女" v-model="gender">美女
            </div>
    
            <div class="box">
                
                爱好：
                <input type="checkbox" value="读书" v-model="hobby">读书
                <input type="checkbox" value="sport" v-model="hobby">运动
                <input type="checkbox" value="k歌" v-model="hobby">k歌
            </div>
    
            <div class="box">
                
                个人说明：<textarea v-model="info"></textarea>
            </div>
    
            <div class="box">
            
                位置： 
                <select v-model="city">
                    <option value="1">北京</option>
                    <option value="2">上海</option>
                    <option value="3">潜江</option>
                </select>
            </div>
    
            <div class="box">
                
                愿意吗？<input type="checkbox" v-model="isChecked">
            </div>
            <button @click="hPrint">打印结果</button>
        </div>
        <script> // v-model // 是用来对表单元素进行双向绑定的。 // 1. 普通文本框 // 2. 单选 // 3. 复选 // 4. 文本域 // 5. 下拉 // 6. 单个复选框（是否同意） const vm = new Vue({ el: "#app", data: { userName: '小王子', gender:'男', // 单选 hobby:['读书'], // 多选 info: '自我介绍，如下：白玉谁家郎', city: 1, isChecked: false }, methods: { hPrint () { console.log( this.userName ) console.log( this.gender ) console.log( this.hobby ) console.log( this.info ) console.log( this.city ) console.log( this.isChecked ) } } }) </script>

### 修饰符 ###

#### lazy ####

在默认情况下，`v-model` 在每次 `input` 事件触发后将输入框的值与数据进行同步。你可以添加 `lazy` 修饰符，从而转为在 `change` 事件\_之后\_进行同步：

<input v-model.lazy="msg">

#### number ####

如果想自动将用户的输入值转为数值类型，可以给 `v-model` 添加 `number` 修饰符：

这通常很有用，因为即使在 `type="number"` 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 `parseFloat()` 解析，则会返回原始的值。

#### trim ####

如果要自动过滤用户输入的首尾空白字符，可以给 `v-model` 添加 `trim` 修饰符：

<div id="app">
            <h3 class="title">v-model</h3>
            <div class="box">
                
                
                <br>
                加lazy：<input v-model.lazy="userName" >
                {
       {userName}}
    
            </div>
    
            <div class="box">
                
               
                <br>
                加number：<input v-model.number="age" >
                {
       {age}}
    
            </div>
    
    
            <div class="box">
                
            
                <br>
                <input v-model.trim="email" >
                内容的长度：{
       {email.length}}
            </div>
        </div>
        <script>
            // v-model 
            //     v-model的三个修饰符
            // 1. lazy    -->   v-model.lazy="userName"
            //    默认情况，v-model只要用户修改了input中的内容（在每次input事件之后）就会与数据进行同步
            //    如果加了lazy之后，则在用户完成了输入，鼠标失焦之后(相当于change)，才会与数据同步。
    
            // 2. number
            //    自动转成数值的格式
            
            // 3. trim
            //    把内容中的前后空格去掉
    
            const vm = new Vue({
                el: "#app",
                data: {
                    userName: '小王',
                    age:18,
                    email:''
    
                },
                methods: {
                    hPrint () {
                        console.log( this.userName )
                    }
                }
                
            })
        </script>

## 案例-资产列表 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 1]

### 渲染列表 ###

> 目标：完成表格列表渲染。

需求：

*  根据data中的数据，进行tr的渲染。
 *  当没有数据的时候，显示暂无数据。

静态页面：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="./bootstrap.min.css">
    </head>
    <body>
      <div id="app">
        <div class="container">
          <table class="table table-bordered table-hover">
            <thead>
              <tr>
                <th>编号</th>
                <th>资产名称</th>
                <th>创建时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>宝马</td>
                <td>20000</td>
                <td><a href="#">删除</a></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </body>
    </html>

准备数据：

list: [
        {  id: 1, name: '外套', price: 99 },
        {  id: 2, name: '裤子', price: 34 },
        {  id: 3, name: '鞋', price: 25.4 },
        {  id: 4, name: '头发', price: 19900 }
    ]

完整的功能实现：

<div id="app">
        <div class="container">
          <table class="table table-bordered table-hover">
            <thead>
              <tr>
                <th>编号</th>
                <th>资产名称</th>
                <th>创建时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              
              <tr v-for="(item, idx) in list">
                <td>{
       {item.id}}</td>
                <td>{
       {item.name}}</td>
                
                
    
                
                
                
                
                <td :class="{red:item.price>100}">{
       {item.price}}</td>
               
                <td><a href="#" @click.prevent="hDel(idx)">删除</a></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <script src="./vue.js"></script>
      <script> const vm = new Vue({ el: '#app', data: { list: [ { id: 1, name: '外套', price: 99 }, { id: 2, name: '裤子', price: 34 }, { id: 3, name: '鞋', price: 25.4 }, { id: 4, name: '头发', price: 19900 } ] } }) </script>

### 删除功能 ###

> 目标：完成表格一行删除。

需求：

*  点击删除按钮，确认框提示
 *  点击确认后，再进行删除
 *  绑定事件，指定处理函数的时候，传入ID
 *  在处理函数中，根据ID进行删除（id===>index====>根据索引删除）

实现：

methods: { 
        hDel (index) { 
                console.log('要删除的下标是',index)
                // 删除数组中指定位置的元素
                this.list.splice(index, 1)
              }
    }

### 添加资产 ###

> 目标：完成表格添加资产。

大致的实现步骤：

1.  准备一个表单，包含一个输入框，包含一个提交按钮。
2.  监听提交事件，提取输入框中的内容
3.  根据输入的内容来组织 资产信息对象 追加到数组中即可
    
    1.  数据会驱动视图的更新
4.  清空输入框中的内容

在案例中的代码：

#### html结构 ####

<form class="form-inline">
        <div class="form-group">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="资产名称">
            </div>
        </div>
            
        <button class="btn btn-primary">添加资产</button>
    </form>

#### 双向绑定输入框 ####

*  监听提交事件，且阻止默认提交行为

*  在处理函数中实现逻辑

// 添加资产
            addBrand() { 
              // 通过v-model绑定输入框，可以实时的获取输入的内容
              // console.log(this.brandName)
              // 严谨判断，未输入内容，提示 + 阻止程序运行
              // trim()是去除字符串左右两侧的空格，然后去判断会更加严谨
              if (!this.brandName.trim()) { 
                return alert('请输入资产名称')
              }
              // 组织一个对象：id brandName createTime
              // 正常逻辑：去除数组中最后一项数据的ID累加1即可
              // 极端情况：数组中已经没有数据，此时ID为1即可
              const obj = { 
                id: this.list.length ? this.list[this.list.length - 1].id + 1 : 1,
                brandName: this.brandName,
                createTime: new Date()
              }
              // 追加到数组中即可
              this.list.push(obj)
              // 清空输入框
              this.brandName = ''
            }

### 梳理其它功能 ###

> 目标：确定还有哪些功能需要完成。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 2]

输入框结构：

<form class="form-inline" style="padding: 20px 0">
            <input type="text" class="form-control" placeholder="输入关键字进行搜索">
          </form>

## 过滤器 ##

> 目标：
> 
>  *  理解过滤器的作用和使用场景
>  *  掌握定义和使用过滤器。

### 理解过滤器 ###

过滤器的作用：转换格式。

生活中的过滤器:

如：把水中的杂质过滤掉。输入过滤器的是脏水，输出的是纯净水。

vue中的过滤器：

- 如：把字符串用0补足6位。输入的是不足6位的字符串，输出的是用0补全之后的字符串。
    - 如：把单词首字母转成大写。输入的是普通单词，输出的是首字母大写的单词。

本质就是一个函数

格式x ---过滤器---->  格式y

### 格式 ###

#### 定义过滤器的格式 ####

new Vue({
          // 过滤器的定义
          filters: {
            // 属性名称（过滤器名称）：属性的值（过滤器处理函数）
            myFilter:function(value,其它参数){
            
            }
          }
        })

#### 使用过滤器的格式 ####

// 不带参数
    {
       { msg | 过滤器}}
    // 带参数
    {
       { msg | 过滤器（参数）}}

### 示例1：不带参数的过滤器 ###

<div id="app">
        <h3>{
       {msg}}</h3>
    
        
        <h3>{
       {msg | f1}}</h3>
    
        
        <h3>{
       {msg | padding6}}</h3>
    
    </div>
    
    <script> // vue中的过滤器 // 作用： 在显示数据之前，做一次格式转化 // 定义格式 // filters: { // 过滤器名： function (value,其它参数) { // } // } // 使用格式 // { { msg | 过滤器}} // { {msg}} =====> console.log(msg) // { {msg | f1}} =====> console.log( f1(msg) ) const vm = new Vue({ el: "#app", data: { msg: 'vue' }, // 过滤器列表 filters: { // { {msg | f1}} // 会去: // 1. 调用f1这个函数，并自动把msg传进来给value // 2. 把f1函数的返回值显示出来 f1 (value) { console.log(value) return 'hahaha' }, padding6 (str) { // 对于字符串，不足6位， // 左侧补0 // String(str) 类型转换 // padStart: 在左侧补足字符串 //字符串.padStart(总长度，填充的字符) return String(str).padStart(6, "*") } } }) </script>

注意：

*  它的工作过程就是函数的调用执行过程。
 *  过滤器本质是一个函数：它的接收的参数是格式化之前的数据及格式化的参数，它的返回值是格式化之间的值

### 示例2：带参数过滤器 ###

定义：

filters: { 
                // { {msg | f1}}
                // 会去:
                // 1. 调用f1这个函数，并自动把msg传进来给value
                // 2. 把f1函数的返回值显示出来
                f1 (value) { 
                    console.log(value)
                    return 'hahaha'
                },
                paddingN (str,n) { 
                    // 对于字符串，不足n位，左侧补0
                    // String(str) 类型转换
                    // padStart: 在左侧补足字符串
                    //字符串.padStart(总长度，填充的字符)
                    return String(str).padStart(n, "*")
                }
            }

使用：

{ {  "ab" | padding6}}
    { {  name | padding(5)}}

注意：

*  它会自动传入第一个参数。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 3]

### 过滤器的分类 ###

*  全局过滤器（在vue实例外部定义，在随后的每个vue实例中均可使用）
    
        Vue.filter('过滤器名称',function(value){ 
           //管道符前js表达式执行结果 
           // 返回处理好的数据即可 
        })
 *  局部过滤器（在vue实例中定义，仅能给当前vue实例管理的视图使用）

总结：

*  全局 `Vue.filter('过滤器名称',(value)=>{ //管道符前js表达式执行结果 // 返回处理好的数据即可 })`
 *  局部 `new Vue({filters:{'过滤器名称':(value)=>{ //管道符前js表达式执行结果 // 返回处理好的数据即可 }}})`

## 自定义指令 ##

> 目标：知道如何定义自定义指令，使用自定义指令。

指令（directive）vue提供了v-开头的特殊属性，称之为指令。它提供的指令是有限，如果遇见内置指令无法给你实现的功能，自己封装一个指令（自定义指令）。

*定义一个v-focus的指令，作用让input自动获取焦点*

全局自定义指令，局部自定义指令

<div id="app">
        <input type="text" v-focus>
        <input type="text" v-myfocus>
      </div>
      <script src="./vue.js"></script>
      <script> // 全局自定义指令 // Vue.directive('指令的名称','指令配置对象') // 参数1：指令的名称，不包含v-，但是在使用指令的时候需要加上v- // 参数2：指令配置对象，固定属性 inserted 指定的一个函数， // 1. 该函数会在通过指令标记的元素，创建完毕之后执行 // 2. 该函数有一个默认参数 el 指的是使用这个指令的元素 Vue.directive('focus',{ inserted (el) { // 获取焦点 el.focus() } }) const vm = new Vue({ el: '#app', // 局部自定义指令 // vue配置对象提供了一个选项：directives 对应 对象 directives: { // 属性名称(指令的名称)：属性的值(指令的配置对象) myfocus: { inserted (el) { el.style.height = '50px' el.focus() } } } }) </script>

补充：

*  dom元素提供了focus函数，dom.focus()触发获取焦点事件，自然元素可以获取焦点。

## 案例-资产列表(续) ##

用过滤器完成货币格式化显示

filters: { 
        $:function(value, _currency) { 
            // 全局匹配： 三位连续，且之后也是数值 的数值
            var digitsRE = /(\d{3})(?=\d)/g;
            value = parseFloat(value);
            if (!isFinite(value) || !value && value !== 0) return '';
            _currency = _currency != null ? _currency : '￥';
            // 保留两位小数，并整体转成字符串
            var stringified = Math.abs(value).toFixed(2);
    
            // 获取整数部分。-3表示倒数3位的位置
            var _int = stringified.slice(0, -3);
    
            // 整数部分以3为基准长度划分，剩下几位
            var i = _int.length % 3;
            // 取出头部。
            // 如：12345 ----> 12,
            var head = i > 0 ? _int.slice(0, i) + (_int.length > 3 ? ',' : '') : '';
            // 取出小数点部分
            // 如：12345.67 ----> .67
    
            var _float = stringified.slice(-3);
            var sign = value < 0 ? '-' : '';
            return _currency + sign + head + _int.slice(i).replace(digitsRE, '$1,') + _float;
        }
    }

用自定义指令来完成搜索框自动获取焦点

directives: { 
        // 属性名称(指令的名称)：属性的值(指令的配置对象)
        myfocus: { 
            inserted (el) { 
                el.focus()
            }
        }
    }

用过滤器完成货币格式化显示。

注意:下面的代码来自vue1中的源码。在vue1中提供了货币金额显示格式化的过滤器currency，请在这里https://cdn.bootcdn.net/ajax/libs/vue/1.0.11/vue.js搜索currency关键字。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 4]

用自定义指令来完成搜索框自动获取焦点

directives: { 
        // 属性名称(指令的名称)：属性的值(指令的配置对象)
        myfocus: { 
            inserted (el) { 
                el.focus()
            }
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]: /images/20230312/bcfaf3df38eb4085abc927e054382fb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 1]: /images/20230312/0176c78ca17e4802acd809084ad5f316.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 2]: /images/20230312/470f2028f9184e34be03f25d3c417ac2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 3]: /images/20230312/934c004ce8734673ad66fa3f385866cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70 4]: /images/20230312/55e56a93d7474d1091fd2e03bdb7eca5.png