Vue学习笔记二

 

1·input的值绑定

2·v-model修饰符的使用

3·组件化的基本使用

4·全局组件与局部组件

5·父组件和子组件

6·创建全局组建的语法糖

7·创建局部组建的语法糖

8·利用script标签创建组件，注意类型必须是text/x-template

 9·利用template标签创建组件

 10·组件自己的方法和函数（建议使用这个方法创建组件）

 11·父子组件之间的通信

12·父组件通过props将数据传递给子组件

 13·子元素通过emit将数据传递给父组件

 14·给组件提供默认值

 15·父子组件通信---结合双向绑定

 16·利用$children,$refs访问子组件

 17子组件通过$parent访问组件，通过$root访问根组件

 18slot插槽的使用

 19slot插槽具名用法

1·input的值绑定

2·v-model修饰符的使用

<div id="app">
        <label for="txt">
            <!-- 1.  lazy失去焦点后再触发事件 -->
            <input type="text" id="txt" v-model.lazy='message'>{{message}}
        </label>

        <label for="numb">
            <!-- 2.  number保证输入的是数字 -->
            <input type="number" id="numb" v-model.number='num'>{{num}}{{typeof num}}
        </label>
        <label for="txt1">
            <!-- 1.  trim -->
            <input type="text" id="txt1" v-model.trim='ss'>
        </label>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message:'',
                num:0,
                ss:'',
            },
        })
    </script>

 3·组件化的基本使用

<div id="app">
        <mycpn></mycpn>
    </div>

    <script>
        //1.创建组件构造器对象
        const example1 = Vue.extend({
            template:
                `<div>
                    <h1>hello</h1>
                    <p>welcome to my school!</p>
                </div>`
        })

        //2.注册组件
        Vue.component('mycpn',example1)



        const app = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>

4·全局组件与局部组件

<div id="app">
        <cpn></cpn>
    </div>
    <div id="app2">
        <mycpn></mycpn>
    </div>

    <script>
        //1.创建组件构造器对象
        const example1 = Vue.extend({
            template:
                `<div>
                    <h1>hello</h1>
                    <p>welcome to my school!</p>
                </div>`
        })

        // //2.注册组件(全局组件，所有Vue都可以使用)
        // Vue.component('mycpn', example1)



        const app = new Vue({
            el: '#app',
            components: { //2.注册组件(局部组件，只有当前Vue可以使用)
                cpn: example1
            }
        })
        const app2 = new Vue({
            el: '#app2',
        })
    </script>

5·父组件和子组件

<div id="app">
        <cpn2></cpn2>
    </div>
    <script>
        //创建子组件构造器对象
        const example1 = Vue.extend({
            template:
                `<div>
                    <h1>hello</h1>
                    <p>welcome to my school!</p>
                </div>`
        })
        //创建父组件构造器对象
        const example2 = Vue.extend({
            template:
                `<div>
                    <h1>hello</h1>
                    <p>welcome to my school!</p>
                    <cpn1></cpn1>
                </div>`,
            components: {
                cpn1: example1
            }
        })
        const app = new Vue({
            el: '#app',
            components: {
                cpn2: example2
            }
        })
    </script>

6·创建全局组建的语法糖

Vue.component('mycpn', {
            template:
                `<div>
                    <h1>hello</h1>
                    <p>welcome to my school!</p>
                </div>`
        })

7·创建局部组建的语法糖

components: { 
                cpn: {
                    template:
                        `<div>
                    <h1>hello</h1>
                    <p>welcome to my school!</p>
                </div>`
                }
            }

8·利用script标签创建组件，注意类型必须是text/x-template

<div id="app">
        <cpn></cpn>
    </div>


    <!-- 利用script创建标签，注意类型必须是text/x-template -->
    <script type="text/x-template" id='cpn'>
        <div>
            <h1>hello</h1>
            <p>welcome to my school!</p>
        </div>
    </script>


    <script>
        Vue.component('cpn',{
            template:'#cpn'  //  script的id
        })
        const app = new Vue({
            el: '#app',
            components: {
                
            }
        })
    </script>

9·利用template标签创建组件

<div id="app">
        <cpn></cpn>
    </div>

    <!-- 利用template标签创建组件 -->
    <template id='tem'>
        <div>
            <h1>hello</h1>
            <p>welcome to my school!</p>
        </div>
    </template>

    <script>
        Vue.component('cpn', {
            template: '#tem'  //  template的id
        })
        const app = new Vue({
            el: '#app',
            components: {

            }
        })
    </script>

