07-Vue组件化

已于 2022-09-13 16:40:13 修改
阅读量128 收藏
点赞数
分类专栏： VueJs 文章标签： vue.js javascript 前端
于 2021-07-14 16:57:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41863998/article/details/118729030
版权

1.0 Vue组件的简单使用

  • 创建组件构造器对象：Vue.extend；创建完组件构造器时，通常使用template定义我自己的组件模板；这种定义模板的方式只限在Vue2.x里面使用
  • 注册组件：Vue.component；需要传递两个参数：1.注册组件的标签名 2.组件构造器
  • 使用组件：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--3.使用组件-->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
</div>

<script src="../js/vue.js"></script>
<script>
  //1.创建组件构造器对象
  const cpnc = Vue.extend({
    template: `
        <div>
          <h2>我是中国人</h2>
          <p>中国的红色革命</p>
          <p>中国的快速崛起</p>
        </div>`
  });

  //2.注册组件
  Vue.component('my-cpn',cpnc);

  const app = new Vue ({
    el: '#app',
    data: {
      message: '中国人'
    }
  });
</script>
</body>
</html>

2.0 Vue的全局组件和局部组件

  • 局部组件直接在Vue实例中使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app1" style="border: 1px cornflowerblue solid;">
  <!--3.使用组件-->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
</div>

<div id="app2" style="border: 1px crimson solid;">
  <!--3.使用组件-->
  <cpn></cpn>
</div>
<script src="../js/vue.js"></script>
<script>
  //1.创建组件构造器对象
  const cpnc = Vue.extend({
    template: `
        <div>
          <h2>我是中国人</h2>
          <p>中国的红色革命</p>
          <p>中国的快速崛起</p>
        </div>`
  });
  const cpne = Vue.extend({
    template: `
        <div>
          <h2>我是中国人</h2>
          <p>中国的红色革命</p>
          <p>中国的快速崛起</p>
        </div>`
  });

  //2.0.注册全局组件,在使用全局组件的时候不能单独使用，必须给Vue对象指定标签
  Vue.component('my-cpn',cpnc);
  const app1 = new Vue ({
    el: '#app1',
    data: {
      message: '中国人'
    }
  });

  //2.1.注册局部组件
  const app2 = new Vue ({
    el: '#app2',
    data: {
      message: '中国人'
    },
    components:{
      cpn: cpne
    }
  });
</script>
</body>
</html>

3.0 Vue父组件和子组件

  • 当父组件使用子组件的时候自己必须使用子组件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpnc2></cpnc2>
</div>

<script src="../js/vue.js"></script>
<script>
  const cpnc1 = Vue.extend({
    template: `
        <div>
          <h2>你是儿子</h2>
          <p>中国的红色革命</p>
          <p>中国的快速崛起</p>
        </div>`
  });

  const cpnc2 = Vue.extend({
    template: `
        <div>
          <h2>我是爸爸</h2>
          <p>中国的红色革命</p>
          <p>中国的快速崛起</p>
          <cpnc1></cpnc1>
        </div>`,
    components:{
      cpnc1: cpnc1
    }
  });

  const app = new Vue ({
    el: '#app',
    data: {
      message: '中国人'
    },
    components:{
      cpnc2: cpnc2
    }
  });
</script>
</body>
</html>

Vue组件语法糖

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
  <cpc></cpc>
</div>

<script src="../js/vue.js"></script>
<script>
  //1.注册全局组件的语法糖
  Vue.component('my-cpn',{
    template: `
        <div>
          <h2>我是中国人</h2>
          <p>中国的红色革命</p>
          <p>中国的快速崛起</p>
        </div>`
  });

  //2.注册局部组件的语法糖
  const app = new Vue ({
    el: '#app',
    data: {
      message: '中国人'
    },
    components:{
      cpc:{
        template: `
        <div>
          <h2>我是中国人</h2>
          <p>中国的红色革命</p>
          <p>中国的快速崛起</p>
        </div>`
      }
    }
  });
</script>
</body>
</html>

Vue组件中的数据存放问题

<!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>{{message}}</h2>
    <p>我是内容，hehehe..</p>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  //1.注册全局组件的语法糖
  Vue.component('cpn',{
    template: '#cpn',
    message:'等你电话'
  });

  //2.注册局部组件的语法糖
  const app = new Vue ({
    el: '#app',
    data: {
      message: '中国人'
    }
  });
