Vue——18——组件

最新推荐文章于 2022-09-09 00:49:56 发布
最新推荐文章于 2022-09-09 00:49:56 发布
阅读量183 收藏
点赞数
分类专栏： VUE框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x1037490413/article/details/107140105
版权

1.组件的出现是为了拆分Vue实例的代码量的，能够让我们以不同的组件来规划不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可

2.组件化和模块化的不同
模块化：是从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一
组件化：是从UI界面的角度进行划分的，前端的组件化方便UI组件的重用

文章目录

一:创建组件:

1.方法一:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>


    </style>
</head>

<body>
    <div id="app">
        <!-- 如果要使用组件,直接把组件的名称以HTML标签的形式,
        引入到页面中即可 
        名字不能写驼峰,如果命名的时候是驼峰就在这改成-
          -->
        <my-com1></my-com1>
    </div>


    </div>
    <script>
        /*方法一:
        //1.1使用Vue.extend来创建全局的Vue组件
        var com1 = Vue.extend({
            template: '<h3>这是使用Vue.extend创建的组件</h3>' //通过template属性制定了组件要展示的HTML结构
        })
        //1.2使用Vue.component('组件的名称',创建出来的组件模板对象)
        // 如果使用Vue.component定义全局组件的时候,
        组件名称使用了驼峰命名,则在引用组件的时候,需要把驼峰改成小写的字母,
        // 同时两个单词之间使用-连接,如果不使用驼峰,名字直接拿来用就行
        Vue.component('myCom1', com1)
        */
        /* 方法一的简写:
        Vue.component('myCom1', Vue.extend({
            template: '<h3>这是使用Vue.extend创建的组件</h3>'
        }))*/

        // 再简写
// 注意:不论是哪种方式创建出来的组件,组件的template属性指向的模板内容,必须有且只能有
// 唯一一个根元素,比如h3和span就会报错,同级元素,但是可以用一个div包起来
        Vue.component('myCom1', {
            template: '<div><h3>这是使用Vue.extend创建的组件</h3><span>这是span</span></div>'
        })

        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        })
    </script>
</body>

</html>

2.方法二

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <div id="app">
        <!-- 标签形式 -->
        <mycom></mycom>
    </div>
    <div id="app2">
        <mycom></mycom>
    </div>
    <!-- 在被控制的#app外面,使用template元素,定义组件的HTML模板结构 -->
    <template id="tmp">
        <div>
            <!-- 同级元素同样不能在一起,用更大的div包一起 -->
            <h1>这是通过template元素,在外部定义的组件结构,这个方式有代码的智能提示和高亮</h1>
            <h4>h4标签</h4>
        </div>
    </template>
    <script>
        Vue.component('mycom', {
            template: '#tmp'
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        })
        var vm2 = new Vue({
            el: "#app2",
            data: {}, 
            methods: {}
        })
    </script>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
     
</head>

<body>
    <div id="app"> 
       <mylogin></mylogin>
     
     
    </div>
  
    <script>
        //对象变量,并不是名字,定义的一个组件模板对象
      var login={
          template:'<h1>123456<h1>'
      }
      Vue.component('mylogin',login)
        var vm = new Vue({
            el: "#app",
            data: {
               
            },
            methods: {}
        })
    </script>
</body>

</html>

3.私有组件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <div id="app">

    </div>
    <div id="app2">
        <login></login>
    </div>

    <template id="tmp">
        <h1>这是一个私有组件</h1>
    </template>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        })
        var vm2 = new Vue({
            el: "#app2",
            data: {},
            methods: {},
            components: {
                //定义实例内部私有组件  只能在vm2控制的区域用
                login: {
                    template: '#tmp'
                }
            }
        })
    </script>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <div id="app">
        <login></login>

    </div>

    <script>
        //对象变量,并不是名字,定义的一个组件模板对象
        var login = {
            template: '<h1>123456<h1>'
        }

        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {},
            components: {
                login
            }
        })
    </script>
</body>

</html>

