Vue的基本使用(二)

1.数据的双向绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>1</title>

</head>

<body>

<div id="app">

    <label for="username">用户名:</label>

    <input type="text" v-model="msg" id="username">

    <p>{{ msg }}</p>

    <textarea name="" id="" cols="30" rows="10" placeholder="add multiple lines" v-model = "msg"></textarea>

    <input type="checkbox" id="checkbox" v-model = "checked">

    <label for="checkbox">{{ checked }}</label>

    <br>

    <input type="checkbox" id="jack" value="Jack" v-model = "checkedNames">

    <label for="jack">Jack</label>

    <input type="checkbox" id="join" value="Join" v-model = "checkedNames">

    <label for="join">Join</label>

    <input type="checkbox" id="mike" value="Mike" v-model = "checkedNames">

    <label for="mike">Mike</label>

    <br>

    <span>Checked names:{{ checkedNames }}</span>

    <br>

    <select name="" id="" v-model = "selected">

        <option value="" disabled>请选择</option>

        <option value="">A</option>

        <option value="">B</option>

        <option value="">C</option>

    </select>

    <span>Selected:{{ selected }}</span>

    <!--懒监听-->

    <input type="text" v-model.lazy = "msg">

    <!--数字显示-->

    <input type="text" v-model.number = "age" type = "number">

    <!--清除前后空格-->

    <input type="text v-model.trim = "msg>

</div>

<script src="../vue/dist/vue.js"></script>

<script>

new Vue({

    el:"#app",

    data(){

        return {

            msg:"alex",

            checked:false,

            checkedNames:[],

            selected:'',

            age:0

        }

    }

})

</script>

</body>

</html>

2.双向数据绑定实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>2</title>

</head>

<body>

<div id="app">

    <input type="text" :value="msg" @input = "changeHandler">

    <p>{{ msg }}</p>

</div>

<script src="../vue/dist/vue.js"></script>

<script>

    new Vue({

        el:"#app",

        data(){

            return {

                msg:"alex"

            }

        },

        methods:{

            changeHandler(e){

                this.msg = e.target.value

            }

        }

    })

</script>

</body>

</html>

3.局部组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>3</title>

</head>

<body>

<div id="app">

    {{ msg }}

</div>

<script src="../vue/dist/vue.js"></script>

<script>

    //如果仅仅是实例化vue对象中既有el又有template,如果template中定义模板的内容,

    // 那么template模板的优先级大于el

    //1.声子, vue组件的名字首字母要大写,跟标签区分,组件中的data必须是一个函数,一定要有返回值

    let App = {

        data(){

            return {

                text:"ritian"

            }

        },

        template:`

        <div id="a">

        <h2>{{ text }}</h2>

        </div>

        `,

        methods:{}

    }

    new Vue({

        el:"#app",

        data(){

            return {

                msg:"alex"

            }

        },

        //用子

        template:`

        <div class="app">

        <App></App>

        </div>

        `,

        //挂子

        components:{

            //如果key和value一样,可以只写一个

            //App:App

            App

        }

    })

</script>

</body>

</html>

4.局部组件的使用更改

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>4</title>

</head>

<body>

<div id="app">

    <App></App>

</div>

<script src="../vue/dist/vue.js"></script>

<script>

    //slot是vue中提供的内容组件,它会去分发内容

    //可复用的vue组件

    Vue.component("VBtn",{

        data(){

            return {}

        },

        template:`

        <button><slot></slot></button>

        `

    });

    let Vheader = {

        data(){

            return {}

        },

        template:`

        <div>

            <h2>ritian</h2>

            <h2>ritian</h2>

            <VBtn>登录</VBtn>

            <VBtn>注册</VBtn>

            <VBtn>按钮</VBtn>

            <VBtn>提交</VBtn>

        </div>

        `

    };

    let App = {

        data(){

            return {

                text:"我是ritian"

            }

        },

        template:`

        <div id="a">

        <h2>{{ text }}</h2>

        <Vheader></Vheader>

        <VBtn>删除</VBtn>

        <br>

        </div>

        `,

        methods:{},

        components:{

            Vheader

        }

    };

    new Vue({

        el:"#app",

        data(){

            return {

                msg:"alex"

            }

        },

        template:`<App/>`,

        components:{

            App

        }

    })

</script>

</body>

</html>

5.父往子传值（通过标签传值或平行组件）

1.在子组件中,使用props声明接收父组件传过来的数据,可以直接在子组件中任意使用

2.加：动态传，不加：静态传

3.父组件要定义自定义的属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>5</title>

</head>

<body>

<div id="app">

    <App></App>

</div>

<script src="../vue/dist/vue.js"></script>

