脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 项目中实现按钮防抖方法,首先需要新建 .js文件存放防抖方法，引入防抖文件,methods中添加方法，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-12-12
  • Vue 如何import服务器上的js配置文件

    Vue 如何import服务器上的js配置文件

    这篇文章主要介绍了Vue 如何import服务器上的js配置文件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
    2021-04-04
  • Vue Router初始化路由信息详解

    Vue Router初始化路由信息详解

    这篇文章主要为大家详细介绍了Vue Router初始化路由信息的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下
    2023-11-11
  • vue+elementui实现下拉表格多选和搜索功能

    vue+elementui实现下拉表格多选和搜索功能

    这篇文章主要为大家详细介绍了vue+elementui实现下拉表格多选和搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • vue 实现超长文本截取,悬浮框提示

    vue 实现超长文本截取,悬浮框提示

    这篇文章主要介绍了vue 实现超长文本截取,悬浮框提示，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue关于Element UI中的文本域换行问题

    Vue关于Element UI中的文本域换行问题

    这篇文章主要介绍了Vue关于Element UI中的文本域换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue修改proxyTable解决跨域请求,报404的问题及解决

    vue修改proxyTable解决跨域请求,报404的问题及解决

    这篇文章主要介绍了vue修改proxyTable解决跨域请求,报404的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07
  • Vue+ElementUI怎么处理超大表单实例讲解

    Vue+ElementUI怎么处理超大表单实例讲解

    在本篇文章里小编给大家整理的是一篇关于Vue+ElementUI怎么处理超大表单实例讲解内容，以后需要的朋友可以跟着学习参考下。
    2021-11-11
  • vue如何解决代码需要在dom渲染之后执行问题

    vue如何解决代码需要在dom渲染之后执行问题

    这篇文章主要介绍了vue如何解决代码需要在dom渲染之后执行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue实践---根据不同环境,自动转换请求的url地址操作

    vue实践---根据不同环境,自动转换请求的url地址操作

    这篇文章主要介绍了vue实践---根据不同环境,自动转换请求的url地址操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论