二:组件中的data

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>   
 <div id="app"><mycom></mycom></div>

    <script>
        // 组件可以有自己的data数据,组件的data和实例的data不一样,实例的data可以为一个对象,但是组件中的必须是一个方法
        //组件中的data除了必须为一个方法之外,这个方法内部还必须返回一个对象
        //组件中的data数据使用方式和实例中的data使用方式完全一样
        Vue.component('mycom',{
            template:'<h1>这是全局组件----{{msg}}</h1>',
            data:function(){
              return {
                  msg:'这是组件中的data定义的数据'
              }
            }
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        })
       
    </script>
</body>

</html>

1.为什么组件的data必须是一个function

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <div id="app">
        <counter></counter>
        <hr>
        <counter></counter>
        <hr>
        <counter></counter>
    </div>
    <template id="tmp">
        <div>
            <input type="button" value="+1" @click="increment">
            <h3>{{count}}</h3>
          
    </template>
    <script>
        //设置一个计数器组件,每当点击按钮  让data中的count值+1
        // var dataObj = {
        //     count: 0
        // }
        Vue.component('counter', {
            template: '#tmp',

            data: function () {
                //在上面定义了dataObj 这种方式点击一个+1的按钮 其他的都跟着加,
                //如果是每次经历一个data里面的function  这样就会重新有个数据,说明data必须是个function
                // return dataObj
                return { count: 0}
            },
            methods:{
                increment(){
                    this.count++
                }
            }
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        })
    </script>
</body>

</html>
野生小米椒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue -- 异步组件引入
King Saj
06-02 555
异步组件加载
Vue侧滑菜单组件——DrawerLayout
10-18
本文介绍一个简单的DrawerLayout（类似Android的DrawerLayout）布局组件的实现，基于Vue.js侧滑菜单组件的实现代码大家通过本文一起学习吧
component多个 vue_【Vue】component
weixin_39581896的博客
02-23 311
Vue组件组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是。我们可以在一个通过new Vue创建的 Vue 根实例中，把这个组件作为自定义元素来使用：使用hello-world组件全局组件组件名在 html 中使用连字符命名，在 vue 文件中则可以使用小驼峰式和大驼峰式命名组件在 html 中无法使用单标签，在 vue 文件中则可以使用单标签通过 template 模板描述组件...
vue 异步组件实现按需加载
Jinmy的博客
09-30 5161
 当build打包后，app.js过大的时候，可以考虑用异步组件的方式。 import HomeHeader from "./components/Header"; import HomeSwiper from "./components/Swiper"; import HomeIcons from "./components/Icons"; import HomeRecommend from...
