vue笔记(4)组件化

最新推荐文章于 2024-07-24 13:33:51 发布
最新推荐文章于 2024-07-24 13:33:51 发布
阅读量230 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43537987/article/details/93403973
版权

vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865
vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293
vue笔记(3)动画：https://blog.csdn.net/qq_43537987/article/details/93403565

组件化

组件化的定义

​ 组件的出现就是为了拆分vue实例的代码量，以不同的组件来划分不同 的功能模块，将来需要什么样的功能就调用对应的组件

组件化(Vue)和模块化（node）的区别：

  • 模块化是从代码的逻辑角度进行划分的（方便后台代码分层开发，保证每个功能模块的职能单一）
  • 组件化是从UI界面角度进行划分的（方便UI组件的重用）
    • 将一个页面划分为各小块，不同页面的相同小块不用再重写

创建组件的方式（三种）

注意：！！！

1.无论使用哪种创建组件的方法，组件template属性指向的模板内容，必须有且只有唯一的一个跟元素

2.使用驼峰命名法时注意事项

创建组件方式1

  • 1.使用Vue.extend创建全局vue组件
  • 2.使用vue.component(‘组件名称’，‘创建出来的组件模板对象’)
  • 3.如果要使用组件直接把组件的名称，以HTML形式引入到页面中即可
    • 如果定义组件名称的时候使用驼峰命名法，在页面中要以 -的方式进行单词的拆分和连接
    • 如果未使用驼峰命名法，命名时为小写字母和数字则直接使用该名称即可
<div id="app">
    //1.3使用组件
    <my-com1></my-com1>
  </div>
  <script>
    // 1.1 使用Vue.extend创建全局vue组件
    var com1 = Vue.extend({
        template:'<h3>这是创建的组件</h3>'//通过template属性，指定组件要展示的html结构
    })
    //1.2使用vue.component('组件名称'，'创建出来的组件模板对象')
    Vue.component('myCom1',com1);

	//必须创建Vue实例
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{}
    })
  </script>

第一种方式也可以简写

 Vue.component('myCom1',Vue.extend({
    template:'<h3>这是创建的组件</h3>'
 }))

创建组件方式2

<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
  <my-com2></my-com2>
</div>
<script>
  Vue.component('myCom2',{
      template:'<h2>hello world</h2>'
  })
  var vm  = new Vue({
      el:'#app',
      data:{},
      methods:{}
  })
</script>

创建组件方式3

<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
  <my-com3></my-com3>
</div>
<template id="tem">
  <div>
    <h1>hello</h1>
    <p>这种方式真的很nice!!!</p>
  </div>
</template>
<script>
  Vue.component('myCom3',{
      template:'#tem'
  });
  var vm = new Vue({
      el:'#app',
      data:{},
      methods:{}
  })
</script>

注意：

  • 标签要放在控制区域#app外面

  • 推荐使用该方法

创建私有组件

<div id="app">
    <my-self-com></my-self-com>
  </div>
  <script>
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{//记得加s
            mySelfCom:{//组件名称
                template:'<h1>hello</h1>';//组件渲染的内容
            }
        }
    })
  </script>

<div id="app">
    <my-self-com></my-self-com>
  </div>
  <template id="tem">
    <div>
      <h1>hello</h1>
      <div>
        <p>这是一个p</p>
      </div>
    </div>
  </template>
  <script>
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{
            mySelfCom:{
                template:'#tem'
            }
        }
    })
  </script>

组件的data和methods

data

  • 组件可以有自己的data数据

  • 组件的data数据和实例中的data数据不同，实例中的data数据是一个对象，而组件中的数据需要是一个方法

  • 组件的data除了必须是一个方法，方法内部还必须返回一个对象

  • 组件中的data数据的使用和实例中data使用方式是一样的

  • 不建议这么做来返回对象

  • var obj = {msg:0}
Vue.component('myCom',{
    template:'#tem',
    data:function(){
        return obj;//这样做不会报错，但是这个obj是一个全局的对象，若有多个组件想分别控制不同的对象，会出现问题
    }
})

methods

组件中方法的使用和实例中的方法使用相同。

案例：

//全局组件
  <div id="app">
    <my-com></my-com>
  </div>
  <template id="com">
    <div>
      <input type="button" value="+1" @click="add">
      <h1>hello</h1>
      <p>{{msg}}</p>
    </div>
  </template>
  <script>
    Vue.component('myCom',{
        template:'#com',
        data:function () {
            return {
                msg:0
            }
        },
        methods:{
            add(){
                this.msg++;
            }
        }
    });
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{}
    })

