珠峰培训，专注前端

一、计算属性

什么是计算属性

计算属性，类似于过滤器，用于处理某个或者几个属性的复杂展示逻辑，但是并不会改变源数据；

示例；

  1. {
  2.     ...
  3.     computed: {
  4.         sum() {
  5.             return this.products.filter(item => item.isSelected).reduce((prev, next) => {
  6.                 return prev + next.productPrice * next.productCount;
  7.             }, 0)
  8.         }
  9.     },
  10.     ...
  11. }

使用计算属性

计算属性默认和普通数据一样，直接在 HTML 中使用即可；示例

  1. <td colspan="6">
  2.     总价格：{{sum | toFixed}}
  3. </td>

计算属性的set

  • computed 中的属性都有一个 get 和 set 方法，当获取这个属性时，会执行 get 方法，属性值是 get 方法的返回值；当设置 computed 中的属性时，会触发 set 方法；
  1. {
  2.     ...
  3.     computed: {
  4.         checkAll: {
  5.             get() {
  6.                 return this.products.every(i => i.isSelected);
  7.             },
  8.             set(val) {
  9.                 this.products.forEach(i => i.isSelected = val);
  10.             }
  11.         }
  12.     },
  13.     ...
  14. }
  • computed 中的属性都会被 vm 所代理，最终都要放到 vm 上；
  • computed 中的属性和 data 中的属性不能同名，也不能和 methods 中的属性同名
  • computed 计算属性还可以是一个函数，相当于只设置 get 的情况，函数的返回值就是计算属性的值，但是不能设置
  • 如果一个属性依赖于其他属性计算而来，那么这个属性最好用 computed

计算属性不能用在异步处理中

  • 计算属性的处理不能写在异步处理程序中，如定时器、ajax等
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <input type="text" v-model="sth"> <br>
  10.     {{msg}}
  11. </div>
  13. <script src="vue.js"></script>
  14. <script>
  15.     let vm = new Vue({
  16.         el: '#app',
  17.         data: {
  18.             sth: ''
  19.         },
  20.         computed: {
  21.             msg () {
  22.                 // 计算属性的处理不能写在异步处理程序中，如定时器、ajax等
  23.                 setTimeout(() => {
  24.                     if (this.sth.length > 5) {
  25.                         return '太长了'
  26.                     }
  27.                     if (this.sth.length < 3) {
  28.                         return '太少了'
  29.                     }
  30.                 }, 0)
  31.             }
  32.         }
  33.     })
  34. </script>
  35. </body>
  36. </html>

