企业管理系统定制开发Vue基础知识总结 4：vue组件化开发

🍅 作者简介：哪吒，CSDN2021企业管理系统定制开发博客之星亚军🏆、企业管理系统定制开发新星计划导师✌、博客专家💪

🍅 企业管理系统定制开发哪吒多年工作总结：

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

目录

一、企业管理系统定制开发函数式编程

1、函数式编程简介

函数式编程是种编程方式，它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算（lambda calculus），而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。

和指令式编程相比，函数式编程强调函数的计算比指令的执行重要。

和过程化编程相比，函数式编程里函数的计算可随时调用。

filter函数自动过滤对象的所有元素，返回true才会存入指定对象；

Reduce函数对数组内部的所有元素进行汇总；

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">
  9.   {{totalPrice()}}
  10. </div>
  11.  
  12. <script src="../js/vue.js"></script>
  13. <script>
  14.   const app = new Vue({
  15.     el: '#app',
  16.     data: {
  17.       message: '你好'
  18.     },
  19.     methods :{
  20.       totalPrice(){
  21.         const nums = [10,9,21,16,7]
  22.         let total = nums.filter(x => x<10).map(x => x*2).reduce((pre,n)=>pre+n);
  23.         console.log(total)
  24.         return total
  25.       }
  26.     }
  27.   })
  28. </script>
  29. </body>
  30. </html>

二、v-model

中经常使用到<input>和<textarea>这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

1、v-model双向绑定

<input type="text" v-model="message">

v-model动态双向绑定实现原理，本质上包含两个操作：

（1）v-bind绑定一个value属性

（2）v-on指令给当前元素绑定input事件

  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" :value="message" v-on:input="valueChange"> 
  10.   <input type="text" :value="message" @input="valueChange"> -->
  11.   <input type="text" :value="message" @input="message = $event.target.value">
  12.   {{message}}
  13. </div>
  14.  
  15. <script src="../js/vue.js"></script>
  16. <script>
  17.   const app = new Vue({
  18.     el: '#app',
  19.     data: {
  20.       message: '哪吒'
  21.     },
  22.     methods: {
  23.       valueChange(event){
  24.         this.message = event.target.value;
  25.       }
  26.     }
  27.   })
  28. </script>
  29. </body>
  30. </html>

2、v-model和radio结合使用

  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.   <label for="male">
  10.     <!-- <input type="radio"id="male" name="sex" value="男"
  11.            v-model="sex">男
  12.     <input type="radio"id="female" name="sex" value="女"
  13.            v-model="sex">女 -->
  14.     <input type="radio"id="male" value="男" v-model="sex">男
  15.     <input type="radio"id="female" value="女" v-model="sex">女
  16.   </label>
  17.   <h3>您选择的是：{{sex}}</h3>
  18. </div>
  19.  
  20. <script src="../js/vue.js"></script>
  21. <script>
  22.   const app = new Vue({
  23.     el: '#app',
  24.     data: {
  25.       message: '你好',
  26.       sex: '女'
  27.     }
  28.   })
  29. </script>
  30. </body>
  31. </html>

3、v-model和CheckBox单选框结合使用

  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.   <!-- checkbox单选框 -->
  10.   <label for="license">
  11.     <input type="checkbox"id="license" v-model="isAgree">同意协议
  12.   </label>
  13.   <h3>您选择的是：{{isAgree}}</h3>
  14.   <button :disabled="!isAgree">下一步</button>
  15. </div>
  16.  
  17. <script src="../js/vue.js"></script>
  18. <script>
  19.   const app = new Vue({
  20.     el: '#app',
  21.     data: {
  22.       message: '你好',
  23.       isAgree: false
  24.     }
  25.   })
  26. </script>
  27. </body>
  28. </html>

4、v-model和CheckBox多选框结合使用

  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.   <!-- checkbox多选框 -->
  10.   <input type="checkbox" value="比比东" v-model="girls">比比东
  11.   <input type="checkbox" value="千仞雪" v-model="girls">千仞雪
  12.   <input type="checkbox" value="美杜莎" v-model="girls">美杜莎
  13.   <input type="checkbox" value="云韵" v-model="girls">云韵
  14.   <input type="checkbox" value="雅妃" v-model="girls">雅妃
  15.   <h3>您选择的是：{{girls}}</h3>
  16. </div>
  17.  
  18. <script src="../js/vue.js"></script>
  19. <script>
  20.   const app = new Vue({
  21.     el: '#app',
  22.     data: {
  23.       message: '你好',
  24.       girls: []
  25.     }
  26.   })
  27. </script>
  28. </body>
  29. </html>

