关于初学vue的笔记

vue基本：
html:

{{msg}}

var c = new vue({
el:"#box", //选择器
data:{
msg: ‘welcome vue!’
}
})
常用指令：（指令-- >扩展html标签功能属性）
vue: v-modle 一般表单元素（input）双向数据绑定
循环：v-for=“name in arr/(name index) in arr”
{{name}} {{index}}
v-for=“name in json/(name,key) in json/(name,key,index) in json”
{{name}} {{key}} {{index}}

  angular:  ng-modle   ng-controller   ng-repeat    ng-click   ng-show
                 $scope.show = function(){}

事件：
v-on:click=“函数” —简写为----> @click=“函数”
v-on:click/dbclick/mouseout/mouseover/mousedown…
new vue({
el:"#box",
data:{
arr: [‘apple’,‘banana’,‘orange’],
json:{a:‘apple’,b:‘banana’,c:‘orange’}
},
methods:{
show:function(){alert(1)}
}
})
html:

显示隐藏：
v-show = “true/false”

事件对象：
@click=“show(event)”

事假冒泡：
阻止冒泡 1、ev.cancelBubble = true;
2、@click.stop 推荐

默认行为：
阻止默认行为 1、ev.preventDefault();
2、@contextmenu.prevent 推荐

键盘事件：
@keydown $event ev.keyCode
常用键：
回车 1、@keyup.13
2、@keyup.enter
上、下、左、右
@keyup/keydown.up/down/left/right

一、事件修饰符
事件修饰符：
// .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组件间的通信

    //组件之间的通信传值
            //父组件给子组件传值
            //子组件给父组件传值
            //兄弟组件之间的传值


    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>