计算属性示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <!--caption 只能放在 table 中使用：表头-->
  11.     <!--bootstrap-->
  12.     <div class="container">
  13.         <div class="row">
  14.             <h2 class="text-center text-danger">珠峰购物车</h2>
  15.             <table class="table table-bordered">
  16.                 <tr>
  17.                     <td>
  18.                         全选 <input type="checkbox" v-model="checkAll"/>
  19.                     </td>
  20.                     <td>
  21.                         商品
  22.                     </td>
  23.                     <td>
  24.                         单价
  25.                     </td>
  26.                     <td>
  27.                         数量
  28.                     </td>
  29.                     <td>
  30.                         小计
  31.                     </td>
  32.                     <td>
  33.                         操作
  34.                     </td>
  35.                 </tr>
  36.                 <tr v-for="(product, index) in products" :key="index">
  37.                     <!-- {
  38.                                      "isSelected": true,
  39.                                      "productCover": "https://img10.360buyimg.com/cms/s80x80_jfs/t6094/107/710811867/382815/4d54717/592bf165N755a88f0.jpg",
  40.                                      "productName": "深入浅出Node.js",
  41.                                      "productInfo": "颜色：Node.js学习",
  42.                                      "productPrice": 57.8,
  43.                                      "productCount": 3
  44.                                  }-->
  45.                     <td><input type="checkbox" v-model="product.isSelected"></td>
  46.                     <td>
  47.                         <img :src="product.productCover" :title="product.productName" alt="">
  48.                         {{product.productInfo}}
  49.                     </td>
  50.                     <td>
  51.                         {{product.productPrice}}
  52.                     </td>
  53.                     <td>
  54.                         <input type="number" v-model="product.productCount" min="1"/>
  55.                     </td>
  56.                     <td>
  57.                         {{product.productPrice * product.productCount | toFixed(2)}}
  58.                     </td>
  59.                     <td>
  60.                         <button class="btn btn-danger" @click="remove(product)">删除</button>
  61.                     </td>
  62.                 </tr>
  63.                 <tr>
  64.                     <td colspan="6">
  65.                         总价格：{{sum | toFixed}}
  66.                     </td>
  67.                 </tr>
  68.             </table>
  69.         </div>
  70.     </div>
  71. </div>
  73. <script src="axios.js"></script>
  74. <script src="vue.js"></script>
  75. <script>
  76.     let vm = new Vue({
  77.         el: '#app',
  78.         data: {
  79.             products: []
  80.         },
  81.         filters: {
  82.             toFixed(val, num = 2) {
  83.                 return '￥' + val.toFixed(num)
  84.             }
  85.         },
  86.         created() {
  87.             this.getData();
  88.         },
  89.         computed: {
  90.             sum() {
  91.                 return this.products.filter(item => item.isSelected).reduce((prev, next) => {
  92.                     return prev + next.productPrice * next.productCount;
  93.                 }, 0)
  94.             },
  95.             checkAll: {
  96.                 get() {
  97.                     return this.products.every(i => i.isSelected);
  98.                 },
  99.                 set(val) {
  100.                     this.products.forEach(i => i.isSelected = val);
  101.                 }
  102.             }
  103.         },
  104.         methods: {
  105.             getData() {
  106.                 axios.get('carts.json').then(({data}) => {
  107.                     this.products = data;
  108.                 })
  109.             },
  110.             remove(val) {
  111.                 // val 点击时删除的 product
  112.                 this.products = this.products.filter(item => item !== val);
  113.             },
  114.             changeAll() {
  115.                 // 如果全选为 true，即 this.checkAll 为 true，下面的商品的 checkbox 都要选中，如果是全选是 false，那么商品的 checkbox 也是 false
  116.                 this.products.forEach(item => item.isSelected = this.checkAll)
  117.             },
  118.             changeOne() {
  119.                 // 点击每一个 input 的复选框时，去校验是否有是所有的 product 中的 isSelected 都为 true，如果都是 true，那么 checkAll 结果也是 true，如果有一个是 false，那么 checkAll 就是 false，使用 every 方法
  121.                 this.checkAll = this.products.every(item => item.isSelected);
  122.             }
  123.         }
  124.     })
  125. </script>
  126. </body>
  127. </html>

二、侦听器 watch

什么是侦听器属性

watch: 侦听器属性，用于监听某个属性改变，如果发生改变就会触发对应的函数

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <input type="text" v-model="sth"> <br>
  10.     {{msg}}
  11. </div>
  13. <script src="vue.js"></script>
  14. <script>
  15.     let vm = new Vue({
  16.         el: '#app',
  17.         data: {
  18.             sth: '',
  19.             msg: '',
  20.         },
  21.         watch: {
  22.             // computed: 计算属性
  23.             // watch: 侦听器属性，用于监听某个属性改变，如果发生改变就会触发对应的函数
  24.              sth(newVal, oldVal) {
  25.                  // 监听属性 sth，当 sth 属性发生变化时就会触发这个函数
  26.                  // 这个函数有两个参数，第一个是 sth 的最新值，第二个是 sth 的上一个值
  27.                  console.log(newVal);
  28.                  console.log(oldVal);
  29.                  setTimeout(() => {
  30.                      if (newVal.length > 5) {
  31.                          this.msg = '太长了'
  32.                      }
  33.                      if (newVal.length < 3) {
  34.                          this.msg = '太少了'
  35.                      }
  36.                  }, 0)
  37.             }
  38.         }
  39.     });
  41.     // 在工作中能使用 computed 尽量使用 computed 而不要使用 watch；
  42. </script>
  43. </body>
  44. </html>

三、computed 和 watch

computed 计算属性

  1. 页面加载时就求值；支持缓存，如果依赖的数据发生改变，才会重新计算；
  2. 不支持异步
  3. 如果一个属性是由其他属性计算而来，这个属性依赖其他属性，依赖发生变化时自动求取最新的计算结果

