Vue——常用组件

最新推荐文章于 2024-05-09 14:10:21 发布
最新推荐文章于 2024-05-09 14:10:21 发布
阅读量5.3k 收藏 8
点赞数 1
分类专栏： VUE 文章标签： Vue 
<script src="../lib/vue.js"></script> 都要在头部导入包

1. 基础的基础

Component，Portlet

<body>
    <div id="my">
        <today-weather></today-weather>    //自定义组件
    </div>
    <script>
	 Vue.component('today-weather',{
            template:'<div>aaaaaaaaaaaaa</div>'
        });
        var my = new Vue({
            el:'#my'
        })
    </script>
</body>

在这里插入图片描述

2. 局部的组件

Vue.js的组件不仅可以单独声明注册使用，还可以在Vue实例中进行局部注册使用

<body>
    <div id="my">
        <my-weather></my-weather>
    </div>
    <script>
        var WeatherComponent = {
            template:'<div>123132121</div>'
        };
        var my = new Vue({
            el:'#my',
            data:{

            },
            components:{
                'my-weather':WeatherComponent
            }
        });
    </script>
</body>

在这里插入图片描述

3. 表行组件

<body>
    <div id="my">
        <h1>最期待的游戏是：</h1>
        <table border="1">
            <tr>
                <td>编号</td>
                <td>游戏名称</td>
            </tr>
            <tr is="my-row1"></tr>
          <tr is="my-row2"></tr>
          <tr is="my-row3"></tr>
        </table>
    </div>
    <script>
	Vue.component('my-row1',{
            template:'<tr><td>(1)</td><td>塞尔达传说：荒野之息</td></tr>'
        });
	Vue.component('my-row2',{
            template:'<tr><td>(2)</td><td>新马里奥赛车</td></tr>'
        });
	Vue.component('my-row3',{
            template:'<tr><td>(3)</td><td>喷射乌贼娘2代</td></tr>'
        });
        var my = new Vue({
            el:'#my',
            data:{},
            methods:{}
        });
    </script>
</body>

在这里插入图片描述

4. 组件中的数据

为Vue.js组件添加数据，使组件可以动态显示各种数据，注意是数据函数，不是数据属性

<body>
    <div id="my">
        <div>今天的天气是<today-weather/></div>
    </div>
    <script>
Vue.component('today-weather',{
            template:'<strong>{{todayWeather}}</strong>',
            data:function(){
                return {todayWeather:'雨加雪'};
            }
        });
        var my = new Vue({
            el:'#my',
        });
    </script>
</body>

在这里插入图片描述

5. 组件中的传递数据

可接受参数的组件

<body>
    <div id="my">
        <h1>成绩评价</h1>
        <test-resule :score="50"></test-resule>
        <test-resule :score="65"></test-resule>
        <test-resule :score="90"></test-resule>
        <test-resule :score="100"></test-resule>
    </div>
    <script>
 Vue.component('test-resule',{
            props:['score'],//表示可以接受什么样的参数
            template:'<div><strong>{{score}}分，{{testResult}}</strong></div>',
            computed:{
                testResult:function(){
                    var strResult = "";
                    if(this.score<60)
                        strResult = "不及格";
                    else if(this.score<90)
                        strResult = "中等生";
                    else if(this.score<=100)
                        strResult = "优等生";
                    return strResult;
                }
            }
        });
        var my = new Vue({
            el:'#my',
        });
    </script>
</body>

在这里插入图片描述

6. 传递变量

<body>
    <div id="my">
        <div>请输入名字：<input v-model="myname"></div>
        <hr>
        <say-hello :pname="myname"></say-hello>
    </div>
    <script>
	Vue.component('say-hello',{
            props:['pname'],
            template:'<div>你好，<strong>{{pname}}</strong></div>',
        });
        var my = new Vue({
            el:'#my',
            data:{
                myname:'aaa'
            }
        });
    </script>
</body>

在这里插入图片描述在这里插入图片描述

7. 参数验证

<body>
    <div id="my">
        <h1>身世之谜</h1>
        <show-member-info name="aaa" :age="20" :detail="{address:'earth',language:'世界语'}"></show-member-info>
    </div>
    <script>
		Vue.component('show-member-info',{
            props:{
                name:{
                    type:String,
                    required:true,
                },
                age:{
                    type:Number,
                    validator:function(value){
                        return value>=0 && value <=130;
                    }
                },
                detail:{
                    type:Object,//数组类型
                    default:function(){
                        return{
                            address:'US',
                            language:'English'
                        };
                    }
                },
            },
            template:'<div>姓名：{{this.name}}<br/>'+
            '年龄：{{this.age}}岁<br/>'+
            '地址{{this.detail.address}}<br/>'+
            '语言{{this.detail.language}}</div>',
        });
        var my = new Vue({
            el:'#my',
        });
    </script>
