Vue入门五、组件化开发

创建组件的两种方式：

创新互联是专业的吉木乃网站建设公司，吉木乃接单;提供网站制作、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行吉木乃网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

1、局部组件声明、注册和使用：

方法一(推荐)、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
    // 局部组件声明
    var myHeader = {
        template: `
        <div>我的头可不是面团捏的</div>
        `
    }
    new Vue({
        el: '#app',
        // 组件注册
        components: {
            myHeader
        },
        // 组件使用
        template: `
            <div>
                <myHeader></myHeader>
            </div>
            `
    })
</script>
</body>
</html>

方法二、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
    // 局部组件声明
    // var myHeader = {
    //     template: `
    //     <div>我的头可不是面团捏的</div>
    //     `
    // }
    var myHeader = Vue.extend({
        template: `
            <div>我的头可不是面团捏的</div>
        `
    })
    new Vue({
        el: '#app',
        // 组件注册
        components: {
            myHeader
        },
        // 组件使用
        template: `
            <div>
                <myHeader></myHeader>
            </div>
            `
    })
</script>
</body>
</html>

2、全局组件的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
    // 组件声明加注册
    Vue.component('myFoot', {
        template:`
            <div>我没有尾巴</div>
        `
    })
    new Vue({
        el: '#app',
        template: `
                <div>
                    <!--组件的使用-->
                    <myFoot></myFoot>
                </div>
            `
    })
</script>
</body>
</html>

上一篇：java怎么指定枚举的行为

下一篇：怎么在Android中利用LeakCanary对内存泄漏进行排查