开发公司Vue基础知识总结 3：vue常用标签

🍅 作者简介：哪吒，CSDN2021开发公司博客之星亚军🏆、开发公司新星计划导师✌、博客专家💪

🍅 开发公司哪吒多年工作总结：

🍅 开发公司关注公众号【哪吒编程】，回复1024，获取Java开发公司学习路线思维导图、开发公司大厂面试真题、开发公司加入万粉计划交流群、开发公司一起学习进步

目录

一、开发公司常用标签简介

1、v-for和@click开发公司实现点击赋予红色效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.     .active{
  8.       color: red;
  9.     }
  10.   </style>
  11.  
  12. </head>
  13. <body>
  14. <div id="app">
  15.   <ul>
  16.     <li v-for="(item,index) in girls"
  17.         v-bind:class="{active:currentIndex == index}"
  18.         @click="liClick(index)">{{item}}</li>
  19.   </ul>
  20. </div>
  21.  
  22. <script src="../js/vue.js"></script>
  23. <script>
  24.   const app = new Vue({
  25.     el: '#app',
  26.     data: {
  27.       message: '你好',
  28.       girls: ['比比东','千仞雪','美杜莎','云韵','雅妃'],
  29.       currentIndex: 0
  30.     },
  31.     methods: {
  32.       liClick(index){
  33.         this.currentIndex = index
  34.       }
  35.     }
  36.   })
  37. </script>
  38. </body>
  39. </html>

2、开发公司合并两个字符串

  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">{{fullName}}</div>
  9.  
  10. <script src="../js/vue.js"></script>
  11. <script>
  12.     let app = new Vue({
  13.       el: '#app',
  14.       data: {//定义数据
  15.         message: '哪吒',
  16.         firstName: '无情',
  17.         lastName:'冷血'
  18.       },
  19.       computed: {
  20.           fullName: function () {
  21.             return this.firstName + ' ' + this.lastName
  22.           }
  23.       }
  24.     })
  25. </script>
  26. </body>
  27. </html>

3、开发公司计算属性的复杂操作

  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">{{es62}}</div>
  9.  
  10. <script src="../js/vue.js"></script>
  11. <script>
  12.     let app = new Vue({
  13.       el: '#app',
  14.       data: {//定义数据
  15.         girls: [
  16.             {name: '千仞雪',age:18},
  17.             {name: '云韵',age:20},
  18.             {name: '比比东',age:25},
  19.             {name: '美杜莎',age:22}
  20.         ]
  21.       },
  22.       computed: {
  23.           ageSum: function () {
  24.             let sum = 0
  25.             let result = 0
  26.             for(let i = 0;i<this.girls.length;i++){
  27.               sum += this.girls[i].age
  28.             }
  29.             result = sum/this.girls.length;
  30.             return result
  31.           },
  32.           es6: function () {
  33.             let sum = 0
  34.             let result = 0
  35.             for(let i in this.girls){
  36.               sum += this.girls[i].age
  37.             }
  38.             result = sum/this.girls.length;
  39.             return result
  40.           },
  41.           es62: function () {
  42.             let sum = 0
  43.             let result = 0
  44.             for(let girl of this.girls){
  45.               sum += girl.age
  46.             }
  47.             result = sum/this.girls.length;
  48.             return result
  49.           }
  50.       }
  51.     })
  52. </script>
  53. </body>
  54. </html>

4、var没有块级作用域，let有块级作用域

  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">{{message}}</div>
  9.  
  10. <script src="../js/vue.js"></script>
  11. <button>按钮1</button>
  12. <button>按钮2</button>
  13. <button>按钮3</button>
  14. <button>按钮4</button>
  15. <button>按钮5</button>
  16. <script>
  17.     let app = new Vue({
  18.         el: '#app',
  19.         data: {//定义数据
  20.             message: '哪吒'
  21.         }
  22.     })
  23.  
  24.     // 因为ES5前if和for都没有块级作用域，所以很多时候引入function的块级作用域
  25.     var btns = document.getElementsByTagName('button');
  26.     for(var i = 0;i<btns.length;i++){
  27.       (function (i) {
  28.         btns[i].addEventListener('click',function () {
  29.           console.log('第'+i+'个按钮被点击');
  30.         })
  31.       })(i)
  32.     }
  33.  
  34.     const btns = document.getElementsByTagName('button')
  35.     for(let i = 0;i<btns.length;i++){
  36.       btns[i].addEventListener('click',function () {
  37.         console.log('第'+i+'个按钮被点击');
  38.       })
  39.     }
  40. </script>
  41. </body>
  42. </html>

