【Vue知识体系总结 4】Vue组件化开发-蒲公英云

一、函数式编程

1、函数式编程简介

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

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

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

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

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

2、代码实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  {
   {totalPrice()}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    methods :{
      totalPrice(){
        const nums = [10,9,21,16,7]
        let total = nums.filter(x => x<10).map(x => x*2).reduce((pre,n)=>pre+n);
        console.log(total)
        return total
      }
    }
  })
</script>
</body>
</html>

二、v-model

vue中经常使用到和这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。</p> <h3 id="h3-1-v-model-"><a name="1、v-model双向绑定" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、v-model双向绑定</h3><pre><code><input type="text" v-model="message"> </code></pre><p>v-model动态双向绑定实现原理，本质上包含两个操作：</p> <p>（1）v-bind绑定一个value属性</p> <p>（2）v-on指令给当前元素绑定input事件</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">  <input type="text" :value="message" @input="message = $event.target.value"> { {message}} </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '哪吒' }, methods: { valueChange(event){ this.message = event.target.value; } } }) </script> </body> </html> </code></pre><h3 id="h3-2-v-model-radio-"><a name="2、v-model和radio结合使用" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、v-model和radio结合使用</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <label for="male">  <input type="radio"id="male" value="男" v-model="sex">男 <input type="radio"id="female" value="女" v-model="sex">女 </label> <h3>您选择的是：{ {sex}}</h3> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好', sex: '女' } }) </script> </body> </html> </code></pre><p><img src="https://image.dandelioncloud.cn/images/20210813/4bb23aebef6749608ea4e392ca301ba8.png" alt="2021072123391117.png"></p> <h3 id="h3-3-v-model-checkbox-"><a name="3、v-model和CheckBox单选框结合使用" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、v-model和CheckBox单选框结合使用</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">  <label for="license"> <input type="checkbox"id="license" v-model="isAgree">同意协议 </label> <h3>您选择的是：{ {isAgree}}</h3> <button :disabled="!isAgree">下一步</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好', isAgree: false } }) </script> </body> </html> </code></pre><p><img src="https://image.dandelioncloud.cn/images/20210813/c04de393926b46ee9c8181672658fee7.png" alt="watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70"></p> <h3 id="h3-4-v-model-checkbox-"><a name="4、v-model和CheckBox多选框结合使用" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4、v-model和CheckBox多选框结合使用</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">  <input type="checkbox" value="比比东" v-model="girls">比比东 <input type="checkbox" value="千仞雪" v-model="girls">千仞雪 <input type="checkbox" value="美杜莎" v-model="girls">美杜莎 <input type="checkbox" value="云韵" v-model="girls">云韵 <input type="checkbox" value="雅妃" v-model="girls">雅妃 <h3>您选择的是：{ {girls}}</h3> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好', girls: [] } }) </script> </body> </html> </code></pre><p><img src="https://image.dandelioncloud.cn/images/20210813/36a3eccf86ec42bcbf6f93c2c3c003bf.png" alt="20210721234106837.png"></p> <h3 id="h3-5-v-model-select-"><a name="5、v-model结合select使用" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5、v-model结合select使用</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">  <select name="abc" v-model="girl"> <option value="云韵">云韵</option> <option value="比比东">比比东</option> <option value="雅妃">雅妃</option> <option value="千仞雪">千仞雪</option> <option value="美杜莎">美杜莎</option> </select> <h3>您的选择是：{ {girl}}</h3> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好', girl: '云韵' } }) </script> </body> </html> </code></pre><p><img src="https://image.dandelioncloud.cn/images/20210813/eade77b0b79b461c99ca6532660e69ce.png" alt="20210721234136352.png"></p> <h3 id="h3-6-v-for-"><a name="6、v-for值绑定" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6、v-for值绑定</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <label v-for="item in beautyGirls" :for="item"> <input type="checkbox" :value="item" :id="item" v-model="girls">{ {item}} </label> <h3>您的选择是：{ {girls}}</h3> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好', girls: [],//多选框 beautyGirls: ["云韵","比比东","雅妃","纳兰嫣然","美杜莎"] } }) </script> </body> </html> </code></pre><p><img src="https://image.dandelioncloud.cn/images/20210813/0e20348450304615a2e53f994e79df2e.png" alt="20210721234224977.png"></p> <h3 id="h3-7-v-model-"><a name="7、v-model修饰符的使用" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7、v-model修饰符的使用</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">  <input type="text" v-model.lazy="message"> <h2>{ {message}}</h2>  <input type="number" v-model.number="age"> <h2>{ {age}} --> { {typeof age}}</h2>  <input type="text" v-model.trim="name"> <h2>{ {name}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '哪吒', age: 0, name: '哪吒' } }) </script> </body> </html> </code></pre><h2 id="h2--"><a name="三、组件化开发" class="reference-link"></a><span class="header-link octicon octicon-link"></span>三、组件化开发</h2><p>组件是Vue.js中重要思想</p> <ul> <li>它提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用组件</li><li>可以扩展 HTML 元素，封装可重用的代码</li><li>组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树</li></ul> <p>组件化思想应用 </p> <ul> <li>有了组件化的思想, 我们之后开发中就要充分的利用它</li><li>尽可能将页面拆分成一个个小的, 可复用的组件</li><li>这样让我们代码更方便组织和管理, 并且扩展性也强</li></ul> <h3 id="h3-1-"><a name="1、全局组件" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、全局组件</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <my-cpn></my-cpn> </div> <script src="../js/vue.js"></script> <script> //1.创建组件化构造器对象 const cpnC = Vue.extend({ template: ` <div> <h2>我是标题</h2> <p>我是CSDN哪吒</p> </div> ` }) //2.注册组件 Vue.component('my-cpn',cpnC) const app = new Vue({ el: '#app', data: { message: '你好' } }) </script> </body> </html> </code></pre><h3 id="h3-2-"><a name="2、局部组件" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、局部组件</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> </div> <script src="../js/vue.js"></script> <script> //1.创建组件化构造器对象 const cpnC = Vue.extend({ template: ` <div> <h2>我是标题</h2> <p>我是CSDN哪吒</p> </div> ` }) const app = new Vue({ el: '#app', data: { message: '你好' }, components: { cpn: cpnC } }) </script> </body> </html> </code></pre><p><img src="https://image.dandelioncloud.cn/images/20210813/5624f55eb32c4bdfa6d2ad5a496f781c.png" alt="2021072123435438.png"></p> <h3 id="h3-3-"><a name="3、父子组件" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、父子组件</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn2></cpn2> </div> <script src="../js/vue.js"></script> <script> //1.创建组件化构造器对象 const cpnC1 = Vue.extend({ template: ` <div> <h2>我是标题1</h2> <p>我是CSDN哪吒</p> </div> ` }) const cpnC2 = Vue.extend({ template: ` <div> <h2>我是标题2</h2> <p>我是博客专家</p> <cpn1></cpn1> </div> `, components: { cpn1: cpnC1 } }) const app = new Vue({ el: '#app', data: { message: '你好' }, components: { cpn2: cpnC2 } }) </script> </body> </html> </code></pre><p><img src="https://image.dandelioncloud.cn/images/20210813/89ff0e214ed54fbba61ef3cb5cdd135a.png" alt="watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 1"></p> <h3 id="h3-4-"><a name="4、组件化语法糖写法" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4、组件化语法糖写法</h3><p>vue为了简化注册组件的过程，提供了语法糖的写法，主要是省去了调用Vue.extend()的步骤，直接使用一个对象替代。</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <my-cpn></my-cpn> </div> <script src="../js/vue.js"></script> <script> //注册组件语法糖写法 Vue.component('my-cpn',{ template: ` <div> <h2>我是标题</h2> <p>我是CSDN哪吒</p> </div> ` }) const app = new Vue({ el: '#app', data: { message: '你好' } }) </script> </body> </html> </code></pre><h3 id="h3-5-"><a name="5、组件模板抽离写法" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5、组件模板抽离写法</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div>         <template id="cpn"> <div> <h2>我是标题</h2> <p>我是CSDN哪吒</p> </div> </template> <script src="../js/vue.js"></script> <script> // 1.注册一个全局组件 Vue.component('cpn', { template: '#cpn' }) const app = new Vue({ el: '#app', data: { message: '你好啊' } }) </script> </body> </html> </code></pre><h2 id="h2--vue-"><a name="四、组件可以访问Vue实例数据吗？" class="reference-link"></a><span class="header-link octicon octicon-link"></span>四、组件可以访问Vue实例数据吗？</h2><h3 id="h3-1-"><a name="1、简介" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、简介</h3><p>实验发现，组件不能访问Vue实例数据，而且即便可以访问，如果将所有的数据都放在Vue实例中，Vue实例就会变得非常臃肿。</p> <p>Vue组件应该有自己保存数据的地方。</p> <p>组件自己的数据存放在哪里？</p> <ul> <li>组件对象也有一个data属性（也有method等属性）；</li><li>只是这个data属性必须是一个函数；</li><li>而且这个函数返回一个对象，对象内部保存着数据；</li></ul> <h3 id="h3-2-"><a name="2、代码实例" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、代码实例</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> </div> <template id="cpn"> <div> <h2>{ {title}}</h2> <p>我是热门</p> </div> </template> <script src="../js/vue.js"></script> <script> // 1.注册一个全局组件 Vue.component('cpn', { template: '#cpn', data() { return { title: '哪吒必胜' } } }) const app = new Vue({ el: '#app', data: { message: '你好', // title: '我是标题' } }) </script> </body> </html> </code></pre><h3 id="h3-3-"><a name="3、效果展示" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、效果展示</h3><p><img src="https://image.dandelioncloud.cn/images/20210813/2acedb65bdc344f7b60b5f54035310cf.png" alt="20210721234530265.png"></p> <h2 id="h2--"><a name="五、父子组件通信" class="reference-link"></a><span class="header-link octicon octicon-link"></span>五、父子组件通信</h2><h3 id="h3-1-"><a name="1、父子组件通信简介" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、父子组件通信简介</h3><p>在开发中，往往一些数据确实需要从上层传递到下层：</p> <p>比如在一个页面中，我们从服务器请求到了很多的数据。</p> <p>其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。</p> <p>这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。</p> <p>如何进行父子组件间的通信呢？Vue官方提到：</p> <p>通过props向子组件传递数据</p> <p>通过事件向父组件发送消息</p> <p><img src="https://image.dandelioncloud.cn/images/20210813/1ba97f2f40cc486fa23cd0ffcdd3ea6e.png" alt="watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 2"></p> <p>在组件中，使用选项props来声明需要从父级接收到的数据。</p> <p>props的值有两种方式：</p> <p>方式一：字符串数组，数组中的字符串就是传递时的名称。</p> <p>方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。</p> <h3 id="h3-2-"><a name="2、父传子代码实例" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、父传子代码实例</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">   <cpn :cmessage="message" :cgirls="girls"></cpn> </div> <template id="cpn"> <div> <ul> <li v-for="item in cgirls">{ {item}}</li> </ul> <h2>{ {cmessage}}</h2> </div> </template> <script src="../js/vue.js"></script> <script> // 父传子: props const cpn = { template: '#cpn', // props: ['cgirls', 'cmessage'], props: { // 1.类型限制 // cgirls: Array, // cmessage: String, // 2.提供一些默认值, 以及必传值 cmessage: { type: String, default: 'aaaaaaaa', required: true }, // 类型是对象或者数组时, 默认值必须是一个函数 cgirls: { type: Array, default() { return [] } } }, data() { return {} }, methods: { } } const app = new Vue({ el: '#app', data: { message: 'CSDN哪吒', girls: ['云韵', '比比东', '雅妃'] }, components: { cpn } }) </script> </body> </html> </code></pre><h3 id="h3-3-"><a name="3、父传子效果展示" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、父传子效果展示</h3><p><img src="https://image.dandelioncloud.cn/images/20210813/7a2a318fb98c49a1bf84a8de17b0a775.png" alt="watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 3"></p> <h3 id="h3-4-props-"><a name="4、props中的驼峰标识" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4、props中的驼峰标识</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn :c-info="info" :child-my-message="message" v-bind:class></cpn> </div> <template id="cpn"> <div> <h2>{ {cInfo}}</h2> <h2>{ {childMyMessage}}</h2> </div> </template> <script src="../js/vue.js"></script> <script> const cpn = { template: '#cpn', props: { cInfo: { type: Object, default() { return {} } }, childMyMessage: { type: String, default: '' } } } const app = new Vue({ el: '#app', data: { info: { name: '哪吒', age: 18, height: 1.88 }, message: 'csdn博客专家' }, components: { cpn } }) </script> </body> </html> </code></pre><p>效果展示 </p> <p><img src="https://image.dandelioncloud.cn/images/20210813/afb5ce9e039f4e13bc78e976b0974c9f.png" alt="20210721234659127.png"></p> <h3 id="h3-5-"><a name="5、子传父（自定义事件方式）" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5、子传父（自定义事件方式）</h3><p>自定义事件方式完成子传父。</p> <p>什么时候需要自定义事件呢？</p> <p>当子组件需要向父组件传递数据时，就要用到自定义事件了。</p> <p>我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。</p> <p>自定义事件的流程：</p> <ol> <li>在子组件中，通过$emit()来触发事件。</li><li>在父组件中，通过v-on来监听子组件事件。</li></ol> <h3 id="h3-6-"><a name="6、子传父代码实例" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6、子传父代码实例</h3><pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>  <div id="app"> <cpn @item-click="cpnClick"></cpn> </div>  <template id="cpn"> <div> <button v-for="item in categories" @click="btnClick(item)"> { {item.name}} </button> </div> </template> <script src="../js/vue.js"></script> <script> // 1.子组件 const cpn = { template: '#cpn', data() { return { categories: [ {id: '1', name: '云韵'}, {id: '2', name: '比比东'}, {id: '3', name: '雅妃'}, {id: '4', name: '纳兰嫣然'}, ] } }, methods: { btnClick(item) { // 发射事件: 自定义事件 this.$emit('item-click', item) } } } // 2.父组件 const app = new Vue({ el: '#app', data: { message: 'csdn哪吒' }, components: { cpn }, methods: { cpnClick(item) { console.log('cpnClick', item); } } }) </script> </body> </html> </code></pre><h3 id="h3-7-"><a name="7、子传父效果展示" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7、子传父效果展示</h3><p><img src="https://image.dandelioncloud.cn/images/20210813/b834550838ea48efb58beb8e4f1785f3.png" alt="202107212347385.png"></p> <p>上一篇：【Vue知识体系总结 3】Vue常用标签</p> <p>下一篇：【Vue基础知识总结 5】Vue实现树形结构</p> <p>本期特别推荐：MySql知识体系总结（SQL优化篇）</p> <p>往期精彩内容：</p> <p>Java知识体系总结</p> <p>Spring框架总结</p> <p>超详细的springBoot学习笔记</p> <p>常见数据结构与算法整理总结</p> <p>Java设计模式：23种设计模式全面解析</p> <p>Java面试题总结（附答案）</p> <p>MySql知识体系总结</p> <p>Linux知识体系总结</p> <p>Redis知识体系总结</p>