vue组件的使用

最新推荐文章于 2023-06-05 16:02:56 发布
最新推荐文章于 2023-06-05 16:02:56 发布
阅读量89 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45068048/article/details/112289505
版权

1.组件的创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<mycom3></mycom3>
</div>
<div id="app1">
    <login></login>
</div>
</body>
<template id="tmp1">
    <div>
        <h1>这是通过template元素，在外部定义的组件结构，这个方式，有代码的提示和高亮</h1>
        <h4>好用不错</h4>
    </div>
</template>
<template id="tmp2">
    <h1>这是私有的login组件</h1>
</template>
<script>
    //第一种方式定义：全局组件
    // var com1=Vue.extend({
    //     template:'<h3>这是使用vue。extend创建的组件<spand>111</spand></h3>'
    // })
    // Vue.component("mycom1",com1);
     //第二种方式定义组件
    // Vue.component("mycom1",Vue.extend({
    //     template:'<div>这是sss使用vue.extends创建的组件<span>dfdfdf</span></div>',
    // }))
    //第三种方式定义组件 只允许有一个根节点
    // Vue.component("mycom1",{
    //     template:'<div>这是sss使用vue.extends创建的组件<span>dfdfdf</span></div>',
    // })
    // 第四种方式（推荐）
//创建全局组件
    Vue.component('mycom3',{
        template:'#tmp1'
    })
    var vm=new Vue({
        el:'#app',
        data:{},
        methods:{}
    });
    var vm2=new Vue({
        el:'#app1',
        data:{},
        methods:{},
        components:{
            // 私有组件
            login:{
                template: '#tmp2'
            }
        }
    });
</script>
</html>

2.组件中data和methods的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<mycom1></mycom1>
</div>
</body>
<script>

    Vue.component("mycom1",Vue.extend({
        template:'<h1 @click="show">这是全局组件---{{msg}}}</h1>',
        data:function () {
         return {
             msg:'这是组件中的data定义的数据',
             name:'zhangsan'
         }
        },
        methods:{
            show:function () {
             console.log("aaa")
            }
        }
    }))

    var vm=new Vue({
        el:'#app',
        data:{
            msg:'hello'
        },
        methods:{}
    });

</script>
</html>

3.组件的切换

<!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>
</head>

<body>
  <div id="app">
    <a href="" @click.prevent="comName='login'">登录</a>
    <a href="" @click.prevent="comName='register'">注册</a>
    <a href="" @click.prevent="comName='index'">首页</a>
    <component :is="comName"></component>
  </div>


  <script>



    Vue.component('login', {
      template: '<h3>登录组件</h3>'
    })

    Vue.component('register', {
      template: '<h3>注册组件</h3>'
    })
    Vue.component('index', {
      template: '<h3>首页组件</h3>'
    })


    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
          comName:'login'
        },
      methods: {}
    });
  </script>
</body>

