<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- 调用全局注册的组件 --> <button-counter>< ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-08-19 22:53:00
                            
                                493阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            1. v-bind的基本使用 某些时候我们并不想将变量放在标签内容中,像这样<h2>{{message}}</h2>是将变量h2标签括起来,类似js的innerHTML。但是我们期望将变量imgURL写在如下位置,想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接,此时的imgURL并非变量而是字符串imgURL,如果要将其            
                
         
            
            
            
            Vue中的组件这部分内容将分为以下五节:组件的使用组件之间的传参组件之间的事件传递插槽动态组件和异步组件前言:在单页面应用开发中,大多数情况下只有一个html页面,那么单页面的页面跳转,其实就是各组件之间的切换,那么这个组件其实就充当的是一个一个独立的html页面的角色,只不过这个组件之间可以复用,传值,随意调用,在vue中通常由(vue-router)和组件(component)来配合完成,那么            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-01-20 19:44:36
                            
                                274阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="vue.js"></scriptton-counter>   .            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-03-14 09:25:20
                            
                                260阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            使用 Vue.component()全局注册组件新建两个文件:test.vue 、index.js// test.vue   这里定义我们准备多次复用的组件<template>  <div>    <h3>Hello   {{name}}</h3>    <button @click="changeName()">changeName</button>  </div></templa            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-07-13 15:50:39
                            
                                6225阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            While traditional Vue components require a data function which returns an object and a method object with your handlers, vue-class-componentflattens c            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2018-07-20 21:06:00
                            
                                183阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--view层 模板--> <div id="app"> <!--组件:传递给组件的值:props ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-08-07 17:28:00
                            
                                139阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            vue上所有生命周期中的钩子方法里(如created,mounted,updated)使用this,this指向调用它的vue实例 (new Vue),this的指向会影响ts的类型推断,为了更好地用class的模式来写vue组件。 vue-class-component 带来了很多遍历 官网 1. ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-07-14 18:40:00
                            
                                745阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            https://vuejs.org/v2/guide/components-registration.html Global Registration So far, we’ve only created components using Vue.component: Vue.component('            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2020-12-11 16:41:00
                            
                                206阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            You can dynamically switch between components in a template by using the reserved <component> element and dynamically bind to its is attribute. By usi            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2018-07-26 21:26:00
                            
                                138阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            背景介绍最近在封装一些基于Vue+ElementUI的组件,将一些实际项目中常用的,有一定规律的业务进行抽象总结,开发出相应的Vue组件。组件封装首先想到的就是Form组件,在Element UI提供的Form中,我们需要一个一个的去添加对用的FormItem<el-form ref="form" :model="form" label-width="80px">  <el-fo            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-01-05 22:17:15
                            
                                2389阅读
                            
                                                                             
                 
                
                             
         
            
            
            
                    Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。        在底            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-07-28 22:26:58
                            
                                156阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            动态组件的概念多个组件通过component标签挂载在同一个组件中,通过触发动作进行动态切换。常搭配<keep-alive></keep-alive>使用,多用于tab栏的切换等场景1 动态组件介绍component是vue内置组件,主要作用为动态渲染组件,基本用法如下:<!-- 动态组件由 vm 实例的 `componentName` property 控制 --&