首页 > 其他分享 >Vue中的全局组件

Vue中的全局组件

时间:2024-09-12 14:36:36浏览次数:7  
标签:Vue component msg template 组件 全局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
<my-component>  </my-component>

    </div>
    <template id="my-component-template">
        <div>
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">产品</a></li>
                <li><a href="">公司简介</a></li>
                <li><a href="">联系我们</a></li>
                {{msg}}
            </ul>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        //定义全局组件
     Vue.component('my-component',{
        template:'#my-component-template',
           data(){
               return{
                   msg:'我是全局组件'
               }
           }
        })


        var vm=new Vue({
            el:'#app',
            data:{
                message:'Hello Vue.js!'
            }

        })
    </script>
</body>
</html>

标签:Vue,component,msg,template,组件,全局
From: https://www.cnblogs.com/zy8899/p/18410134

相关文章

  • 基于java+SpringBoot+Vue的小徐影城管理系统设计与实现
    开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis工具:IDEA/Ecilpse、Navicat、Maven系统简介小徐影城管理系统是一款基于Java、SpringBoot和Vue.js技术开发的影院管理系统,旨在为用户提供一个便捷、高效的在线购票和影院管理平台。系统通过B/S架构,实现了管理员和用......
  • VUE自定义指令
    在Vue.js中,自定义指令允许你创建自己的DOM操作逻辑。虽然Vue3中的自定义指令相对较少使用(因为许多功能可以通过组件和其他API实现),但它们仍然是一个有用的工具。下面是如何在Vue中创建和使用自定义指令的基本步骤。1.创建自定义指令自定义指令可以通过app.directive......
  • VUE实例的生命周期钩子函数有哪些
    Vue.js实例的生命周期钩子函数是在Vue实例的不同阶段被调用的方法,开发者可以在这些钩子函数中执行相应的逻辑。以下是Vue实例的生命周期钩子函数及其作用的详细介绍:生命周期钩子函数beforeCreate在实例初始化后,数据观测和事件配置之前被调用。此时,实例的data和even......
  • VUE双向数据绑定
    在Vue.js中,双向数据绑定是其核心特性之一,它允许数据在模型和视图之间自动同步。以下是关于Vue的双向数据绑定的详细说明,包括原理、实现方式和示例。1.双向数据绑定的原理Vue.js通过使用数据劫持和发布-订阅模式实现双向数据绑定。当数据模型发生变化时,视图会自动更新;......
  • VUE父子组件如何通信
    在Vue.js中,父子组件之间的通信有多种方式。以下是几种常见的方法:1.通过Props传递数据(父组件向子组件)父组件可以通过props将数据传递给子组件。这是父子组件之间最常见的通信方式。<!--ParentComponent.vue--><template><ChildComponent:message="parentMessage"......
  • 解决vue3 useRoute无法获取get参数记录
    总结:使用route.query无法获取到get参数,开发模式代码改动能拿到,但是刷新又没了,需要监听route.query才能拿到get参数。正文:我的常规使用方法:先安装vue-routernpminstallvue-router@next创建src/router/index.js:import{createRouter,createWebHistory}from'vue-rou......
  • Vue3学习
    Vue3学习Vue3学习(一)——创建Vue3工程1.安装Node.js首先,确保你的系统上已经安装了Node.js。你可以通过运行以下命令检查:node-vnpm-v2.使用Vite创建Vue3项目在终端(命令行)中,运行以下命令来创建一个新的Vue3项目:npmcreatevite@latestmy-vue-app----temp......
  • 【开源免费】基于SpringBoot+Vue.JS在线视频教育平台(JAVA毕业设计)
    本文项目编号T027,文末自助获取源码\color{red}{T027,文末自助获取源码}......
  • 【开源免费】基于SpringBoot+Vue.JS校园管理系统(JAVA毕业设计)
    本文项目编号T026,文末自助获取源码\color{red}{T026,文末自助获取源码}......
  • vue3兄弟组件间的通信 mitt
    1、安装插件npmimitt-s2、在scr下的utils文件创建mitt.ts文件/***@author*@date20240912*@descriptionCreate$bus,使用方式$bus.emit/$bus.on**/importmittfrom'mitt'const$bus=mitt()exportdefault$bus两个子组件都引入mitt.js文件3、......