• 技术文章 >web前端 >Vue.js

    Vue基础知识总结之vue组件化开发

    WBOYWBOY2022-08-10 09:56:11转载266
    本篇文章给大家带来了关于vue其中主要介绍了关于vue组件化开发的相关问题，组件化开发提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用组件，下面一起来看一下，希望对大家有帮助。

    大前端成长进阶课程：进入学习

    【相关推荐：javascript视频教程、web前端】

    一、函数式编程

    1、函数式编程简介

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

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

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

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

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

    2、代码实例

    <!DOCTYPE html>
<html>
<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中经常使用到<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事件

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- <input type="text" :value="message" v-on:input="valueChange"> 
  <input type="text" :value="message" @input="valueChange"> -->
  <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>

    2、v-model和radio结合使用

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label for="male">
    <!-- <input type="radio"id="male" name="sex" value="男"
           v-model="sex">男
    <input type="radio"id="female" name="sex" value="女"
           v-model="sex">女 -->
    <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>

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

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- checkbox单选框 -->
  <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>

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

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- checkbox多选框 -->
  <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>

    5、v-model结合select使用

    <!DOCTYPE html>
<html>
<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>

    6、v-for值绑定

    <!DOCTYPE html>
<html>
<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>

    7、v-model修饰符的使用

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- lazy懒加载，失去焦点时触发 -->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>
 
  <!-- number:表示数字类型 -->
  <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>

    三、组件化开发

    组件是Vue.js中重要思想

    组件化思想应用

    1、全局组件

    <!DOCTYPE html>
<html>
<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>

    2、局部组件

    <!DOCTYPE html>
<html>
<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>

    3、父子组件

    <!DOCTYPE html>
<html>
<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>

    4、组件化语法糖写法

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

    <!DOCTYPE html>
<html>
<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>

    5、组件模板抽离写法

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
 
<!--1.script标签, 注意:类型必须是text/x-template-->
<!--<script type="text/x-template" id="cpn">-->
<!--<div>-->
<!--<h2>我是标题</h2>-->
<!--<p>我是CSDN哪吒</p>-->
<!--</div>-->
<!--</script>-->
 
<!--2.template标签-->
<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>

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

    1、简介

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

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

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

    2、代码实例

    <!DOCTYPE html>
<html>
<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>

    3、效果展示

    五、父子组件通信

    1、父子组件通信简介

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

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

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

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

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

    通过props向子组件传递数据

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

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

    props的值有两种方式：

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

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

    2、父传子代码实例

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<div id="app">
  <!--<cpn v-bind:cgirls="girls"></cpn>-->
  <!--<cpn cgirls="girls" cmessage="message"></cpn>-->
 
  <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>

    3、父传子效果展示

    4、props中的驼峰标识

    <!DOCTYPE html>
<html>
<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>

    效果展示

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

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

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

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

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

    自定义事件的流程：

    6、子传父代码实例

    <!DOCTYPE html>
<html>
<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>

    7、子传父效果展示

    【相关推荐：javascript视频教程、web前端】

    以上就是Vue基础知识总结之vue组件化开发的详细内容，更多请关注php中文网其它相关文章！

    声明：本文转载于：CSDN，如有侵犯，请联系admin@php.cn删除

    前端(VUE)零基础到就业课程：点击学习

    清晰的学习路线+老师随时辅导答疑

    快捷开发Web应用及小程序：点击使用

    支持亿级表，高并发，自动生成可视化后台。

    专题推荐：Vue
    上一篇：深析axios全局配置、拦截器和proxy跨域代理（图文） 下一篇：自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程，总价3725元，会员免费学• ❤️‍🔥接口自动化测试不想写代码？• 深入解析Vue的计算属性API（computed）• 一文详解Vue中watch和watchEffect的区别• VUE实例解析之mount实例挂载的实现• vue3 axios的使用介绍及数据渲染• vue数据双向绑定与vue.config.js文件配置详解
    1/1

    PHP中文网

    首页 首页课程 课程文章文章问答 问答博客博客词典 词典手册 手册资源 资源搜索 搜索APP下载 APP下载