//私有组件 
<div id="app">
    <my-com></my-com>
  </div>
  <template id="com">
    <div>
      <input type="button" value="+1" @click="add">
      <p>{{msg}}</p>
    </div>
  </template>
  <script>
    var vm =new Vue({
        el:'#app',
        components:{
            myCom:{
                template:'#com',
                data:function () {
                    return {msg:0}
                },
                methods:{
                    add(){
                      this.msg++
                    }
                }
            }
        }
    })

组件的切换 + 多组件的过渡

方式一：使用v-if,v-else

方式一的不足：只能切换两个组件

<!--这种方式只能实现两个组件切换-->
<div id="app">
  <a href="#" @click.prevent="flag=true">登录</a>
  <a href="#" @click.prevent="flag=false">注册</a>
  <login v-if="flag"></login>
  <register v-else="flag"></register>
</div>
<template id="tem1">
  <h1>hello</h1>
</template>
<template id="tem2">
  <h2>world</h2>
</template>
<script>
  var vm = new Vue({
      el:'#app',
      data:{
          flag:true
      },
      methods:{},
      components:{
          login:{
              template:'#tem1'
          },
          register:{
              template:'#tem2'
          }
      }
  })

方式二：<component>标签

  • vue提供了<component>来展示对应名称的组件
  • :is=“用来展示的组件名称”
  • 组件名是字符串 使用时 => :is=" ‘login’ " (加单引号)
  • 目前学习了四个Vue提供的标签<component> <template> <transition> <transition-group>

多组件的过渡

  • 不需要使用 key 特性
  • mode属性设置组件切换时的模式
    • in-out 先进后出
    • out-in 先出后进

案例：

<style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(100px);
    }
    .v-enter-active,
    .v-leave-active {
      transition: all 1s ease;
    }
  </style>
</head>
<body>
  <div id="app">
    <a href="" @click.prevent="isCom='login'">登录</a>
    <a href="" @click.prevent="isCom='register'">注册</a>
<!--    <component :is="'login'"></component>  // 字符串加引号-->

    <transition mode="out-in">
      <component :is="isCom"></component>
    </transition>
  </div>
  <template id="tem1">
    <h1>hello</h1>
  </template>
  <template id="tem2">
    <h1>world</h1>
  </template>
  <script>
    var vm = new Vue({
        el:'#app',
        data:{
            isCom:'login'
        },
        methods:{},
        components:{
            login:{
                template:'#tem1'
            },
            register:{
                template:'#tem2'
            }
        }
    })

组件传值

父组件向子组件传值

  • 创建 的实例可以看作是一个父组件，其身上的data数据如何传递给子组件中呢？
  • 子组件无法直接访问到父组件中data的数据和methods中的方法
  • 父组件，可以在引用子组件的时候，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据传递供给子组件使用
  • 把父组件传递过来 的parentmsg属性，先在props 数组中，定义一下，这样才能使用这个数据
    • 注意：组件中所有props中的数据都是通过父组件传递过来的
    • 子组件自身的数据直接写在data属性中即可（比如：子组件通过Ajax请求回来 的数据，都可以放在data身上）
  • props 中 的数据都是只读的，不可重新赋值
父组件向子组件传递值
<body>
  <div id="app">
      <!--父组件，可以在引用子组件的时候，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据传递供给子组件使用-->
    <login :parentmsg1="msg1" :parentmsg2="msg2"></login>
  </div>
  <script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg1:'hello ',
            msg2:'world'
        },
        methods:{},
        components:{
            login:{
                data(){
                    return {msg1:'子组件的数据'}
                },
                template:'<h1>----{{parentmsg1}}{{parentmsg2}}{{msg1}}----login的渲染内容</h1>',
              //把父组件传递过来 的parentmsg属性，先在`props` 数组中，定义一下，这样才能使用这个数据
                props:['parentmsg1','parentmsg2']//加引号
            }
        }
    })
  </script>
</body>
父组件向子组件传递方法
  • 父组件向子组件传递方法，使用的是事件绑定机制：v-on
  • this.$emit(‘func’)
<body>
<div id="app">
    <!--父组件向子组件传递方法，使用的是事件绑定机制：v-on -->
  <com @func="show"></com>
</div>
<template id="tem">
  <div>
    <h1>hello</h1>
<!-子组件的点击事件，在这个事件中拿到父组件传递过来的方法-->
    <input type="button" value="点击" @click="sonclick">
  </div>
</template>
<script>
    //定义一个字面量类型的组件模板对象
    var com = {
        template: '#tem',
        methods:{
            sonclick() {
                //emit 英文愿意：触发，调用，发射的意思
                this.$emit('func')
            }
        }
    }
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            show(){
                console.log('hello')
            }
        },
        components: {
            com
        }
    })