</html>
LJ君
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue组件的使用
奇奇怪怪
12-29 3249
组件是可复用的 Vue 实例, 把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可那么我们可以将其抽出为一个组件进行复用。例如 页面头部、侧边、内容区，尾部，上传图片，等多个页面要用到一样的就可以做成组件，提高了代码的复用率。
vue组件传参
fagdg的博客
07-27 4743
1、定义与使用2、父传子使用props，父传给子的数据是只读的(做默认值，读取显示)不能修改3、子传父使用的事件$emit$emit(事件名,事件值)发送一次事件，事件名{counterchange}和事件值{counter}是自定义的$event固定写法，事件的值{counterchange事件的值，也是子组件$emit的第二个参数}...
vue组件使用v-model传值
不懂就问
05-25 7285
<template> <div> <el-cascader v-model="brandSellerArr" :options="brandSellerOption" @change="brandSellerChange" ></el-cascader> </div> </template> <s.
html中使用vue组件
热门推荐
guoyp2126的博客
08-04 2万+
VUE有两种使用方式，一种实在html中直接使用vue做开发，一种是企业级的单页面应用。原认为前一种方式主要作用是为了降低VUE的学习门槛——通过在大家熟悉的HTML环境中使用vue，大家很容易去了解和熟悉VUE。现在看来在html使用vue组件还有两大作用，一个是封装比较复杂的组件，在其他应用中使用，另一个作用是调试样式.........
十分钟教会你Vue组件
iFfy的博客
10-22 5349
为什么要使用组件呢 ? 组件的好处是什么呢 ? 该如何使用组件呢 ?
Vue：组件怎么用？
大叔的博客
04-12 3855
非单文件组件和单文件组件的代码都在这了，还不喝一壶？
Vue组件使用（父组件监听子组件数据变化，子组件使用父组件的数据，并监听父组件的数据变化）
记录一名在读研究生的学习笔记、感悟、开发产物
03-06 5178
本文档概述了Vue.js中父子组件间的数据交互方法。主要包括：父组件如何向子组件传递数据，子组件如何正确接收及使用这些数据而不直接修改它们；子组件如何通过watch监听父组件传递的数据变化并在数据变动时执行相应逻辑；以及父组件如何监听子组件的状态变化，通过子组件触发的自定义事件获取信息。文档提供了代码示例和注意事项。
vue组件
weixin_45701868的博客
05-28 1万+
目录 1.Vue组件的定义、注册方式和模板使用 1.1 组件的定义 定义组件 定义组件名的方式有两种 1.2 组件的分类 1.3 引用模版 2. 组件间数据的通信 2.1 父子组件 2.2 组件间数据通信 2.2.1 子组件访问父组件的数据（父传子） 2.2.2 父组件访问子组件的数据（子传父） 2.2.3 非父子通信 2.2.4 总结组件之间的通讯 2.3 单向数据流 3.过滤器 过滤器分为两种 过滤器使用地方两个位置 全局过滤器 局部过滤器 4.路由 4.1 定
Vue2 组件的使用
qq_52731478的博客
06-05 2776
移动端vantpc端elementUi。
Vue组件
溪斜山遮的博客
01-25 1万+
Vue组件（一）      Vue组件介绍      Vue组件使用步骤      Vue组件的使用      组件中data 和 el 选项      使用 <script> 或 <template> 标签 V组件 组件系统是Vue
vue 组件使用中的一些细节点
08-27
Vue 组件使用中的一些细节点详解 Vue 组件使用中的一些细节点是 Vue 框架中经常遇到的问题，本文将通过基础实例为大家详细介绍 Vue 组件使用中的一些细节点。 细节一：使用 tbody 里面的子组件 在使用 Vue 组件时...
vue组件使用说明
10-29
在本说明中，我们将深入探讨Vue组件的使用。 1. **组件定义** - Vue组件通过`Vue.component()`全局注册，或在局部实例中使用`components`选项进行注册。 - 组件定义通常包括模板、数据、方法和其他选项，如生命...
通过npm引用的vue组件使用详解
08-31
首先，要创建一个Vue组件，需要使用`Vue.extend`方法。这是一个工厂函数，它接受一个包含组件选项的对象，返回一个新的组件构造器。例如： ```javascript var MyComponent = Vue.extend({ // 选项... template: '...
Vue异步组件使用详解
08-30
在实际的Vue单文件组件(SFC)中，我们可以这样使用异步组件： ```html import Vue from 'vue' const searchSearch = Vue.component('searchSearch', function (resolve) { require(['./service-search.vue'], ...
Vue组件的使用教程详解
10-18
在Web开发中，组件化是将复杂的页面拆分成多个可复用的模块的开发方式，Vue.js作为一套前端框架，其组件系统是...以上就是Vue组件的基本使用教程，更多详细内容和高级用法可以参考官方文档，以便更好地掌握组件化开发。
基于ssm和vue的 校园短期闲置资源置换平台源码 校园短期闲置资源置换平台代码（高分毕设项目源码）
08-23
1. 校园短期闲置资源置换平台代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：前端是vue，后端是ssm，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
4S店客户管理小程序-毕业设计，基于微信小程序+SSM+MySql开发，源码+数据库+论文答辩+毕业论文+视频演示
08-23
4S店客户管理小程序-毕业设计，基于微信小程序+SSM+MySql开发，源码+数据库+论文答辩+毕业论文+视频演示 社会的发展和科学技术的进步，互联网技术越来越受欢迎。手机也逐渐受到广大人民群众的喜爱，也逐渐进入了每个用户的使用。手机具有便利性，速度快，效率高，成本低等优点。 因此，构建符合自己要求的操作系统是非常有意义的。 本文从管理员、用户的功能要求出发，4S店客户管理系统中的功能模块主要是实现管理员服务端；首页、个人中心、用户管理、门店管理、车展管理、汽车品牌管理、新闻头条管理、预约试驾管理、我的收藏管理、系统管理，用户客户端：首页、车展、新闻头条、我的。门店客户端：首页、车展、新闻头条、我的经过认真细致的研究，精心准备和规划，最后测试成功，系统可以正常使用。分析功能调整与4S店客户管理系统实现的实际需求相结合，讨论了微信开发者技术与后台结合java语言和MySQL数据库开发4S店客户管理系统的使用。 关键字：4S店客户管理系统小程序 微信开发者 Java技术 MySQL数据库 软件的功能： 1、开发实现4S店客户管理系统的整个系统程序； 2、管理员服务端；首页、个人中心、用户管理、门店管理、车展管理、汽车品牌管理、新闻头条管理、预约试驾管理、我的收藏管理、系统管理等。 3、用户客户端：首页、车展、新闻头条、我的 4、门店客户端：首页、车展、新闻头条、我的等相应操作； 5、基础数据管理：实现系统基本信息的添加、修改及删除等操作，并且根据需求进行交流信息的查看及回复相应操作。
Java项目：基于SSM框架+mysql个性化美食推荐系统含源码和毕业论文
最新发布
08-23
一、项目简介 本项目是一套基于SSM框架+mysql个性化美食推荐系统含源码和毕业论文 包含：项目源码、数据库脚本等，该项目附带全部源码可作为毕设使用。 项目都经过严格调试，eclipse或者idea 确保可以运行！ 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值 二、技术实现 jdk版本：1.8 及以上 ide工具：IDEA或者eclipse 数据库: mysql5.5及以上 后端：spring+springmvc+mybatis+maven+mysql 前端：jsp，css，js 三、系统功能 1、系统角色主要包括：管理员、用户 2、系统功能 主要功能包括： 用户登录 用户注册 首页 个人中心 修改密码 管理员信息 用户管理 美食信息管理 美食信息留言管理 美食信息收藏管理 美食订单管理 博主推荐管理 店址管理 口味管理 轮播图管理 前台主要功能包括： 用户登录 用户注册 首页 个性美食展示 热门美食推荐 美食详情 点我收藏 立即预订 个人中心 美食收藏 美食订单 余额充值 发表留言 博主推荐 跳转到后台等功能
weixin237基于微信小程序的医院挂号预约系统ssm.zip
08-23
现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本微信小程序医院挂号预约系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此微信小程序医院挂号预约系统利用当下成熟完善的SSM框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的MySQL数据库进行程序开发。微信小程序医院挂号预约系统有管理员，用户两个角色。管理员功能有个人中心，用户管理，医生信息管理，医院信息管理，科室信息管理，预约信息管理，预约取消管理，留言板，系统管理。微信小程序用户可以注册登录，查看医院信息，查看医生信息，查看公告资讯，在科室信息里面进行预约，也可以取消预约。微信小程序医院挂号预约系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。
idea中使用vue组件
05-22
在 IDEA 中使用 Vue 组件需要安装 Vue.js 插件。安装方式如下： 1. 打开 IDEA，点击 File -> Settings -> Plugins。 2. 在搜索框中输入 "Vue.js"，选择 "Vue.js" 插件并点击 Install。 3. 安装完成后，重启 IDEA。 安装完成后，你可以在 Vue 项目中使用 Vue 组件。首先，在 Vue 项目的 src 目录下创建一个 components 文件夹，用于存放组件。 然后，在该文件夹下创建一个 Vue 组件，例如 HelloWorld.vue： ``` <template> <div> <h1>{{ message }}</h1> </div> </template> <script> export default { data() { return { message: 'Hello, World!' } } } </script> ``` 接着，在需要使用该组件的 Vue 页面中，引入该组件，并在 template 中使用： ``` <template> <div> <HelloWorld /> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> ``` 这样，就可以在 Vue 页面中使用该组件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值