脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue之组件

Vue之组件详解

 更新时间：2021年11月21日 15:03:00   作者：王同学要努力  
这篇文章主要为大家介绍了Vue之组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<body>
    <div id="root">
        <h2>{{name}}</h2>
        <hr>
        <school></school>
        <hr>
        <student></student>
        <hr>
        <!-- <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2> -->
    </div>
    <div id="root2">
        <hello></hello>
    </div>
    <script>
        Vue.config.productionTip = false;
        //创建school组件
        //el:'#root'
        //组件定义时 一定不要写el配置项，因为最终所有的组件都要被一个vm管理 由vm决定服务于哪个容器
        const school = Vue.extend({
            template: `
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
               <button @click="showName">点我提示学校名称</button>
                </div>
           `,
            data() {
                return {
                    schoolName: '二中',
                    address: '北京',
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName)
                }
            }
        })
        //第一步：创建组件
        //创建学生组件
        const student = Vue.extend({
            template: `
         <div>  
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
        </div>
           `,
            data() {
                return {
                    name: '小王',
                    age: 20,
                }
            }
        })
        //创建vm
        new Vue({
            el: '#root',
            data: {
                name: '你好，世界！'
            },
            //第二步：注册组件(局部注册)
            components: {
                school,
                student
            }
        })

        const hello = Vue.extend({
            template: `
            <div><h2>你好鸭！王同学</h2></div>
            `
        })
        Vue.component('hello', hello)
        new Vue({
            el: '#root2'
        })
    </script>
</body>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

相关文章

  • Vue 配置代理详情

    Vue 配置代理详情

    这篇文章主要介绍了Vue 配置代理详情，文章围绕主题的相关资料展开详细内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助
    2022-04-04
  • vue3中getCurrentInstance示例讲解

    vue3中getCurrentInstance示例讲解

    这篇文章主要给大家介绍了关于vue3中getCurrentInstance的相关资料,文中还介绍了Vue3中关于getCurrentInstance的大坑,需要的朋友可以参考下
    2023-03-03
  • vue中echarts点击事件点击一次多次触发问题

    vue中echarts点击事件点击一次多次触发问题

    这篇文章主要介绍了vue中echarts点击事件点击一次多次触发问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue和uniapp中该如何使用canvas详解

    Vue和uniapp中该如何使用canvas详解

    说起canvas是css3新增的标签,而饼状图又是canvas经典,我们公司现在正在用uni-app框架去研发APP,下面这篇文章主要给大家介绍了关于Vue和uniapp中该如何使用canvas的相关资料,需要的朋友可以参考下
    2022-10-10
  • vue预览本地pdf文件方法之vue-pdf组件使用

    vue预览本地pdf文件方法之vue-pdf组件使用

    这篇文章主要介绍了vue预览本地pdf文件方法之vue-pdf组件使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue使用ArcGis API for js创建地图实现示例

    vue使用ArcGis API for js创建地图实现示例

    这篇文章主要为大家介绍了vue使用ArcGis API for js创建地图实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue中使用require动态获取图片地址方式

    vue中使用require动态获取图片地址方式

    这篇文章主要介绍了vue中使用require动态获取图片地址方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • vue 项目优雅的对url参数加密详解

    vue 项目优雅的对url参数加密详解

    这篇文章主要为大家介绍了vue 项目优雅的对url参数加密详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • antd form表单中如何嵌套自定义组件

    antd form表单中如何嵌套自定义组件

    这篇文章主要介绍了antd form表单中如何嵌套自定义组件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • 一文弄懂Vite 配置文件

    一文弄懂Vite 配置文件

    Vite 构建环境分为开发环境和生产环境,不同环境会有不同的构建策略,本文就来介绍下Vite 配置文件,具有一定的参考价值,感兴趣的可以了解一下
    2024-08-08

最新评论