10·组件自己的方法和函数（建议使用这个方法创建组件）

<div id="app">
        <cpn></cpn>
    </div>

    <!-- 利用template标签创建组件 -->
    <template id='tem'>
        <div>
            <h1>hello</h1>
            <p>welcome to my school!</p>
        </div>
    </template>

    <script>
        // Vue.component('cpn', {
        //     template: '#tem'  //  template的id
        // })
        const app = new Vue({
            el: '#app',
            components: {
                cpn: {
                    template: '#tem',
                    data(){//存放组件的数据

                    },
                    methods:{//组件的方法

                    }
                }
            }
        })
    </script>

11·父子组件之间的通信

12·父组件通过props将数据传递给子组件

<!-- 父传子：props -->
    <div id="app">
        <!-- 利用bind绑定数据 -->
        <cpn :cmovies='movies'></cpn>
    </div>


    <template id='tem'>
        <ul>
            <li v-for="item in cmovies">{{item}}</li>
        </ul>
    </template>


    <script>
        const app = new Vue({
            el: '#app',
            data: {
                movies: ['1', '2', '3']//父组件数据
            },
            components: {
                cpn: {
                    template: '#tem',
                    props: ['cmovies',],//通过props传给子组件
                    data() {
                        return {}
                    },

                }
            }
        })
    </script>

13·子元素通过emit将数据传递给父组件

<!-- 子传父：emit -->
    <div id="app">
        <cpn @cpnc='cpnc'></cpn>
    </div>


    <template id='tem'>
        <button @click='btnc'>点击</button>
    </template>


    <script>
        const app = new Vue({
            el: '#app',
            data: {
                movies: ['1', '2', '3']//父组件数据
            },
            methods: {
                cpnc() {
                    console.log('点击！！！！')
                }
            },
            components: {
                cpn: {
                    template: '#tem',
                    data() {
                        return {}
                    },
                    methods: {
                        btnc() {
                            this.$emit('cpnc')
                        }
                    },
                }
            }
        })
    </script>

14·给组件提供默认值

<div id="app">
        <cpn></cpn>
    </div>


    <template id='tem'>
        <div>{{message}}</div>
    </template>


    <script>
        const app = new Vue({
            el: '#app',
            data: {
                
            },
            components: {
                cpn: {
                    template: '#tem',
                    props: {
                        message:{//组件的默认值
                            type:String,
                            default:'aaaaaa'
                        }
                    },
                    data() {
                        return {}
                    },

                }
            }
        })
    </script>

15·父子组件通信---结合双向绑定

16·利用$children,$refs访问子组件

<!-- 利用$children,$refs访问子组件,ref可以指定组件 -->
    <div id="app">
        <cpn></cpn>
        <cpn ref="cpn1"></cpn>
        <button @click='btnck'>点击</button>
    </div>
    <template id="tem">
        <div>
            <label>hello</label>
        </div>
    </template>
    <script>
        const app = new Vue({
            el: '#app',
            methods: {
                btnck() {
                    console.log(this.$children)
                    console.log(this.$refs.cpn1.name)
                }
            },
            components: {
                cpn: {
                    template: '#tem',
                }
            }
        })
    </script>

17子组件通过$parent访问组件，通过$root访问根组件

18slot插槽的使用

<div id="app">
        <cpn></cpn>
        <cpn><button>按钮11111</button></cpn>
    </div>
    <template id="tem">
        <!-- 默认值 -->
        <slot><button>按钮</button></slot>
    </template>
    <script>
        const app = new Vue({
            el: '#app',
            methods: {
                
            },
            components: {
                cpn: {
                    template: '#tem',
                }
            }
        })
    </script>

19slot插槽具名用法

<div id="app">
            <cpn></cpn><button slot="s1">按钮11111</button></cpn>
            <cpn></cpn><button slot="s2">按钮2222</button></cpn>
            <cpn></cpn><button slot="s3">按钮3333</button></cpn>
    </div>
    <template id="tem">
        <slot name='s1'></slot>
        <slot name='s2'></slot>
        <slot name='s3'></slot>
    </template>
    <script>
        const app = new Vue({
            el: '#app',
            methods: {
                
            },
            components: {
                cpn: {
                    template: '#tem',
                }
            }
        })
    </script>