</body>

在这里插入图片描述

8. 事件传递

v-on 侦听组件事件，当组件出发事件后进行事件处理
$emit 触发事件，并将数据提交给事件侦听者

<body>
    <div id="my">
        <h1>人生加法</h1>
        <add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
        <hr>
        <h3>{{result}}</h3>
        
    </div>
    <script>
	Vue.component('add-method',{
            props:['a','b'],
            template:'<div><button v-on:click="add">加吧</button></div>',
            methods:{
                add:function(){//子组件
                    var value =0;
                    value = this.a + this.b;
                    this.$emit('add_event',{//事件发送的形式传输给父组件
                        result:value
                    });
                }
            },
        });
        var my = new Vue({
            el:'#my',
            data:{
                result:0
            },
            methods:{
                getAddResult:function(pval){//作事件触发的第二个参数
                    this.result = pval.result;
                }
            },
        });
    </script>
</body>

在这里插入图片描述
在这里插入图片描述

9. slot插槽

slot是父组件与子组件的通讯方式，可以将父组件的内容显示在子组件当中

    <body>
        <div id="my">
            <say-to pname="aaa">111111</say-to>
            <say-to pname="bbb">222222</say-to>
            <say-to pname="ccc">333333</say-to>
        </div>
        <script>

	Vue.component('say-to',{
            props:['pname'],
            template:'<div>'
            +'你好,<strong>{{pname}}</strong>!'
            +'<slot></slot>'//显示子组件中的内容
            +'</div>',
        });
        var my = new Vue({
            el:'#my',
        });
    </script>
</body>

在这里插入图片描述
组合slot
在子组件中通过为多个slot进行命名，来接受父组件的不同内容的数据

<body>
    <div id="my">
        <nba-all-stars c="奥尼尔" pf="加内特">
            <span slot="sf">皮尔斯</span>
            <span slot="sg">雷阿伦</span>
            <span slot="pg">隆多</span>
        </nba-all-stars>
    </div>
    <script>
Vue.component('nba-all-stars',{
            props:['c','pf'],
            template:'<div>'
            +'<div>中锋：{{c}}</div>'
            +'<div>大前：{{pf}}</div>'
            +'<div>小前：<slot name="sf"></slot></div>'
            +'<div>分卫：<slot name="sg"></slot></div>'
            +'<div>控卫：<slot name="pg"></slot></div>'
            +'</div>',
        });
        var my = new Vue({
            el:'#my',
        });
    </script>
</body>

在这里插入图片描述