<script>

    Vue.component("VBtn", {

        data() {

            return {}

        },

        template: `

    <button>{{ id }}</button>

    `,

        props: ["id"]

    });

    let Vheader = {

        data() {

            return {}

        },

        props:["msg","post"],

        template:`

        <div class="child">

            <h2>ritian</h2>

            <h2>{{ msg }}</h2>

            <h3>{{ post.title }}</h3>

            <VBtn v-bind:id = "post.id"></VBtn>

        </div>

        `

    };

    let App = {

        data(){

            return {

                text:"我是父组件的数据",

                post:{

                    id:1,

                    title:"My Journey with Vue"

                }

            }

        },

        template:`

        <div id="a">

        <Vheader :msg = "text" v-bind:post = "post"></Vheader>

        </div>

        `,

        methods:{},

        components:{

            Vheader

        }

    };

    new Vue({

        el:"#app",

        data(){

            return {

                msg:"alex"

            }

        },

        template:`<App />`,

        components:{

            App

        }

    })

</script>

</body>

</html>

6.子往父传值

1.子组件中通过$emit("自定义事件名"，传的值)触发父组件中自定义的事件,比如this.$emit("handler",1)

2.父组件中声明自定义的事件介绍（在子标签名中@事件名）,例如：<Son @handler='父自定义事件名'/>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>6</title>

</head>

<body>

<div id="app">

    <App></App>

</div>

<script src="../vue/dist/vue.js"></script>

<script>

    Vue.component("VBtn",{

        data(){

            return {}

        },

        template:`<button @click = "clickHandler">{{ id }}</button>`,

        props:['id'],

        methods:{

            clickHandler(){

                //每个组件中的this指的是当前组件对象

                console.log(this);

                this.id++;

                //this.$emit("父组件声明自定义的事件","传值");

                this.$emit("clickHandler",this.id);

            }

        }

    });

    let Vheader = {

        data(){

            return {}

        },

        props:["msg","post"],

        template:`

        <div class="child">

        <h1>我是header组件</h1>

        <h2>ritian</h2>

        <h2>{{ msg }}</h2>

        <h3>{{ post.title }}</h3>

        <VBtn v-bind:id = "post.id" @clickHandler = "clickHandler"></VBtn>

        </div>

        `,

        methods:{

            clickHandler(val){

                this.$emit("fatherHandler",val)

            }

        },

        created(){

            console.log(this);

        },

    };

    let App = {

        data(){

            return {

                text:"我是父组件的数据",

                post:{

                    id:1,

                    title:"My Journey with Vue"

                }

            }

        },

        template:`

        <div id="a">

        我是父组件的{{ post.id }}

        <Vheader :msg = "text" v-bind:post = "post" @fatherHandler = "father_handler"></Vheader>

        </div>

        `,

        methods:{

            father_handler(val){

                console.log(val);

                this.post.id = val;

            }

        },

        components:{

            Vheader

        },

        created(){

            console.log(this);

        },

    };

    new Vue({

        el:"#app",

        data(){

            return {

                msg:"alex"

            }

        },

        created(){

            console.log(this);

        },

        template:`<App />`,

        components:{

            App

        }

    })

</script>

</body>

</html>

7.平行组件传值

使用$on()和$emit()绑定的是同一个实例化对象

A===>B传值

1.B组件中要使用$on("事件的名字",function(){})

2.A组件中使用$emit("事件的名字",值)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>7</title>

</head>

<body>

<div id="app">

    <App/>

</div>

<script src="../vue/dist/vue.js"></script>

<script>

    let bus = new Vue();

    // A=>B B要声明事件 $on("事件的名字",function(val){}) A要触发的事件 $emit("A组件中声明的事件名","值")

    //前提,这两个方法必须绑定在同一个实例化对象(bus)

    Vue.component("Test2",{

        data(){

            return {

                text:""

            }

        },

        template:`

        <h2>{{ text }}</h2>

        `,

        methods:{},

        created(){

            bus.$on("testData",(val)=>{

                this.text = val;

            })

        }

    });

    Vue.component("Test",{

        data(){

            return {

                msg:"我是子组件的数据"

            }

        },

        props:["txt"],

        template:`

        <button @click = "clickHandler">{{ txt }}</button>

        `,

        methods:{

            clickHandler(){

                bus.$emit("testData",this.msg)

            }

        }

    });

    let Vheader = {

        data(){

            return {txt:"wusr"}

        },

        template:`

        <div class="header">

        <Test :txt = "txt"/>

        <Test2 />

        </div>

        `

    };

    let App = {

        data(){

            return {}

        },

        template:`

        <div class="app">

        <Vheader />

        </div>

        `,

        components:{

            Vheader

        }

    };

    new Vue({

        el:"#app",

        data(){

            return {}

        },

        components:{

            App

        }

    })

</script>

</body>

</html>

总结：

1.父往子传值：在父组件中的template中的子组件名的标签中写入要传的值，子组件通过props接收父组件传过来的值

2.子往父传值：在子组件中this.$emit("事件名"，值)，在父组件中任意标签中(例如<button @事件名="父组件自定义的事件名">),然后在父组件中的methos中写父组件自定义的事件名的方法

3.平行组件传值：先在main.js中定义全局对象(let bus = new Vue())，

　　父（子）往子（父）传值：

　　传值的一方：this.$bus.$emit("事件名"，name)

　　接收值的一方：this.$bus.$on("事件名"，name=>{this.name=name})