欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

组件

程序员文章站 2022-06-06 19:54:53
...

模块化是从代码逻辑角度划分的保证功能模块职能单一，组件化是从ui界面划分的方便ui组件重用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3 id="h3">
            {{msg}}
        </h3>
        <!-- <my-com1></my-com1> -->
        <!-- <mycom2></mycom2> -->
        <mycom3></mycom3>
        <login></login>
        <input type="button" value="x" @click="msg='no'">
    </div>
    <!-- #app外，定义组件模板结构 #tmp1 -->
    <template id="tmp1">
        <div>
            <h1>
                全局mycom3组件{{msg}}
            </h1>
        </div>
    </template>
    <template id = "tmp2">
        <div>
            私有
        </div>
    </template>
    <script>
        // var com1 = Vue.extend({
        //     template: '<h3>组件</h3>'
        // })

        // Vue.component('myCom1', com1)
        // Vue.component('myCom1', Vue.extend({
        //     template: '<h3>组件</h3>'
        // }))

        // Vue.component('mycom2', {
        //     template: '<h3>com2组件</h3>'
        // })
        Vue.component('mycom3', {
            template: '#tmp1',
            data:function(){
                return {
                    msg: '组件自己的数据'
                }
            }

        })
        new Vue({
            el: '#app',
            data: {
                name: '',
                msg: new Date()
            },
            methods: {
                add() {
                    console.log('ok')
                }
            },
            components: {
                login: {
                    template: '#tmp2'
                }
            }
        })
    </script>
</body>

</html>

组件切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <a href="" @click.prevent="flag=true">登录</a>
        <a href="" @click.prevent="flag=false">注册</a>
        <login v-if="flag"></login>
        <register v-else="flag"></register>
    </div>
    <script>
        // 组件切换
        Vue.component('login',{
            template: '<h3>登录组件</h3>'
        })
        Vue.component('register',{
            template: '<h3>注册组件</h3>'
        })
        new Vue({
            el: '#app',
            data: {
                flag: true,
                msg: new Date()
            },
            methods: {
                add() {
                    console.log('ok')
                }
            }
        })
    </script>
</body>

</html>

上一篇： PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例_PHP

下一篇： 单元测试框架JMock与Mockito的用法比较