html和Vue-cli使用 全局组件Vue.component

最新推荐文章于 2024-07-14 14:12:04 发布
最新推荐文章于 2024-07-14 14:12:04 发布
阅读量956 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39088411/article/details/106013182
版权

在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="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <wjr></wjr>
    </div>
    <script>
            // 注册全局组件--在任何一个地方都可以使用的组件
            // 参数1 ： 组件名称
            // 参数2 ： 组件的具体内容    模板、方法、数据
            Vue.component('wjr',{
            // 模板       
            template:`
            <div>
            <input type="text">
            <button>全局组件按钮</button>
            <span>{{msg}}</span>
            </div>
            `,
            data:function(){
                return{
                    msg:"Hellow Vue.js!"
                }
            },
            methods:{

            }
        })
        const app = new Vue({
            el:"#app",
            data:{
                
            }
        })



    </script>
</body>
</html>

在Vue-cli中

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false  //是否是生产环境

Vue.component('abc',{
  template:`
  <div>
    <span>我是{{aoe}}</span>
  </div>
  `,
  data:function(){
    return{
      aoe:'啊哦额'
    }
  }
})
// 实例化Vue对象，在整个工程中只有一个Vue对象
new Vue({
  render: h => h(App),  //渲染APP.Vue
}).$mount('#app')

然后在其他的Vue文件中直接使用

//App.Vue
<abc></abc>

全局组件使用CSS样式