watch 计算属性

  1. 页面加载时不求值，依赖值发生改变时才求值
  2. watch 支持异步
  3. watch 只能监听一个属性的变化，如果有属性依赖这个结果，那么需要手动去重新计算这个结果；

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <input type="text" v-model="firstName" />
  10.     <input type="text" v-model="lastName" />
  11.     {{fullName}}
  12. </div>
  15. <script src="vue.js"></script>
  16. <script>
  17.     let vm = new Vue({
  18.         el: '#app',
  19.         data: {
  20.             firstName: '宾',
  21.             lastName: '马',
  22.             fullName: ''
  23.         },
  24.         computed: {
  25.             /*fullName () {
  26.                 return this.lastName + this.firstName;
  27.             }*/
  28.         },
  29.         watch: {
  30.             firstName(newVal, oldVal) {
  31.                 this.fullName = this.lastName + newVal;
  32.             },
  33.             lastName(nawVal, oldVal) {
  34.                 this.fullName = newVal + this.firstName;
  35.             }
  36.         }
  37.     });
  39.     // computed vs watch
  40.     // computed
  41.     // 1. 页面加载时就求值；支持缓存，如果依赖的数据发生改变，才会重新计算；
  42.     // 2. 不支持异步
  43.     // 3. 如果一个属性是由其他属性计算而来，这个属性依赖其他属性，依赖发生变化时自动求取最新的计算结果
  45.     // watch
  46.     // 1. 页面加载时不求值，依赖值发生改变时才求值
  47.     // 2. watch 支持异步
  48.     // 3. watch 只能监听一个属性的变化，如果有属性依赖这个结果，那么需要手动去重新计算这个结果；
  49. </script>
  50. </body>
  51. </html>

四、v-bind:class

什么是v-bind:class

  • v-bind: 绑定动态属性，v-bind 可以简写成 :
  • v-bind:class 动态绑定类名，属性值有以下常用情况：；
    • 如果是对象，对象的属性名是 class 名，属性值为 true 时类名生效，为 false 时不生效
    • 如果是三元运算符，三元运算符表达式的返回结果是生效的 class
  • :class 和原有的 class 并不会冲突，如果不同，最终会合并，如果相同会覆盖原有的；

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .x {
  8.             font-size: 30px;
  9.         }
  10.         .y {
  11.             color: red;
  12.         }
  13.         .z {
  14.             background: lightgreen;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <div id="app">
  20.     <div class="x" :class="{y: true, z: flag}">A</div>
  21.     <div :class="1 ? 'y' : 'z'">C</div>
  22. </div>
  24. <script src="vue.js"></script>
  25. <script>
  26.     // v-bind: 绑定动态属性，v-bind 可以简写成 :
  27.     // v-bind:class 属性值有以下常用情况：；
  28.     // 如果是对象，对象的属性名是 class 名，属性值为 true 时类名生效，为 false 时不生效
  29.     // 如果是三元运算符，三元运算符表达式的返回结果是生效的 class
  30.     // :class 和原有的 class 并不会冲突，如果不同，最终会合并，如果相同会覆盖原有的；
  31.     let vm = new Vue({
  32.         el: '#app',
  33.         data: {
  34.             class1: 'y',
  35.             flag: true
  36.         }
  37.     })
  38. </script>
  39. </body>
  40. </html>

五、v-bind:style

什么是v-bind:style?

v-bind:style 用来绑定元素的动态样式；

:style的常见值

v-bind:style 属性值是一个对象或者数组，如果是对象，里面可以存储具体样式；数组中可以放多个样式对象；

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <div :style="{color: 'red',width: '100px'}">A</div>
  10.     <div :style="[style1, style2]">B</div>
  11. </div>
  13. <script src="vue.js"></script>
  14. <script>
  15.     // v-bind:style 属性值是一个对象或者数组，如果是对象，里面可以存储具体样式；数组中可以放多个样式对象；
  16.     let vm = new Vue({
  17.         el: '#app',
  18.         data: {
  19.             style1: {background: 'pink'},
  20.             style2: {color: '#000'}
  21.         }
  22.     })
  23. </script>
  24. </body>
  25. </html>

六、自定义指令

  • 自定义指令可以给元素增加一些特殊的功能；以拖拽为例；

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         #app div {
  8.             position: absolute;
  9.             width: 100px;
  10.             height: 100px;
  11.             background: red;
  12.             -webkit-user-select: none;
  13.         }
  14.         #app div:nth-child(2) {
  15.             top: 200px
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20. <div id="app">
  21.     <div v-drag>1</div>
  22.     <div v-drag>2</div>
  23. </div>
  25. <script src="vue.js"></script>
  26. <script>
  27.     let vm = new Vue({
  28.         el: '#app',
  29.         directives: {
  30.             // 对象中存储的自定义指令
  31.             drag: {
  32.                 inserted(el) {
  33.                     // 这个函数定义了指令的具体行为 第一个参数是使用这个元素的元素
  34.                     el.onmousedown = function (e) {
  35.                         this.startX = e.pageX - this.offsetLeft;
  36.                         this.startY = e.pageY - this.offsetTop;
  37.                         document.onmousemove = function (e) {
  38.                             el.style.left = e.pageX - el.startX + 'px';
  39.                             el.style.top = e.pageY - el.startY + 'px';
  40.                         };
  41.                         document.onmouseup = function () {
  42.                             document.onmousemove = document.onmouseup = null;
  43.                         }
  44.                     }
  45.                 }
  46.             }
  47.         }
  48.     })
  49. </script>
  50. </body>
  51. </html>