</script>
</body>

子组件向父组件传值

  • 通过父组件向子组件传递方法的方式，可以使父组件获取到子组件的data值
  • 父组件中 的方法具有参数
<body>
  <div id="app">
    <login  @fun="show"></login>
  </div>
  <template id="tem">
  <div>
    <input type="button" value="点击" @click="sonclick">
  </div>
  </template>
  <script>
    var vm = new Vue({
        el:'#app',
        data:{
        },
        methods:{
            //想获取几个数据就给几个参数即可
            show(data1,data2){
                console.log('hello' + data1 + data2)//hello123world
            }
        },
        components:{
            login:{
                data(){
                    return {msg:123,msg2:"world"}
                },
                methods:{
                    sonclick(){
                        //获取子组件的数据，并传递
                        this.$emit('fun',this.msg,this.msg2)
                    }
                },
                template:'#tem',
            }
        }
    })
  </script>
</body>

案例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
  <div id="app">


    <cmt-box @func="loadComments"></cmt-box>


    <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="item.id">
        <span class="badge">评论人： {{ item.user }}</span>
        {{ item.content }}
      </li>
    </ul>


  </div>


  <template id="tmpl">
    <div>

      <div class="form-group">
        <label>评论人：</label>
        <input type="text" class="form-control" v-model="user">
      </div>

      <div class="form-group">
        <label>评论内容：</label>
        <textarea class="form-control" v-model="content"></textarea>
      </div>

      <div class="form-group">
        <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
      </div>

    </div>
  </template>

  <script>

    var commentBox = {
      data() {
        return {
          user: '',
          content: ''
        }
      },
      template: '#tmpl',
      methods: {
        postComment() { // 发表评论的方法
          // 分析：发表评论的业务逻辑
          // 1. 评论数据存到哪里去？？？   存放到了 localStorage 中  localStorage.setItem('cmts', '')
          // 2. 先组织出一个最新的评论数据对象
          // 3. 想办法，把 第二步中，得到的评论对象，保存到 localStorage 中：
          //  3.1 localStorage 只支持存放字符串数据， 要先调用 JSON.stringify 
          //  3.2 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个  数组对象， 然后，把最新的评论， push 到这个数组
          //  3.3 如果获取到的 localStorage 中的 评论字符串，为空不存在， 则  可以 返回一个 '[]'  让 JSON.parse 去转换
          //  3.4  把 最新的  评论列表数组，再次调用 JSON.stringify 转为  数组字符串，然后调用 localStorage.setItem()

          var comment = { id: Date.now(), user: this.user, content: this.content }

          // 从 localStorage 中获取所有的评论
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          list.unshift(comment)
          // 重新保存最新的 评论数据
          localStorage.setItem('cmts', JSON.stringify(list))

          this.user = this.content = ''
		  //location.reload()
          this.$emit('func')
        }
      }
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: Date.now(), user: '李白', content: '天生我材必有用' },
          { id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },
          { id: Date.now(), user: '小马', content: '我姓马， 风吹草低见牛羊的马' }
        ]
      },
      beforeCreate(){ // 注意：这里不能调用 loadComments 方法，因为在执行这个钩子函数的时候，data 和 methods 都还没有被初始化好

      },
      created(){
        this.loadComments()
      },
      methods: {
        loadComments() { // 从本地的 localStorage 中，加载评论列表
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          this.list = list
        }
      },
      components: {
        'cmt-box': commentBox
      }
    });
  </script>
</body>

