Vue 非单文件组件

一、Vue组件使用的三大步

1、定义组件

2、注册组件

3、使用组件

二、定义组件

1、Vue.extend({})与new Vue({})基本相似，Vue.extend不适用el，data要写返回函数

2、template用来写html结构，注意要加div包裹起来

3、简写

const s = {
            template:`
                <div>
                <h2>{{content}}</h2>
                </div>
            `,
            data() {
                return {
                    content:'Hello World'
                }
            },
}

4、name: 名称，只在Vue开发者工具中起作用，在开发者工具组显示名称

三、注册组件

1、局部注册

new Vue({
   ...,
   compents:{
    组件使用名: 组件定义名,
}   
})

2、全局组件

Vue.component('使用组件名称', 组件定义名)

四、使用组件

在模板容器中 <使用组件名称></使用组件名称>，或 <使用组件名称/>

注意：<使用组件名称/>，这种格式只有在脚手架中起作用

五、组件名称的格式

1、单词 首字母小写 或 首字母大学

2、多词 xx-xx 或 大驼峰(在Vue脚手架中不报错)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="container">
        <!-- 使用组件 -->
         <school></school>
         <hr>
         <student></student>
         <hr>
         <stest></stest>
    </div>

    <script type="text/javascript">
        //创建组件
        const school = Vue.extend({
            template:`
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
            `,
            data() {
                return {
                    name:'常州工学院',
                    address: '常州'
                }
            },
        })
        //创建组件
        const student = Vue.extend({
            template:`
             <div>
                <h2>学生名称：{{name}}</h2>
                <h2>学生年龄：{{age}}</h2>
             </div>
            `,
            data() {
                return {
                    name:'jojo',
                    age: 18
                }
            },
        })
        // 简写 创建组件
        const s = {
            template:`
                <div>
                <h2>{{content}}</h2>
                </div>
            `,
            data() {
                return {
                    content:'Hello World'
                }
            },
        }

        // 全局注册组件
        Vue.component('stest', s)
        
        new Vue({
            el:'#container',
            // 注册组件
            components:{
                school:school,
                student:student,
            }
        })
    </script>
</body>
</html>

六、组件嵌套

app组件，vue组件之下，其他组件之上

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件嵌套</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <divid="container">
        
    </div>

    <script type="text/javascript">

         // 创建学生组件, student组件嵌套在school组件里,注意要先写student组件
         const student = {
            template:`
            <div>
                <h2>学生姓名：{{name}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
            `,
            data() {
                return {
                    name:'jojo',
                    age:18
                }
            },

        }

        // 创建 school 组件
        const school = {
            template:`
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <student></student>
            </div>
            `,
            data() {
                return {
                    name:'常州工学院',
                    address:'常州'
                }
            },
            //注册student组件
            components:{
                student:student
            },
        }
        // 创建info组件
        const showinfo = {
            template:`
                <h2>{{msg}}</h2>
            `,
            data() {
                return {
                    msg:'Hello World!'
                }
            },
        }
       
        //创建 app 组件，vue之下， 万人之上
        const app={
            template:`
                <div>
                    <school></school>
                    <showinfo></showinfo>
                </div>
            `,
            components:{
                school:school,
                showinfo:showinfo
            }
        }
        new Vue({
            el:'#container',
            template:`
                <app></app>
            `,
            components:{
                app:app
            }
        })
    </script>
</body>
</html>

 

posted @ 2025-01-01 15:36  市丸银  阅读(23)  评论(0)    收藏  举报