5、v-model结合select使用

  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.   <!-- 选择一个 -->
  10.   <select name="abc" v-model="girl">
  11.     <option value="云韵">云韵</option>
  12.     <option value="比比东">比比东</option>
  13.     <option value="雅妃">雅妃</option>
  14.     <option value="千仞雪">千仞雪</option>
  15.     <option value="美杜莎">美杜莎</option>
  16.   </select>
  17.   <h3>您的选择是：{{girl}}</h3>
  18. </div>
  19.  
  20. <script src="../js/vue.js"></script>
  21. <script>
  22.   const app = new Vue({
  23.     el: '#app',
  24.     data: {
  25.       message: '你好',
  26.       girl: '云韵'
  27.     }
  28.   })
  29. </script>
  30. </body>
  31. </html>

6、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.   <label v-for="item in beautyGirls" :for="item">
  10.     <input type="checkbox" :value="item"
  11.            :id="item" v-model="girls">{{item}}
  12.   </label>
  13.   <h3>您的选择是：{{girls}}</h3>
  14. </div>
  15.  
  16. <script src="../js/vue.js"></script>
  17. <script>
  18.   const app = new Vue({
  19.     el: '#app',
  20.     data: {
  21.       message: '你好',
  22.       girls: [],//多选框
  23.       beautyGirls: ["云韵","比比东","雅妃","纳兰嫣然","美杜莎"]
  24.     }
  25.   })
  26. </script>
  27. </body>
  28. </html>

7、v-model修饰符的使用

  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.   <!-- lazy懒加载，失去焦点时触发 -->
  10.   <input type="text" v-model.lazy="message">
  11.   <h2>{{message}}</h2>
  12.  
  13.   <!-- number:表示数字类型 -->
  14.   <input type="number" v-model.number="age">
  15.   <h2>{{age}} --> {{typeof age}}</h2>
  16.  
  17.   <!-- 去掉左右两边的控股 -->
  18.   <input type="text" v-model.trim="name">
  19.   <h2>{{name}}</h2>
  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.       age: 0,
  29.       name: '哪吒'
  30.     }
  31.   })
  32. </script>
  33. </body>
  34. </html>

三、组件化开发

组件是Vue.js​中重要思想

  • 它提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用组件
  • 可以扩展 HTML 元素，封装可重用的代码
  • 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

组件化思想应用 

  • 有了组件化的思想, 我们之后开发中就要充分的利用它
  • 尽可能将页面拆分成一个个小的, 可复用的组件
  • 这样让我们代码更方便组织和管理, 并且扩展性也强

1、全局组件

  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.   <my-cpn></my-cpn>
  10. </div>
  11.  
  12. <script src="../js/vue.js"></script>
  13. <script>
  14.  
  15.   //1.创建组件化构造器对象
  16.   const cpnC = Vue.extend({
  17.     template: `
  18.       <div>
  19.         <h2>我是标题</h2>
  20.         <p>我是CSDN哪吒</p>
  21.       </div>
  22.       `
  23.   })
  24.  
  25.   //2.注册组件
  26.   Vue.component('my-cpn',cpnC)
  27.  
  28.   const app = new Vue({
  29.     el: '#app',
  30.     data: {
  31.       message: '你好'
  32.     }
  33.   })
  34. </script>
  35. </body>
  36. </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">
  9.   <cpn></cpn>
  10. </div>
  11.  
  12. <script src="../js/vue.js"></script>
  13. <script>
  14.  
  15.   //1.创建组件化构造器对象
  16.   const cpnC = Vue.extend({
  17.     template: `
  18.       <div>
  19.         <h2>我是标题</h2>
  20.         <p>我是CSDN哪吒</p>
  21.       </div>
  22.       `
  23.   })
  24.  
  25.   const app = new Vue({
  26.     el: '#app',
  27.     data: {
  28.       message: '你好'
  29.     },
  30.     components: {
  31.       cpn: cpnC
  32.     }
  33.   })
  34. </script>
  35. </body>
  36. </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">
  9.   <cpn2></cpn2>
  10. </div>
  11.  
  12. <script src="../js/vue.js"></script>
  13. <script>
  14.  
  15.   //1.创建组件化构造器对象
  16.   const cpnC1 = Vue.extend({
  17.     template: `
  18.       <div>
  19.         <h2>我是标题1</h2>
  20.         <p>我是CSDN哪吒</p>
  21.       </div>
  22.       `
  23.   })
  24.  
  25.   const cpnC2 = Vue.extend({
  26.     template: `
  27.       <div>
  28.         <h2>我是标题2</h2>
  29.         <p>我是博客专家</p>
  30.         <cpn1></cpn1>
  31.       </div>
  32.       `,
  33.     components: {
  34.       cpn1: cpnC1
  35.     }
  36.   })
  37.  
  38.   const app = new Vue({
  39.     el: '#app',
  40.     data: {
  41.       message: '你好'
  42.     },
  43.     components: {
  44.       cpn2: cpnC2
  45.     }
  46.   })
  47. </script>
  48. </body>
  49. </html>

