Vue.js高效前端开发 • 【Vue列表渲染】

淡淡的烟草味﹌ 2022-10-10 13:57 155阅读 0赞

[全部章节 >>>>][Link 1]

--------------------

### 文章目录 ###

*  一、v-for指令
 *   *  1、v-for指令使用
     *  2、实践练习（待更新）
 *  二、计算属性
 *   *  1、计算属性创建和使用
     *  2、实践练习（待更新）
 *  三、侦听属性
 *   *  1、侦听属性创建和使用
     *  2、实践练习（待更新）
 *  四、综合案例
 *   *  1、商品信息管理
     *  2、 实践练习（待更新）
 *  总结

--------------------

# 一、v-for指令 #

## 1、v-for指令使用 ##

>  *  `v-for指令`基于一个`数组`来重复渲染元素。
>  *  `v-for指令`通常用于`显示列表`和`表格数据`。
>  *  `v-for指令`需要使用`“item in items”`形式的特殊语法，其中`items`是`源数据数组`，而`item`则是被迭代的`数组元素`的别名。在`v-for块`中，开发者可以访问`父作用域`的属性。
>  *  `v-for`还支持一个可选的`第二个参数`，即当前项的`索引`。
>  *  为了给Vue一个提示，以便它能跟踪每个行的`数据`，从而重用和重新排序`现有元素`，v-for指令需要为每项提供一个唯一`key属性`。

`示例：`使用v-for显示员工信息列表

<div id="app" style="margin:20px auto;width:600px">
      <ul>
        <li v-for="(item,index) in items" :key="index">
          <a href="">{
       { index }}.{
       { item }}</a>
        </li>
      </ul>
    </div>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      data: { 
        items:["部门管理","员工管理","职务管理"]
      }
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]  
`示例：`使用v-for指令显示单个员工信息

<div id="app" style="margin:20px auto;width:600px">
      <div v-for="(value,name,index) in emp">
        {
       { index }}.{
       { name }} : {
       { value }}
      </div>
    </div>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      data: { 
        emp:{ 
          user:"赵五",
          age:20,
          job:"项目经理"
        }
      }
    });

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

> v-for指令还可以遍历一个对象的属性，其中，`v-for指令`可以提供第二个的参数为`property名称`（也就是键名），还可以用第三个参数作为`索引`。