七、todoList

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .del {
  8.             text-decoration: line-through;
  9.             color: #ccc;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14. <div id="app">
  15.     <div class="container">
  16.         <div class="row">
  17.             <div class="col-md-8">
  18.                 <div class="panel panel-success">
  19.                     <div class="panel-heading bg-warning">
  20.                         <h2 class="text-danger">亲~^_^,你有2件事要完成</h2>
  21.                         <input type="text" class="form-control" @keyup.enter="add" v-model="title">
  22.                     </div>
  23.                     <div class="panel-body">
  24.                         <ul class="list-group">
  25.                             <li class="list-group-item" v-for="(todo, index) in filterTodo" :key="index">
  26.                             <span :class="{del: todo.isSelected}">
  27.                                 <input type="checkbox" v-model="todo.isSelected"> {{todo.title}}
  28.                             </span>
  29.                                 <button class="btn btn-danger pull-right btn-xs" @click="remove(todo)">删除</button>
  30.                             </li>
  31.                         </ul>
  32.                     </div>
  33.                     <div class="panel-footer">
  34.                         <a href="#all">全部任务</a>
  35.                         <a href="#finish">已完成</a>
  36.                         <a href="#unfinish">未完成</a>
  37.                     </div>
  38.                 </div>
  39.             </div>
  40.         </div>
  41.     </div>
  42. </div>
  45. <script src="vue.js"></script>
  46. <script>
  47.     let vm = new Vue({
  48.         el: '#app',
  49.         data: {
  50.             todos: [
  51.                 {
  52.                     isSelected: false,
  53.                     title: '睡觉'
  54.                 },
  55.                 {
  56.                     isSelected: false,
  57.                     title: '吃饭'
  58.                 }
  59.             ],
  60.             title: '',
  61.             hash: '#all'
  62.         },
  63.         directives: {
  64.             focus(el) {
  65.                 el.focus()
  66.             }
  67.         },
  68.         created() {
  69.             window.addEventListener('hashchange', () => {
  70.                 // 一旦页面中的 hash 值发生变化，对 data 中的 hash 重新赋值
  71.                 this.hash = window.location.hash;
  72.             })
  73.         },
  74.         methods: {
  75.             add () {
  76.                 this.todos.push({
  77.                     isSelected: false,
  78.                     title: this.title
  79.                 });
  80.                 this.title = '';
  81.             },
  82.             remove(val) {
  83.                 this.todos = this.todos.filter(item => item !== val);
  84.             }
  85.         },
  86.         computed: {
  87.             filterTodo() {
  88.                 switch (this.hash) {
  89.                     case '#all':
  90.                         return this.todos;
  91.                     case '#finish':
  92.                         return this.todos.filter(item => item.isSelected);
  93.                     case '#unfinish':
  94.                         return this.todos.filter(i => !i.isSelected);
  95.                 }
  96.             }
  97.         }
  98.     })
  99. </script>
  100. </body>
  101. </html>

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】