4、组件化语法糖写法

vue为了简化注册组件的过程，提供了语法糖的写法，主要是省去了调用Vue.extend()的步骤，直接使用一个对象替代。

  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.   <my-cpn></my-cpn>
  10. </div>
  11.  
  12. <script src="../js/vue.js"></script>
  13. <script>
  14.   //注册组件语法糖写法
  15.   Vue.component('my-cpn',{
  16.     template: `
  17.       <div>
  18.         <h2>我是标题</h2>
  19.         <p>我是CSDN哪吒</p>
  20.       </div>
  21.       `
  22.   })
  23.  
  24.   const app = new Vue({
  25.     el: '#app',
  26.     data: {
  27.       message: '你好'
  28.     }
  29.   })
  30. </script>
  31. </body>
  32. </html>

5、组件模板抽离写法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <div id="app">
  10.   <cpn></cpn>
  11.   <cpn></cpn>
  12.   <cpn></cpn>
  13. </div>
  14.  
  15. <!--1.script标签, 注意:类型必须是text/x-template-->
  16. <!--<script type="text/x-template" id="cpn">-->
  17. <!--<div>-->
  18. <!--<h2>我是标题</h2>-->
  19. <!--<p>我是CSDN哪吒</p>-->
  20. <!--</div>-->
  21. <!--</script>-->
  22.  
  23. <!--2.template标签-->
  24. <template id="cpn">
  25.   <div>
  26.     <h2>我是标题</h2>
  27.     <p>我是CSDN哪吒</p>
  28.   </div>
  29. </template>
  30.  
  31. <script src="../js/vue.js"></script>
  32. <script>
  33.  
  34.   // 1.注册一个全局组件
  35.   Vue.component('cpn', {
  36.     template: '#cpn'
  37.   })
  38.  
  39.   const app = new Vue({
  40.     el: '#app',
  41.     data: {
  42.       message: '你好啊'
  43.     }
  44.   })
  45. </script>
  46.  
  47. </body>
  48. </html>

四、组件可以访问Vue实例数据吗？

1、简介

实验发现，组件不能访问Vue实例数据，而且即便可以访问，如果将所有的数据都放在Vue实例中，Vue实例就会变得非常臃肿。

Vue组件应该有自己保存数据的地方。

组件自己的数据存放在哪里？

  • 组件对象也有一个data属性（也有method等属性）；
  • 只是这个data属性必须是一个函数；
  • 而且这个函数返回一个对象，对象内部保存着数据；

2、代码实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <div id="app">
  10.   <cpn></cpn>
  11. </div>
  12. <template id="cpn">
  13.   <div>
  14.     <h2>{{title}}</h2>
  15.     <p>我是热门</p>
  16.   </div>
  17. </template>
  18.  
  19. <script src="../js/vue.js"></script>
  20. <script>
  21.  
  22.   // 1.注册一个全局组件
  23.   Vue.component('cpn', {
  24.     template: '#cpn',
  25.     data() {
  26.       return {
  27.         title: '哪吒必胜'
  28.       }
  29.     }
  30.   })
  31.  
  32.   const app = new Vue({
  33.     el: '#app',
  34.     data: {
  35.       message: '你好',
  36.       // title: '我是标题'
  37.     }
  38.   })
  39. </script>
  40.  
  41. </body>
  42. </html>

3、效果展示 

五、父子组件通信

1、父子组件通信简介

在开发中，往往一些数据确实需要从上层传递到下层：

比如在一个页面中，我们从服务器请求到了很多的数据。

其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。

这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。

如何进行父子组件间的通信呢？Vue官方提到：

通过props向子组件传递数据

通过事件向父组件发送消息

在组件中，使用选项props来声明需要从父级接收到的数据。

props的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的名称。

方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

