VUE 笔记

最新推荐文章于 2024-09-30 14:28:41 发布

weixin_韩

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量143

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45823347/article/details/106106317

版权

一、事件修饰符

事件修饰符:
.stop阻止事件冒泡
.prevent阻止事件的默认行为
.capture事件捕获
.self自身触发
.once只触发一次

二、组件

组件式vue最强大的功能之一
可以扩展html元素，封装可以重用的代码

优点：
1.能减少代码的重用，提高开发效率
2.降低页面的耦合度，使页面更方便维护和管理

2.1局部组件

    new Vue({
        el:"#app",
        data:{},
        methods:{},
        computed:{},
        filters:{},
        watch:{},
        // components:{//局部
        //     'my-component':{
        //         template:`
        //           <div>
        //             <h1>ｈｅｌｌｏ　ｃｏｍｐｏｎｅｎｔ</h1>  
        //             <input> 
        //           </div>               
        //         `//模板 html元素
                     
        //     }
        // }
    })

(推荐使用)

      var col={
        template:`
                  <div>
                    <h1>{{msg}}</h1>  
                    <input> 
                    <button @click="alt">按钮</button>
                  </div>    
        `,
        data:function(){
            return{
                msg:"hello vue",
                txt:5
            }
        },
        methods:{
            alt(){
                alert()
            }
        }
    }
      new Vue({
        el:"#app",
        data:{},
        methods:{},
        computed:{},
        filters:{},
        watch:{},
        components:{
            'my-component':col
        }
    })

2.2 全局组件

  Vue.component('my-component',{
        template:`
            <div>
                <h1>这是全局组件</h1>
                <input>
            </div>
        `,
        data:function(){
            return{

            }
        },
        methods:{

        }
    })

    new Vue({
        el:"#app"
    })

2.3组件的嵌套

    <script>
        Vue.component('my-component',{
            template:`
                <div>
                    <p>{{msg}}</p>
                </div>
            `,
            data:function(){
                return{
                    msg:'hello vue'
                }
            }
        })


        Vue.component('father',{
            template:`
                <div>
                    <h1>我是父组件</h1>
                    <my-component></my-component>
                </div>
            `
        })

        new Vue({
            el:"#app",

        })
    </script>

2.4组件间的通信

组件之间的通信传值
父组件给子组件传值
1.用属性传
在子组件中用props定义属性 props:[‘属性名’]
子组件给父组件传值
1.用方法传 $emit(‘事件’) 兄弟组件之间的传值

2.4.1：父组件给子组件传值

        <script>
            Vue.component('pa',{
                template:`
                    <div>
                            <h1>我是父组件</h1>
                            <my v-bind:txt="msg"></my>
                    </div>

                `,
                data:function(){
                    return{
                        msg:'我是父组件中的数据，要传给给子组件'
                    }
                }
            })
            
            Vue.component('my',{
                //传一个属性
                props:['txt'],
                template:`
                <div>
                        <h1>我是子组件</h1>
                        <p>{{txt}}</p>
                </div>
                `
            })



            new Vue({
                el:"#app"
            })
        </script>

vue实例给组件传值

         <script>
            Vue.component('pr',{
                props:['txt'],
                template:`
                    <div>
                        <h1>{{txt}}</h1>
                    </div>
                
                `
            })

            new Vue({
                el:"#app",
                data:{
                    msg:'hello vue'
                }
            })
         </script>