ddydyt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue核心——组件Component
Vzichousha_V的博客
01-05 164
Vue组件的使用一， 什么是组件二，组件的创建1，JS内部声明注册2，JS外部声明，内部注册三，组件的调用 一， 什么是组件 组件的本质： 组件的本质是一段HTML代码，这段HTML代码会被当做模板，以便重复使用。 二，组件的创建 使用：         必须声明，并注册后，才能使用。（下例为全局组件为例） 补充...
安装vue-cli&使用vue-cli搭建项目
qq_64001795的博客
09-26 4781
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。xxx 为自己创建项目的名称必须先安装vue,vue-cli，webpack，node等一些必要的环境*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 , 和 。这三个部分分别代表了 html,js,css。
vue component html,Vue Component 总结
weixin_42333370的博客
06-21 1060
vue的component思想允许我们复用UI组件，减少功能重复的代码。通过对html和样式文件以及js文件的封装，使其成为一个具有独立功能的小插件；用户可以通过自定义的标签调用这个插件。本文简单介绍component的基本用法，结合在开发过程中的具体应用场景进一步举例说明，方便大家理解。正文开始：使用自定义的component，首先需要创建一个component，并且将其注册到Vue的作用域中，...
在html中使用vue.js的component
最新发布
weixin_45869412的博客
07-14 238
由于vue.js不依赖于dom元素，所以在body中引入就行，在head中引入会在渲染dom前加载，影响页面加载速度。在vue实例中data可以是一个对象，也可以是一个函数，但是在组件中必须是一个函数。组件是一个对象而不是一个vue实例。
关于Vue全局组件【html，component】
qq_22841387的博客
03-13 683
用了这么久的Vue，现在想静下心来仔细的去看看理论。结合开发的经验，进行更深的理解。 我们经常在项目中提到要将共性的东西抽出来形成组件，但是组件到底是个什么，以全局组件为例 以下是示例代码 <!DOCTYPE html> <html lang='zh_cn'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'>
Vue.component 组件
weixin_42354407的博客
02-23 354
其实组件就是制作自定义的标签，这些标签在HTML中是没有的。 1.全局化注册组件 **html代码 ： ** <div id='app'> <web></web> </div> js 代码： <script> Vue.component('web'{ template:`<div style='color='red''&g...
Vue2基础-Vue2中非单页面组件、组件嵌套、VueComponent详解（HTML版）
大脑不能为空
07-05 753
本文介绍了Vue2在非单页面时组件的创建、嵌套，以及组件中的this是什么，还有一些重要的内置关系。
vue-cli脚手架的.babelrc文件用法说明
10-14
`.babelrc` 文件是 Vue CLI 脚手架中的一个重要配置文件，用于定义 Babel 的转码规则和插件。Babel 是一个广泛使用的 JavaScript 编译器，它允许开发者使用 ES6+ 甚至实验性语言特性，然后将这些新特性转换为广泛...
vue-cli 组件的导入与使用教程详解
08-27
本文详细介绍了 Vue CLI 组件的导入与使用教程，包括组件的导入、注册、使用和导出等步骤。希望本文能够帮助开发者更好地理解 Vue CLI 组件的使用方式。如果您有任何疑问，请随时留言，我们将及时回复。
vue-cli3-template:基于 vue-cli 搭建的前端模板
05-27
基于 vue-cli3 搭建的前端模板，fork 或 clone 本仓库(持续更新中...) :bellhop_bell: 不建议用此作为项目的基础模板 ...支持根据 npm scripts，自动生成 component 和 view 功能 支持采用TinyPNG node.js
详解vue-router和vue-cli以及组件之间的传值
08-30
Vue Router 是 Vue.js 的官方路由库，用于管理应用的页面导航和组件间的通信。它允许我们在不同的组件之间平滑地切换，实现单页应用（SPA）的路由功能。以下是使用 Vue Router 的四个基本步骤： 1. **定义组件**：...
html component标签,Vue中component标签解决项目组件化操作
weixin_31765677的博客
07-01 681
一、 啰嗦几句在vue项目组件化的过程中，遇到了一些问题，什么问题呢？就是在做一个多功能，多可用，多兼容的大组件的时候，发现在这个组件内部，实现了太多的if、for逻辑，包括大量的html元素，虽然说每段功能块都有批注，但是体积还是比较庞大，最近有些需求，需要将页面上的一大块筛选功能剥离开，形成单独的组件，统一数据渲染，统一组件管理，且这些功能无论是样式，或者是从结构来说，差异性都很大，所以考虑了...
vue-cli2 component组件的使用
weixin_36521716的博客
08-16 341
<template> <div class="knowledge--info__side" v-if=" checkRelatedShow('Law') || checkRelatedShow('Standard') || checkRelatedShow('Enforce') || checkRelatedShow('Justice') "> .
vue 自定义组件_vue-什么是组件 Components
weixin_39788740的博客
11-19 398
组件是Vue最强大的功能之一。它们帮助您扩展基本的HTML元素以封装可重用的代码。在高层次上，组件是Vue编译器将行为附加到的自定义元素。在某些情况下，它们也可能会显示为使用特殊is属性扩展的原生HTML元素。使用组件全局注册在前面的章节中我们已经了解到，我们可以创建一个新的Vue实例：new Vue({ el: '#some-element', // options})要注册全局组件，您可以使用...
vue-component组件
CAUC_lin的博客
01-27 3630
组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。将相同的功能进行抽取,封装为组件,这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象 为一个组件树。
html component标签,<component> 标签在 Vue 模板中的作用
weixin_35781524的博客
07-01 466
我刚开始学习 Vuejs，需要使用单文件组件去实现功能，但在此过程中遇到了一个我不清楚的结构：...some code在什么情况下会用到这个结构？为何不使用 来代替呢？我在这里询问这个问题是因为每次我在谷歌上搜索 Vue coponent tag 时，都会获得关于组件本身的信息，而无法得到 component 标签相关的信息。 是一个特殊的 Vue 元素，它可与is 属性结合使用。其作用是有条件...
vue-cli2 component 标签的使用
H_z_s_的博客
01-07 857
vue2 component 标签的使用
Vue学习：VueComponent构造函数.html
weixin_47295886的博客
02-20 190
1、school组件本质是一个VueComponent的构造函数，不是程序员定义的，是Vue.extend生成的 2、我们只需要写 或者 ,Vue解析的时候会帮我创建school组件的实例对象 即Vue帮我执行new VueComponent(options),使用几次调用几次 3、注意：每次调用组件的创建 Vue.extend 返回的都是全新的VueComponent的构造函数() 4、关于this指向 1、组件配置中
vue-cli怎么使用自定义组件
07-28
使用Vue CLI创建的Vue项目，可以很方便地使用自定义组件。下面是一个简单的步骤指南： 1. 首先，确保你已经安装了Vue CLI。如果没有安装，可以使用以下命令进行全局安装： ``` npm install -g @vue/cli ``` 2. 创建一个新的Vue项目。打开命令行终端，进入你想要创建项目的目录，并执行以下命令： ``` vue create my-project ``` 这将创建一个名为"my-project"的新Vue项目。 3. 进入项目目录： ``` cd my-project ``` 4. 在项目中创建你的自定义组件。你可以在`src/components`目录下创建一个新的组件文件，例如`MyComponent.vue`。 5. 在创建的组件文件中，编写你的组件代码。例如，在`MyComponent.vue`中可以写入以下示例代码： ```vue <template> <div> <h1>{{ message }}</h1> <button @click="updateMessage">Update Message</button> </div> </template> <script> export default { data() { return { message: 'Hello, Vue!', }; }, methods: { updateMessage() { this.message = 'Updated Message'; }, }, }; </script> <style scoped> /* 样式 */ </style> ``` 6. 在使用该组件的地方，例如在`App.vue`中，可以通过引入组件并在模板中使用它。例如，在`App.vue`中可以写入以下示例代码： ```vue <template> <div> <my-component></my-component> </div> </template> <script> import MyComponent from './components/MyComponent.vue'; export default { components: { MyComponent, }, }; </script> <style scoped> /* 样式 */ </style> ``` 7. 运行项目： ``` npm run serve ``` 这将启动开发服务器，并在浏览器中显示你的Vue应用。你将能够看到使用自定义组件的效果。 注意：确保在使用自定义组件时，遵循Vue的组件命名规范。例如，组件名必须是驼峰式命名，且在模板中使用时需要使用短横线分隔。例如，如果你的组件名是`MyComponent`，在模板中使用时应该是`<my-component></my-component>`。 希望这能帮助到你！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值