</html>
Ron韦斯莱
关注
vue使用中一些坑整理（componet等）
nanjwangc的专栏
11-13 2066
vue
Vue学习笔记进阶篇之函数化组件解析
08-29
本篇文章主要介绍了Vue学习笔记进阶篇之函数化组件探究，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
学习笔记——Vue的组件化开发
2301_80093566的博客
07-16 468
Vue的组件化开发允许开发者将页面拆分成可重用、独立的组件，每个组件包含自己的 HTML、CSS 和 JavaScript 逻辑。
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
vue2学习笔记-组件化
wang_kai_7的博客
04-15 761
前言 跟着黄轶大神学习的 vue，做一些简单记录。 import Vue from 'vue' import App from './App.vue' var app = new Vue({ el: '#app', // 这里的 h 是 createElement 方法 render: h => h(App) }) 流程图 步骤 1 $mount 之前 这里的逻辑和数据驱动中的大致逻辑是一样的，都是在做初始化，到了下一步在会有所区别 2 $mount 位置：vue/src/core
vue组件化知识
iceylia的博客
08-21 1091
vue笔记
vue组件（前端笔记三）
baomingshu的博客
07-24 1068
①单页 Web 应用（single page web application，SPA）。Vue工程是单页面应用程序，整个工程只有一个完整的html页面。② 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。③数据需要通过 ajax 请求获取。④Vue 脚手架工程只有一个页面，浏览器也只能读取这一个页面的内容。Vue 通过组件的方式把要渲染到页面的内容进行拆分，拆分成组件，由 Vue 对象加载各个组件并渲染到页面.
前端学习笔记 | Vue组件化编程
m0_53522458的博客
04-02 961
尚硅谷vue2/vue3的vue2笔记：组件、非单文件组件、组件原理、单文件组件、vue脚手架、ref配置、props配置、mixin混入、组件化编码流程、组件自定义事件、全局事件总线、消息订阅与发布、$nextTick、配置代理、vue-resource、插槽、vuex、路由、UI组件库
Vue学习笔记（二）组件化和模块化
Andy-ZhangSir的博客
05-21 2258
Vue学习笔记（二）组件化和模块化前言组件化模块化什么是模块化es5模块化解决方案es6模块化解决方案 前言 本章记录一下vue的组件化和模块化，这是vue比较重要的知识点。会在实际开发中大量的使用到，因此，会比较详细的记录。 组件化 模块化 什么是模块化 es5模块化解决方案 在es5中，为了解决作用域的问题，很多时候我们都是通过闭包的形式。但是，使用闭包也会有它的问题，比如，一个js文件确实需要用到另一个js里的变量、函数等。不重写几乎是用不到的。因为此时每个js都是一个独立的作用域，无法相互使用。 我
Vue入门笔记之组件化
Admin_Lian的博客
07-03 791
目录(一) 组件化 概述(二) 组件注册1. 注册全局组件2. 注册局部组件3. 注册组件简写(三) 父子组件1. 注册父子组件2. 父子组件的通信3. 父子组件的访问方式(三) Slot 插槽1. 插槽的基本使用2. 具名插槽3. 作用域插槽 (一) 组件化 概述 在一个页面中存在大量的处理逻辑, 如果全部放在一起, 处理起来就会变得非常复杂, 且不利于后续维护以及扩展 组件化思想: 将页面拆分成一个个小的功能块, 每个功能块完成属于自己这部分独立的功能, 那么之后整个页面的管路和维护就变得非常容易 组
Vue2组件化开发
m0_47807991的博客
03-09 975
【自制】coderwhy老师vue2教学视频学习笔记
Vue笔记，Vue笔记，Vue笔记
07-18
Vue笔记主要涵盖了从基础到进阶的各种Vue知识，通过一系列的学习日程，旨在帮助开发者深入理解和熟练掌握Vue框架。 在"Day 01"，通常会介绍Vue的基础概念，包括Vue实例的创建、模板语法、数据绑定（如`v-bind`和`v-...
【狂神说】Vue笔记（全部完整）.zip
01-22
4. **组件化**：Vue的核心是组件系统，允许开发者将UI拆分为可复用的部件。组件可以拥有自己的视图和数据逻辑，并可以通过props接收父组件的数据，通过事件向父组件通信。 5. **模板语法**：Vue的模板语法基于HTML...
最新尚硅谷vue系列笔记
02-11
Vue的核心特性包括数据绑定、组件化、指令系统、虚拟DOM以及路由管理等。 1. **数据绑定**：Vue采用双向数据绑定，使得视图和模型之间的数据保持同步，极大地简化了开发者的工作。通过`v-bind`指令可以将数据绑定到...
基于ssm的二手车交易网站设计与实现.docx
09-17
基于ssm的二手车交易网站设计与实现.docx
zotero 6 插件,包含茉莉花、DOI、绿青蛙、sci-hub等11个常用插件
09-17
zotero 6 插件，茉莉花、DOI、绿青蛙、sci-hub、Better notes、GPT、IF、PDF翻译、Style、TAG、影响因子
linux_命令_tail_的升级版，可使用_tails_同时跟踪多个文件并格式化输出成更方便查看的_tails.zip
最新发布
09-17
linux_命令_tail_的升级版，可使用_tails_同时跟踪多个文件并格式化输出成更方便查看的_tails
基于ssm的房屋出租出售系统设计与实现.docx
09-17
基于ssm的房屋出租出售系统设计与实现.docx
jdk9 免安装包，配置环境变量即可
09-17
jdk9 免安装包，配置环境变量即可
Vue2.0 基础笔记：MVVM设计模式和组件化思想
 3.2 组件的复用<my-component></my-component> 3.3 组件的组合<my-component><my-component></my-component><my-component> 4.生命周期vue 实例有一个完整的生命周期，也就是从初始化、编译、创建 DOM、更新、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值