zoukankan      html  css  js  c++  java
  • Vue组件

    组件

    1. 组件:有html模板,有css样式,有js逻辑的集合体

    2. 根组件的模板就是用挂载点,子组件必须自己定义template(局部子组件、全局子组件)

    局部组件

    <div id="app">
        <!--div.box>h1{标题}+(p.p${文本内容}*2)-->
        <abc></abc>
        <abc></abc>
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 定义局部组件
        let localTag = {
            // 1.data要达到组件的复用,必须为每个组件提供一个名称空间(作用域)
            // 2.data的值就是一个存放数据的字典
            // 需要满足1和2,data值为一个可以产生名称空间的函数的返回值,返回值是字典
            data: function () {
                return {
                    count: 0,
                    // r: ''
                }
            },
            template: `
            <div class="box" style="border: solid;  100px">
                <h1>标题</h1>
                <p class="p1">文本内容</p>
                <p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
                <button @click="send"></button>
            </div>
            `,
            methods: {
                action: function () {
                    this.count++
                },
                // 结合JQ完成组件与后台的交互
                // send: function () {
                //     $.ajax({
                //         url:,
                //         type:,
                //         data:,
                //         success: function (result) {
                //             this.r = result
                //         }
                //     })
                // },
                // watch: {
                //     r: function () {
                //
                //     }
                // }
            }
        };
    
        new Vue({
            el: '#app',
            data: {
    
            },
            // 局部组件必须注册
            components: {
                'abc': localTag
            }
        })
    </script>
    

    全局组件

    <div id="app">
        <!--在标签中建议使用 - 语法命名,对应js中就是驼峰命名-->
        <old-boy></old-boy>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        // Vue.component(组件名, {组件主体});
        Vue.component('oldBoy', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: `
            <div class="box" style="border: solid;  100px">
                <h1>全局</h1>
                <p class="p1">文本内容</p>
                <p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
            </div>
            `,
            methods: {
                action: function () {
                    this.count++
                },
            }
        });
        // 全局组件无需注册
        new Vue({
            el: '#app',
            data: {
    
            }
        })
    </script>
    

    组件间的交互:父传子

    <div id="app">
        <!-- local-tag就可以理解为自定义标签,使用msg变量值由父组件提供 -->
        <!-- local-tag标签代表的是子组件,owen为标签的自定义属性 -->
        <!-- 在子组件内部能拿到owen,就可以拿到父组件的信息 -->
        <local-tag :owen="msg"></local-tag>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        let localTag = {
            // 子组件拿自定义属性
            props: ['owen'],
            template: `
            <div>
                <h1>信息</h1>
                <p>{{ owen }}</p>
            </div>
            `
        };
    
        new Vue({
            el: '#app',
            data: {
                msg: '父级的信息'
            },
            components: {
                // 'localTag': localTag,
                // localTag: localTag,
                localTag  // 在页面中 <local-tag>
            }
        })
    </script>
    

    组件间的交互:子传父

    <div id="app">
        <h1>{{ title }}</h1>
        <global-tag @recv="get_title"></global-tag>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        Vue.component('global-tag', {
            template: `
            <div>
                <input type="text" v-model="msg">
                <!--<button @click="action">修改标题</button>-->
            </div>
            `,
            data: function () {
                return {
                    msg: ''
                }
            },
            methods: {
                // action: function () {
                //     let msg = this.msg;
                //     // recv是自定义的事件
                //     this.$emit('recv', msg)
                // }
            },
            watch: {
                msg: function () {  // 只要msg只有变化,就将值同步给父组件
                    this.$emit('recv', this.msg)
                }
            }
        });
    
        new Vue({
            el: '#app',
            data: {
                title: '父组件定义的标题'
            },
            methods: {
                get_title: function (msg) {
                    this.title = msg
                }
            }
        })
    </script>
    
  • 相关阅读:
    好的开源项目汇总
    强制SVN上传代码时添加日志
    微信开发-回调模式
    Struct2中自定义的Filter无效
    Ajax 传包含集合的JSON
    PostgreSQL数据库PL/PGSQL学习使用
    单用户对比PG 9.5.4和SYBASE 15.7对超大表的操作性能
    一场一波三折的SQL优化经历
    聚簇索引对数据插入的影响
    磁盘IO初探
  • 原文地址:https://www.cnblogs.com/majingjie/p/11097697.html
Copyright © 2011-2022 走看看