Zjaun
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中的常见内置组件
Menqq的博客
08-02 1134
component组件：有两个属性—is inline-template 渲染一个‘元组件’为动态组件，按照’is’特性的值来渲染成那个组件。 .transition组件：为组件的载入和切换提供动画效果，具有非常强的可定制性。 slot：作为组件模板之中的内容分发插槽，slot元素自身将被替换 transition-group：作为多个元素/组件的过渡效果 keep-alive：包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 详情请看官网API：点击打开链接 ...
14 个最佳 Vue UI 组件库推荐
古他妈阳光之神☀️
08-24 2万+
Vue.js 是无数前端开发人员首选的 JavaScript 框架，因为它易于学习和使用。 组件是 Vue 框架的核心——它们可以帮助你更快地从想法转变为功能性 UI。
Vue.js-----vue组件
最新发布
2201_76041915的博客
05-09 764
注意: 一定要用v-if来写 (保证DOM异步更新前获取不到输入框, 体现$nextTick价值)如何获取组件对象呢?目标组件添加ref属性 this.$refs.名字 获取组件对象。如何拿到Promise里ajax的成功或失败的结果?能获取data, 不能获取真实DOM。创建组件 / 引入组件 / 注册组件 / 使用组件。axios哪个选项, 可以把参数自动装入到请求体中?created函数里, 能获取真实DOM吗?axios 底层还是原生js实现, 内部通过Promise封装的。
Vue常用的组件库大全【前端工程师必备】
weixin_47615289的博客
01-07 2573
中文文档：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation。原文链接：https://blog.csdn.net/qq_44757034/article/details/128090797。在线预览：https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting。🔸一套基于 Vue.js 的高质量UI 组件库 https://www.iviewui.com/
vue常用组件库
B13362260109的博客
07-20 762
Vue是主流的前端框架。
Vue常用指令+用法举例 详解
m0_69287579的博客
08-18 3411
有：v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。vue中双向绑定是一个指令v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。可以单独使用，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-if和v-show有同样的效果，不同在于。v-for可用来遍历数组、对象、字符串。
Vue异步组件使用详解
08-30
- **代码分割**：通过webpack的代码分割功能，可以将大组件或不常用组件分离出来，进一步优化加载速度。 - **优化用户体验**：用户可以更快地看到页面主要内容，而其他组件则在后台逐步加载，提高了应用的响应性。...
Vue组件传值之bus总线
01-08
在vue中组件传值有多种方式，我们最常用的是props，当然还有vuex，但是对于简单的场景，vuex显得过于复杂了，今天我们介绍另一种组件传值的方式——Bus总线 正文 使用一个空的Vue实例作为中央事件总线。实际应用中，...
vue2.0 常用的 UI 库实例讲解
08-28
本篇文章将介绍两个常用的Vue2.0 UI库——Mint-UI和VUX，并提供它们的安装和使用方法。 1. **Mint-UI** Mint-UI 是由饿了么团队开发的一个轻量级、高性能的Vue2.0组件库，它提供了丰富的界面元素和交互效果，适合...
vue渲染时闪烁{{}}的问题及解决方法
12-03
在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if...
学习Vue3你需要知道的47个实用开源组件
猿小白的博客
10-27 1728
官网：https://sortablejs.github.io/vue.draggable.next/#/simple。官网：https://varlet.gitee.io/varlet-ui/#/zh-CN/home。官网：https://www.antdv.com/docs/vue/introduce-cn。官网：https://better-scroll.github.io/docs/zh-CN/官网：https://vant-contrib.gitee.io/vant/#/zh-CN。
Vue基础知识总结 3：vue常用标签
学Java，找哪吒
07-19 2万+
一、计算属性 1、合并两个字符串 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{fullName}}</div> <script src="../js/vue.js">&.
【Vue组件详解（一）】
小田是个程序员的博客欢迎你的到来呀~
04-07 1万+
卷起来兄弟们！本篇文章主要介绍了Vue中组件的详细知识，以图形和实例相结合的方式带你一步一步入手Vue组件！！！
vue常用知识点总结
liuliuhhxxttxs的博客
11-23 366
采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
vue常用指令
jayLog的博客
01-29 2万+
vue2.x的常用指令。篇幅简短，易懂
Vue常用插件
PrimaryColor
07-14 2697
1.Element UI：PC端的组件库。 2.font-icon：阿里巴巴矢量图标库。 3.animate：预设css3的动画库。 4.vue-awesome-swiper：可变性高的轮播图。 5.dayjs：时间处理插件。后台数据库返回的时间处理插件。 6.v-charts：图表插件。 7.Vant：轻量、可靠的移动端 Vue 组件库。 8.iView：高质量UI组件库。 9.axios：易用、简洁且高效的http库。作用：封装了复杂的网络请求。 10.mavon-editor：基于vue的markdo
vue 常用ui组件
热门推荐
John的专栏
12-27 7万+
vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cn demo:http://elemefe.github.io/mint-ui/#/ github地址:https://github.com/ElemeFE/mint-ui 中文文档地址:http:
Vue组件大全（持续更新）
机智的奎哥的博客
10-19 520
前言： 1、安装插件 npm install --save qrcode 2、卸载插件 npm uninstall qrcode 1.vue-draggable-resizable 功能：可实现鼠标拖拽DIV，滚轮放缩小DIV 安装方法： npm install --save vue-draggable-resizable main.js配置方法 import VueDraggableResizable from 'vue-draggable-resizable' import 'vue-dragga
[收藏]VUE优秀UI组件库合集
qq_26780317的博客
06-14 5万+
[收藏]VUE优秀UI组件库合集(来源于https://shimo.im/doc/LkpdnWxM1j40BDJj/) 前言：vue作为一款深受广大群众以及尤大崇拜者的喜欢，特此列出在github上开源的vue优秀的UI组件库供大家参考，期待开发者们推出更多优秀的组件库。 一、相关框架介绍                                         ---------...
Vue.js 调试工具怎么检查组件状态、属性、事件等信息
05-24
Vue.js 提供了一些调试工具来检查组件状态、属性、事件等信息，其中最常用的是 Vue Devtools。 Vue Devtools 是一个浏览器插件，支持 Chrome 和 Firefox。安装完插件后，打开 Vue 应用，在开发者工具中切换到 Vue ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值