2、父传子代码实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <div id="app">
  10.   <!--<cpn v-bind:cgirls="girls"></cpn>-->
  11.   <!--<cpn cgirls="girls" cmessage="message"></cpn>-->
  12.  
  13.   <cpn :cmessage="message" :cgirls="girls"></cpn>
  14. </div>
  15.  
  16. <template id="cpn">
  17.   <div>
  18.     <ul>
  19.       <li v-for="item in cgirls">{{item}}</li>
  20.     </ul>
  21.     <h2>{{cmessage}}</h2>
  22.   </div>
  23. </template>
  24.  
  25. <script src="../js/vue.js"></script>
  26. <script>
  27.   // 父传子: props
  28.   const cpn = {
  29.     template: '#cpn',
  30.     // props: ['cgirls', 'cmessage'],
  31.     props: {
  32.       // 1.类型限制
  33.       // cgirls: Array,
  34.       // cmessage: String,
  35.  
  36.       // 2.提供一些默认值, 以及必传值
  37.       cmessage: {
  38.         type: String,
  39.         default: 'aaaaaaaa',
  40.         required: true
  41.       },
  42.       // 类型是对象或者数组时, 默认值必须是一个函数
  43.       cgirls: {
  44.         type: Array,
  45.         default() {
  46.           return []
  47.         }
  48.       }
  49.     },
  50.     data() {
  51.       return {}
  52.     },
  53.     methods: {
  54.  
  55.     }
  56.   }
  57.  
  58.   const app = new Vue({
  59.     el: '#app',
  60.     data: {
  61.       message: 'CSDN哪吒',
  62.       girls: ['云韵', '比比东', '雅妃']
  63.     },
  64.     components: {
  65.       cpn
  66.     }
  67.   })
  68. </script>
  69. </body>
  70. </html>

3、父传子效果展示 

4、props中的驼峰标识

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <div id="app">
  10.   <cpn :c-info="info" :child-my-message="message" v-bind:class></cpn>
  11. </div>
  12.  
  13. <template id="cpn">
  14.   <div>
  15.     <h2>{{cInfo}}</h2>
  16.     <h2>{{childMyMessage}}</h2>
  17.   </div>
  18. </template>
  19.  
  20. <script src="../js/vue.js"></script>
  21. <script>
  22.   const cpn = {
  23.     template: '#cpn',
  24.     props: {
  25.       cInfo: {
  26.         type: Object,
  27.         default() {
  28.           return {}
  29.         }
  30.       },
  31.       childMyMessage: {
  32.         type: String,
  33.         default: ''
  34.       }
  35.     }
  36.   }
  37.  
  38.   const app = new Vue({
  39.     el: '#app',
  40.     data: {
  41.       info: {
  42.         name: '哪吒',
  43.         age: 18,
  44.         height: 1.88
  45.       },
  46.       message: 'csdn博客专家'
  47.     },
  48.     components: {
  49.       cpn
  50.     }
  51.   })
  52. </script>
  53.  
  54. </body>
  55. </html>

效果展示 

5、子传父（自定义事件方式）

自定义事件方式完成子传父。

什么时候需要自定义事件呢？

当子组件需要向父组件传递数据时，就要用到自定义事件了。

我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。

自定义事件的流程：

  1. 在子组件中，通过$emit()来触发事件。
  2. 在父组件中，通过v-on来监听子组件事件。

6、子传父代码实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <!--父组件模板-->
  10. <div id="app">
  11.   <cpn @item-click="cpnClick"></cpn>
  12. </div>
  13.  
  14. <!--子组件模板-->
  15. <template id="cpn">
  16.   <div>
  17.     <button v-for="item in categories"
  18.             @click="btnClick(item)">
  19.       {{item.name}}
  20.     </button>
  21.   </div>
  22. </template>
  23.  
  24. <script src="../js/vue.js"></script>
  25. <script>
  26.  
  27.   // 1.子组件
  28.   const cpn = {
  29.     template: '#cpn',
  30.     data() {
  31.       return {
  32.         categories: [
  33.           {id: '1', name: '云韵'},
  34.           {id: '2', name: '比比东'},
  35.           {id: '3', name: '雅妃'},
  36.           {id: '4', name: '纳兰嫣然'},
  37.         ]
  38.       }
  39.     },
  40.     methods: {
  41.       btnClick(item) {
  42.         // 发射事件: 自定义事件
  43.         this.$emit('item-click', item)
  44.       }
  45.     }
  46.   }
  47.  
  48.   // 2.父组件
  49.   const app = new Vue({
  50.     el: '#app',
  51.     data: {
  52.       message: 'csdn哪吒'
  53.     },
  54.     components: {
  55.       cpn
  56.     },
  57.     methods: {
  58.       cpnClick(item) {
  59.         console.log('cpnClick', item);
  60.       }
  61.     }
  62.   })
  63. </script>
  64.  
  65. </body>
  66. </html>

7、子传父效果展示

上一篇：

下一篇：

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

🍅 哪吒多年工作总结：

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

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

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