5、const 常量的定义

6、v-on的参数问题

  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.   <button @click="btnClick(abc, $event)">按钮</button>
  10. </div>
  11. <script src="../js/vue.js"></script>
  12. <script>
  13.   let app = new Vue({
  14.     el: '#app',
  15.     data: {//定义数据
  16.       message: '哪吒',
  17.       abc: 123
  18.     },
  19.     methods: {
  20.       btnClick(abc,event){
  21.         console.log(abc, event);
  22.       }
  23.     }
  24.   })
  25. </script>
  26. </body>
  27. </html>

7、v-on修饰符

  • stop - 调用 event.stopPropagation(),停止冒泡。
  • prevent - 阻止默认事件修饰符
  • capture - 添加事件侦听器时使用 capture 模式。
  • self - 只能在event.target是当前元素自身时触发处理函数
  • {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • native - 监听组件根元素的原生事件。
  • once - 使事件只能被触发一次
  • left - (2.2.0) 只当点击鼠标左键时触发。
  • right - (2.2.0) 只当点击鼠标右键时触发。
  • middle - (2.2.0) 只当点击鼠标中键时触发。
  • passive - (2.3.0) 以 { passive: true } 模式添加侦听器

8、v-if

  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.   <span v-if="isUser">
  10.     <label for="username">用户账号</label>
  11.     <input type="text" id="username" placeholder="用户账号" key="username">
  12.   </span>
  13.   <span v-else>
  14.     <label for="email">用户邮箱</label>
  15.     <input type="text" id="email" placeholder="用户邮箱"  key="email">
  16.   </span>
  17.   <button @click="isUser = !isUser">切换类型</button>
  18. </div>
  19.  
  20. <script src="../js/vue.js"></script>
  21. <script>
  22.   let app = new Vue({
  23.     el: '#app',
  24.     data: {//定义数据
  25.       message: '哪吒',
  26.       isUser: true
  27.     }
  28.   })
  29. </script>
  30. </body>
  31. </html>

注：通过key=username解决input复用问题，input复用机制是vue底层为了缓存而制定的策略。

9、v-show

10、v-for遍历对象

  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.   <ul>
  10.     <li v-for="item in user">{{item}}</li>
  11.   </ul>
  12.  
  13.   <ul>
  14.     <li v-for="(key, value) in user">{{key}}-{{value}}</li>
  15.   </ul>
  16. </div>
  17.  
  18. <script src="../js/vue.js"></script>
  19. <script>
  20.   let app = new Vue({
  21.     el: '#app',
  22.     data: {//定义数据
  23.       message: '哪吒',
  24.       user: {
  25.         name: '哪吒',
  26.         age: 18,
  27.         address: '大连'
  28.       }
  29.     }
  30.   })
  31. </script>
  32. </body>
  33. </html>

key的作用主要是为了高效的更新虚拟DOM。

11、哪些数组的方法是响应式的

  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.   <ul>
  10.     <li v-for="item in girls" :key="item">{{item}}</li>
  11.   </ul>
  12.   <button @click="btnClick">按钮</button>
  13. </div>
  14.  
  15. <script src="../js/vue.js"></script>
  16. <script>
  17.   let app = new Vue({
  18.     el: '#app',
  19.     data: {//定义数据
  20.       message: '哪吒',
  21.       girls: [
  22.           '比比东','云韵','美杜莎','雅妃'
  23.       ]
  24.     },
  25.     methods: {
  26.       // 响应式方法简介
  27.       btnClick(){
  28.         //1.push方法
  29.         this.girls.push('哪吒')
  30.         //2.pop()：删除数组中的最后一个元素
  31.         this.girls.pop()
  32.         //3.shift()：删除数组中的第一个元素
  33.         this.girls.shift()
  34.         //4.unshift()：在数组最前面添加元素
  35.         this.girls.unshift('哪吒')
  36.         this.girls.unshift('CSDN','哪吒')
  37.         //5.splice()：删除元素/插入元素/替换元素
  38.         //删除元素：第二个参数表示你要删除几个元素
  39.         //插入元素：第二个参数，传入0，后面加上要插入的元素
  40.         //替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面元素的新元素
  41.         //splice(start)
  42.         this.girls.splice(2,2,'无情','冷血')
  43.         //6.sort()
  44.         this.girls.sort()
  45.         //7.reverse()
  46.         this.girls.reverse()
  47.         //8.注意：通过索引值修改数组中的元素，不是响应式的
  48.         this.girls[0] = '云芝'
  49.         //9.set(要修改的元素，索引值，修改后的值)
  50.         Vue.set(this.girls,0,'云芝啊')
  51.       }
  52.     }
  53.   })
  54. </script>
  55. </body>
  56. </html>

非响应式“云芝”写入失败。

响应式，“云芝”写入成功

二、购物车综合案例

需求分析：通过动态加载数据，价格格式化展示，数量可增可减，可移除购物车，可清空购物车。

1、index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <link rel="stylesheet" href="style.css">
  7. </head>
  8. <body>
  9.   <div id="app">
  10.     <div v-if="girls.length">
  11.       <table>
  12.         <thead>
  13.         <tr>
  14.           <th></th>
  15.           <th>名字</th>
  16.           <th>年龄</th>
  17.           <th>价格</th>
  18.           <th>数量</th>
  19.           <th>技能</th>
  20.           <th>操作</th>
  21.         </tr>
  22.         </thead>
  23.         <tbody>
  24.         <tr v-for="(item,index) in girls">
  25.           <td>{{item.id}}</td>
  26.           <td>{{item.name}}</td>
  27.           <td>{{item.age}}</td>
  28.           <td>{{item.price | showPrice}}</td>
  29.           <td>
  30.             <button @click="decrement(index)"
  31.                     :disabled="item.count <= 1">-</button>
  32.             {{item.count}}
  33.             <button @click="increment(index)">+</button>
  34.           </td>
  35.           <td>{{item.skill}}</td>
  36.  
  37.           <td>
  38.             <button @click="removeHandler(index)">移除</button>
  39.           </td>
  40.         </tr>
  41.         </tbody>
  42.       </table>
  43.       <h2>总价格：{{totalPrice | showPrice}}</h2>
  44.     </div>
  45.     <h2 v-else>购物车为空</h2>
  46.   </div>
  47.   <script src="../js/vue.js"></script>
  48.   <script src="index.js"></script>
  49. </body>
  50. </html>

2、index.js

  1. const app = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     girls: [
  5.       {
  6.         id: 1,
  7.         name: '比比东',
  8.         age: 18,
  9.         count: 1,
  10.         skill: '不死之身',
  11.         price: 100.00
  12.       },{
  13.         id: 2,
  14.         name: '千仞雪',
  15.         age: 20,
  16.         count: 1,
  17.         skill: '天使圣剑',
  18.         price: 25.00
  19.       },{
  20.         id: 3,
  21.         name: '美杜莎',
  22.         age: 17,
  23.         count: 1,
  24.         skill: '美杜莎的凝望',
  25.         price: 19.00
  26.       },{
  27.         id: 4,
  28.         name: '云韵',
  29.         age: 25,
  30.         count: 1,
  31.         skill: '风之极陨杀',
  32.         price: 1999.99
  33.       },{
  34.         id: 5,
  35.         name: '雅妃',
  36.         age: 21,
  37.         count: 1,
  38.         skill: '红衣诱惑',
  39.         price: 68.00
  40.       }
  41.   ]
  42.   },
  43.   methods :{
  44.     increment(index){
  45.       this.girls[index].count++
  46.     },
  47.     decrement(index){
  48.       this.girls[index].count--
  49.     },
  50.     removeHandler(index){
  51.       this.girls.splice(index, 1)
  52.     }
  53.   },
  54.   computed: {
  55.     totalPrice(){
  56.       let totalPrice = 0;
  57.       for(let i=0;i<this.girls.length;i++){
  58.         totalPrice += this.girls[i].price * this.girls[i].count;
  59.       }
  60.       return totalPrice;
  61.     }
  62.   },
  63.   filters: {
  64.     showPrice(price) {
  65.       return '$' + price.toFixed(2)
  66.     }
  67.   }
  68. })

3、style.css

  1. table {
  2.   border: 1px solid #e9e9e9;
  3.   border-collapse: collapse;
  4.   border-spacing: 0;
  5. }
  6. th,td {
  7.   padding: 8px 16px;
  8.   border: 1px solid #e9e9e9;
  9.   text-align: left;
  10. }
  11.  
  12. th {
  13.   background-color: #f7f7f7;
  14.   color: #5c6b77;
  15.   font-weight: 600;
  16. }

4、实现效果

通过移除，清空购物车。 

🍅 作者简介：哪吒，CSDN2021博客之星亚军🏆、新星计划导师✌、博客专家💪

🍅 哪吒多年工作总结：

🍅 关注公众号【哪吒编程】，回复1024，获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步

上一篇：

下一篇：

关注公众号，备注1024，获取Java学习路线思维导图、加入万粉计划交流群 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发