> 当Vue正在更新使用v-for渲染的元素列表时，它默认使用`“就地更新”`的策略。如果数据项的顺序被改变，Vue将不会移动`DOM元素`来匹配`数据项`的顺序，而是就地更新每个元素，并且确保它们在每个`索引位置`正确渲染。这个默认的模式是高效的，但是只适用于不依赖`子组件状态`或\`临时DOM状态\`\`（例如：表单输入值）的列表渲染输出。

`说明：`

建议尽可能在使用v-for时提供`key属性`，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

`注意：`

不要使用对象或数组之类的非基本类型值作为v-for的key。请用字符串或数值类型的值。

## 2、实践练习（待更新） ##

# 二、计算属性 #

## 1、计算属性创建和使用 ##

*  模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。`例如`

<div id="example">
      {
       { message.split('').reverse().join('') }}
    </div>

*  在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 `message` 的`翻转字符串`。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
 *  所以，对于任何复杂逻辑，都应当使用`计算属性`。
 *  在计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终会返回结果。
 *  计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
 *  所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。

`示例：`使用计算属性实现将英文语句按字母翻转

<div id="app" style="margin:20px auto;width:600px">
      <p>原字符串: "{
       { message }}"</p>
      <p>字符串转换后: "{
       { reversedMessage }}"</p>
    </div>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      data: { 
        message:"Failure is the mother of success."
      },
      computed: { 
        reversedMessage:function(){ 
          return this.message.split("").reverse().join("");
        }
      }
    })

![在这里插入图片描述][20210628201253672.png]

> 示例的功能也可以使用Vue实例的选项`methods方法`实现，methods方法与计算属性区别是`计算属性支持缓存`，所以对遍历大数组或做大量计算时，计算属性更高效。

`示例：`使用计算属性实现对字符串数组根据关键字查找功能

<div id="app" style="margin:20px auto;width:600px">
      <span>字符串关键字：</span>
      <input type="text" placeholder="请输入关键字..." v-model="wordKey"/>
      <ul>
        <li v-for="item in findItems" :key="item">
          {
       { item }}
        </li>
      </ul>
    </div>

// JavaScript代码:
    ...
    el: "#app",
    data: { 
      items:[...],
      wordKey:""
    },
    computed: { 
    findItems:function(){ 
      var _this=this;
      //根据条件过滤数组中的数据
      return _this.items.filter(function(val){ 
        return val.indexOf(_this.wordKey)!=-1;
      })
    }

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

## 2、实践练习（待更新） ##

# 三、侦听属性 #

## 1、侦听属性创建和使用 ##

*  Vue提供了一种更通用的方式来观察和响应Vue实例上的`数据变动`：侦听属性。当有一些数据需要随着其他数据变动而变动时，就可以使用侦听属性`watch`。
 *  watch是一个对象，其中watch对象的属性是需要侦听的目标，一般是`data`中的`某个数据项`，而watch对象的属性值是一个函数，是被侦听的数据项发生变化时，需要执行的函数，这个函数有`两个形参`，`第一个`是`当前值`，`第二个`是`更新后的值`。

`示例：`使用watch侦听添加商品信息输入框，根据值的变化显示不同提示效果

<div id="app" style="margin:20px auto;width:600px">
      <div class="prod">
        <h1>商品信息</h1>
        <p>
          <p><label for="title">商品标题：</label>
            <input type="text" v-model="title" />
            <span :class="{ warn:!titleValid}">商品标题输入不能为空！</span></p>
          <p><label for="price">商品单价：</label>
            …</p>
          <p><label for="amount">商品数量：</label>
            …</p>
          <p>{
       { title }}》商品购买了{
       { amount }}本,总计¥{
       { total }}元</p></p>
      </div>
    </div>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      data: { 
        title:"JavaScript权威指南",
        price:"40",
        amount:"10",
        total:"0",
        titleValid:true,
        priceValid:true,
        amountValid:true
      },
      watch: { 
        title: function(newVal, oldVal){       …    },
        price: function(newVal, oldVal){       …    },
        amount: function(newVal, oldVal){      …    },                
      },
    })

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

> watch选项参数中包含侦听了`商品标题（title）`、`商品价格（price）`和`商品数量（amount）`的值的变化的函数

> watch的一个特点是，最初绑定的时候是不会执行的，要等到商品单价和商品数量改变时才执行监听计算

> 如果想要一开始让最初绑定的时候就执行，就需要watch中使用`handler方法`和`immediate属性`：  
> `handler()方法：`其值是一个回调函数。即监听到变化时应该执行的函数。  
> `immediate属性：`其值是true或false；确认是否以当前的初始值执行handler的函数。

`示例：`修改上一个示例的watch中的price()如下代码

// JavaScript代码:
    price:{  
    // 之前写的watch的函数，其实默认写的就是handler
      handler:function(newVal, oldVal){ 
         …
      },
      // 代表如果在wacth里声明了price之后，就会立即先去执行里面的handler方法
      immediate:true
    }

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

>  *  如果模型数据是一个对象时，Vue默认并不能侦听`对象属性`的变化，watch里面还有一个`deep属性`，默认值是`false`，代表是否深度侦听需要使用。
>  *  当`deep属性`为`ture`时，就能侦听`对象属性`的变化。

## 2、实践练习（待更新） ##

# 四、综合案例 #

## 1、商品信息管理 ##

> 下面结合Vue的基础知识来实现`商品信息的管理功能`，其中包含包含以下功能：
> 
>  *  添加商品信息。
>  *  显示全部商品信息列表。
>  *  根据商品标题查询商品信息列表。
>  *  删除商品信息。

> 本节只使用`JavaScript`、`CSS`和`HTML`实现前端部分，不涉及`服务器端功能`和`数据库部分`。

> `实现添加商品信息功能`
> 
>  *  创建视图
>  *  定义模型
>  *  定义添加方法

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      data: { 
        ...省略代码...
      },
      methods: { 
        createProd: function () { 
          this.products.push(this.newProduct);
          // 添加完newProduct对象后，重置newProduct对象
          this.newProduct = { 
            name: "",
            price: 0,
            category: "手机/数码",
          }
        }
      }
    });

> `实现显示全部商品信息列表`

<table>
      <thead>
        <tr>
          <th>名称</th>
          <th>价格</th>
          <th>类别</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(prod,index) in findProdList">
          <td>{
       { prod.name }}</td>
          <td>{
       { prod.price | priceFormat }}</td>
          <td>{
       { prod.category }}</td>
          <td class="“text-center”"><button @click="deleteProd(index)">删除</button></td>
        </tr>
      </tbody>
    </table>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      data: { 
        ...省略代码...
      },  
      // 为了正确显示价格采用过滤器进行格式处理
      methods: { 
        ...省略代码...
      },
      filters: { 
        priceFormat: function (val) {  // 创建价格格式过滤器
          return "￥" + parseInt(val).toFixed(2) + "元";
        }
      }
    });

> `实现根据商品标题查询商品信息列表`

<div id="app">
    ...省略代码...
    <div class="form-group">
    <label>查询关键字:</label>
    <input type="text" v-model="key" placeholder="请输入查询关键字...." />
    </div>
    ...省略代码...
    </div>

// JavaScript代码:
    computed: { 
      findProdList:function(){ 
        var _this=this;
        return _this.products.filter(function(prod){ 
          return prod.name.indexOf(_this.key)!=-1;
        });
      }
    }

> `实现删除商品信息功能`

// JavaScript代码:
    var vm = new Vue({ 
      el: “#app”,
      data: { ...省略代码...},
      filters: { ...省略代码...},
      methods: { ...省略代码...
      //添加deleteProd()方法
        deleteProd: function (index) { 
          if (confirm("删除当前商品信息吗？")) { 
            // 删除一个数组元素
            this.products.splice(index, 1);
          }
        }
      },
      computed: { ...省略代码...}
    });

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

## 2、 实践练习（待更新） ##

# 总结 #

>  *  在一般的项目中，经常需要将信息用`表格`或`列表显示`出来。在Vue中提供了`v-for指令`来对循环列表功能提供支持。

>  *  `计算属性`避免在模板中加入过重的`业务逻辑`，保证模板的`结构清晰`和`可维护性`

>  *  当有一些数据需要随着其他数据变动而变动时，就可以使用侦听属性`watch`。

[Link 1]: https://ymjin.blog.csdn.net/article/details/118276452
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221005/d0940005360f4e61b1907ebd5309e749.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1]: /images/20221005/b8d5ee3d43be464aa9192fab279bb70c.png
[20210628201253672.png]: /images/20221005/b8fc09a65e744d999cc32663acfe8328.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2]: /images/20221005/72122acca3174d169d5294bcd08881c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 3]: /images/20221005/d05a849092d74cb59a5befcb52327fc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 4]: /images/20221005/b8959ddb74ce449b944b50e46345bd96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 5]: /images/20221005/fb50819a0f0c4ad6a1b3b4dbb775d264.png