component多个 vue_vue-component组件
weixin_33837516的博客
12-23 1515
compontent组件名称如何定义？Vue.component('name', { /* ... */ })第一个参数就是“name'”组件的名字。如果我们想在HTML中写这样的的组件名称，。那么我们在对组件进行定义的名称的时候要这样写Vue.component('yName', { /* ... */ })即首字母大写。组件分为全局注册和局部注册。全局注册Vue.component('MyNa...
一个vue页面使用多个components
热门推荐
sinat_40697723的博客
01-07 1万+
第一步： 在compoents目录下创建多个组件；                                            第二步： 在App.vue中添加多个router-view标签，别忘了写name；                                            第三步：修改router目录下的index.js文件；         ...
Vue购物车——组件化.rar
05-01
Vue购物车——组件化 涉及 Vue组件的全局注册 和 Vue组件的局部注册，父组件向子组件传值，子组件向父组件传值，数据的单向绑定
图片动态绘制组件 vue2.x
07-14
安装 yarn add vue-image-painter # 或 npm i -S vue-image-painter 引入 // main.js 入口中 import ImagePainter from 'vue-image-painter' Vue.use(ImagePainter) 使用，请参考Demo 源码
vue异步组件
m0_51065454的博客
08-17 667
vue异步组件
你了解Vue的动态加载组件和异步加载组件吗？
Always-Learning
04-09 668
如何动态加载组件？ 引入可能被使用的组件 import slotDemo from './components/slotDemo' import HelloWorld from './components/HelloWorld' 通过动态属性is来读取组件名 <component :is="comName"/> 如何异步加载组件？ 通过import在注册组件的时候引入组件 components: { FormDemo: () => import(`../xxxCo
vue路由懒加载及组件懒加载
wfly blog
10-28 228
为什么要使用路由懒加载 为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。 定义 懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。 使用方法 常用的懒加载方式有两种：即使用vue异步组件和ES中的import 未用懒加载，vue中路由代码如下 import Vue from 'vue' import Router from 'vue-route...
Vue中的异步组件
m0_59345890的博客
09-09 887
一个网站的开发是由非常多的组件构成，如果当我们在打开网页的时候，突然一下子把这些所有的组件加载上来，这么多的请求全部同时开始请求，势必会造成网页打开很慢，使客户得到的是非常差劲的体验。：通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。异步组件是对网站的一种优化，其意思就是懒加载，当我们需要用到那个组件的时候才去打包挂载到DOM树上。：用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载；
vue components 异步与同步加载的使用区别
qq_43536071的博客
07-14 770
vue components 组件加载
vue之组件动态、异步组件
john的博客
07-22 84
动态组件 根据数据变化，结合component标签，随时动态切换组件 根据data的内容决定显示哪个组件 还使用了<keep-alive></keep-alive> 缓存输入框的数据 const app = Vue.createApp({ data(){ return{ currentitem:'myinput' } }, methods:{ click(){ th
vue 如何处理两个组件异步问题_vue异步组件 懒加载& webpack按需加载——性能优化...
weixin_39857153的博客
01-14 394
利用webpack对代码进行分割是懒加载的前提，懒加载就是异步调用组件，需要时候才下载(按需加载)。为什么需要懒加载?在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。vue开发过程中，我们会做出特别多...
Vue router components 多层命名视图如何操作
352328759的博客
01-14 3525
独生政策的时候, 只有一个后代, 叫"孩子"肯定没错 但开放多胎之后, 就不止一个后代了, 如果对着所有后代喊"孩子", 谁都分不清是谁 这个时候就需要给后代命名 同理, 在路由中一个视图套一个视图时, 还能相安无事, 因为它们都叫 default 但一个视图套多个视图时, 就应该给视图加上 name 属性 <router-view></router-view> <router-view name="a"></router-view> <router-v
vue 路由懒加载
wallace_yang的博客
02-19 258
vue 路由懒加载 { path:'/about', name:'About', component:()=>{ import(/* webpackChunkName:"about" */'../views/About.vue') } } 只有跳转到about时才会向服务器请求about.vue对应的独立的about.js文件，如果不用懒加载about对应的js会一起封装在app.js中，在第一次请求首页时就被获取。 注：import里面的注释并不是不生效的，它决定改了生成的js的文件名
【vue异步组件与路由懒加载】异步组件的使用跟首屏加载使用路白屏由懒加载方案优化问题
马云
09-15 161
vue异步组件的使用 创建一个异步组件工程函数 const AsyncList = () => { component: import('./list'), // 需要使用异步组件写法的组件 loading: LoadingComponent, // 加载中状态的组件 error: ErrorComponent, // 请求失败的组件 delay: 200, // 延迟时间 timeout: 3000 // 超时时间 } 模板里引入 components: { List: () =&
java虚拟路由器_java – 何时使用Restlet路由器v.具有多个路由的Component
weixin_29767773的博客
02-26 77
我在虚拟主机附件上使用路由器时看不到任何问题,因为Restlet允许复合元素来构建请求处理链.这里的问题是路由器可以支持多个路由,并且您使用完全匹配模式(实际上是默认模式).我们来试试吧.如果pair.uriPattern包含/ test并且您在此路由上附加了路由器.无论你在路由器上指定了什么,只会处理路径/测试(空路线除外;-)我想你想要实现子路由匹配,所以你应该考虑在将路由器连接到虚拟主机时使...
Vue笔记（三）——组件&插槽
最新发布
05-25
在 Vue.js 中，组件可以分为全局组件和局部组件，其中全局组件可在任何地方使用，而局部组件只能在其父组件中使用。 定义组件时，需要使用 Vue.component() 方法，该方法需要传入两个参数：组件名称和组件配置对象...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值