</script>
</body>
</html>

Vue为什么data必须返回的是函数

  • 每一个函数都会在data里面划分一块内存区域；这样做的好处是，当组件到多个地方使用的时候，数据不会因为一个动作改变了而产生其它地方数据改变了
  • 如果想以前Vue中定义属性，就会出现数据因为一个动作变了，其它地方也变了；这是因为一个属性只划分一个内存区域，大家都在一起使用它
<!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>当前计数：{{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  //1.注册全局组件
  Vue.component('cpn',{
    template:'#cpn',
    data(){
      return{
        counter: 0
      }
    },
    methods:{
      increment(){
        this.counter++
      },
      decrement(){
        this.counter--
      }
    }
  })

  const app= new Vue ({
    el: '#app',
    data: {
      message: '你是猪吗？？？'
    }
  })
</script>
</body>
</html>

父子通信，父传子

  • 儿子想要用父亲的东西必须定义一样的函数去接
  • 关键函数properties（简写：props）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--数组写法-->
    <!--<cpn v-bind:cmessage="message" :cmovies="movies"></cpn>-->
    <cpn :cmessage="message" :cmovies="movies"></cpn>
</div>
<template id="cpn">
   <div>
       <p>{{cmovies}}}</p>
       <h2>{{cmessage}}</h2>
       <ul>
           <li v-for="item in cmovies">{{item}}</li>
       </ul>
   </div>
</template>

<script src="../js/vue.js"></script>
<script>
    const cpn={
        template:'#cpn',
        //数组写法
        //props:['cmovies','cmessage'],
        props:{
            cmessage:{
                type:String,
                default:'未提供数据!',
                required:true,
            },
            cmovies:{
                type:Array,
                default(){
                    return ['大海有风，我有你']
                }
            }
        },
        data(){
            return {}
        }
    }
    const app = new Vue({
        el:'#app',
        data:{
            message:"你好啊！老大",
            movies:['海尔兄弟','海贼王','海王']
        },
        components:{
            cpn
        }
    })
</script>
</body>
</html>

组件通信，子传父

  • 关键函数:$emit
  • 子组件发送一个点击事件，同时子组件要使用点击事件，用$emit把值传递给父组件；父组件监听到点击事件触发 ，执行父组件里面的点击事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn @itemclick="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>
    const cpn={
        template:"#cpn",
        data(){
            return{
                categories:[
                    {id:'aaaa',name:'热门推荐'},
                    {id:'bbbb',name:'手机数码'},
                    {id:'cccc',name:'家用电器'},
                    {id:'dddd',name:'电脑办公'},
                ]
            }
        },
        methods:{
            btnClick(item){
                this.$emit('itemclick',item);
            }
        }
    }

    const app=new Vue({
        el:'#app',
        data:{

        },
        components:{
            cpn
        },
        methods:{
            cpnClick(item){
                console.log(item);
            }
        }
    });
</script>
</body>
</html>
无味无感
关注
专栏目录
vue-3d-model-Vue组件中的3D模型查看器。-Vue.js开发
05-27
vue-3d-model vue.js 3D model viewer component, based on threejs, inspired by model-tag 一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。...
vue - Vue组件化编程.doc
07-08
总结，Vue组件化编程让开发者能够以模块化的方式组织和管理代码，提高开发效率和代码质量。通过单文件组件，我们可以清晰地看到组件的全貌，同时利用组件的复用性和嵌套性构建出灵活多变的用户界面。理解和熟练运用...
十四天学会Vue-Vue 组件化编程（理论+实战）（第四天）
06-01
在“十四天学会Vue-Vue组件化编程”的学习过程中，第四天的主题可能是深入理解和实践单文件组件（Single File Component，简称SFC）。今天我们将详细探讨这一重要知识点。 1. **Vue组件基础** Vue组件是可重用的...
tts-vue-1.9.0 语音合成
05-23
Vue.js是一个轻量级、高性能的前端JavaScript框架，它以其组件化开发模式、简洁的API和易于上手的特性受到开发者们的广泛欢迎。在"tts-vue-1.9.0"项目中，Vue.js被用来构建用户界面和管理应用程序的状态。 1. **Vue...
vue-audio-visual-Vue HTML5音频可视化组件。-Vue.js开发
05-27
vue视听Vue HTML5音频可视化组件概述安装和设置API通用道具AvLine道具AvBars道具AvCircle道具AvWavef vue视听Vue HTML5音频...它提供了多个Vue组件，这些组件允许为“音频” HTML元素绘制光亮的外观。 有一个DEMO ava
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 1042
Vue 2 中使用 Vue I18n 插件实现中英文切换
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
2301_77358195的博客
09-30 1078
自定义指令
Vue根实例、实例总结
m0_54007573的博客
10-04 521
Vue根实例、实例总结
vue-live2d看板娘集成方案设计使用教程
最新发布
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1270
vue-live2d看板娘集成方案设计使用教程
Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统
abo2022的博客
09-30 1414
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
【开源免费】基于SpringBoot+Vue.JS校园资料分享平台（JAVA毕业设计）
customer08的博客
09-30 1555
校园资料分享平台是一个B/S模式系统，采用Spring Boot框架作为开发技术，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得校园资料分享平台管理工作系统化、规范化。
Vue-Lecture1-Notes
m0_74331272的博客
09-30 1761
Vue 的设计使得它既适合小型项目的使用，又能随着项目规模的扩大而扩展使用更多的功能。：一个用于检查代码质量的插件，它能够帮助你遵守编程规范，自动检测代码中的潜在错误，并提供修复建议。：Vue 的核心功能可以用于基本的页面渲染和数据绑定，开发者可以仅使用这些功能来构建简单的应用。对于 Vue 开发者来说，它能够自动格式化你的代码，使代码风格保持一致，从而提升代码的可读性。：可以把 DOM 看作是网页的“骨架”，它定义了网页的结构，JavaScript 和 Vue 可以用它来控制和修改网页内容。
结合vueuse实现图片懒加载
clmm_的博客
10-02 1264
在 Vue.js 中，是用于注册自定义指令的 API。自定义指令允许你在组件的模板中实现特定的功能或行为，这些功能或行为通常是 DOM 操作。自定义指令是一种可以在模板中使用的功能，通常以v-开头。例如，v-model和v-bind是内置指令。通过创建自定义指令，你可以扩展 Vue 的功能。: 用于注册自定义指令。自定义指令: 可以在模板中添加特定的功能，增强组件的交互性。钩子函数: 提供不同生命周期阶段的操作机会。简单来说，这段代码的目的是确保只有当用户滚动到
基于SSM+VUE数码产品参数信息平台JAVA|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解
卓越软件开发的博客
09-30 814
源代码+数据库+LW文档（1万字以上）+开题报告+答辩稿部署教程+代码讲解+代码时间修改教程。
vue数组根据某些条件进行二次切割
weixin_52115201的博客
09-30 432
比如①depnm值一致的一个一维数组有10个值，这个数组里面第三个值是isBgn==1，那这个数组会分成两个数组，第一个数组是0-2，第二个数组是3-10。[下标为0~isBgn==1的下标的值的前一个值],//①depnm值一致的一个一维数组。[下标为isBgn==1的下标的值~最后一值],//①depnm值一致的一个一维数组。2.在条件1的基础上分割出来的数组如果存在里面有isBgn==1的会进行二次分割。[③另一个depnm值一致的一个一维数组],//即存在有多种depnm的情况。
修改ID不能用关键字作为ID校验器-elementPlus
weixin_48420104的博客
09-30 673
以上就是实现关键字校验器的具体步骤。通过校验才能关闭弹窗。
Day02-JavaScript-Vue
m0_74344909的博客
09-30 529
Day02-JavaScript-Vue
ValueError: You cannot perform fine-tuning on purely quantized models.
Qiming的博客
10-04 424
peft debug ValueError: You cannot perform fine-tuning on purely quantized model
Thinkphp/Laravel基于vue的实验室上机管理系统
我的个人的博客
09-30 1474
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
React到Vue组件转换实战：react-to-vue工具解析
React 和 Vue 都是目前前端开发中的主流框架，它们在组件化方面有着很多相似之处，但也有各自的特点。`react-to-vue` 工具的出现是为了促进跨框架组件的复用，使得开发者能够更方便地将 React 组件转换为 Vue 组件。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值