zoukankan      html  css  js  c++  java
  • vue.js 学习记录(二)

    原文连接:http://www.cnblogs.com/keepfool/p/5625583.html

     组件

    #注册组件

    Vue.component('my-component', {
      // 选项
    })

    组件在注册之后,便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例 之前 注册了组件:

    <!DOCTYPE html>
    <html>
        <body>
            <div id="app">
                <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
                <my-component></my-component>
            </div>
        </body>
        <script src="vue.min.js"></script>
        <script>
        
            // 1.创建一个组件构造器
            var myComponent = Vue.extend({
                template: '<div>This is my first component!</div>'
            })
            
            // 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
            Vue.component('my-component', myComponent)
            
            new Vue({
                el: '#app'
            });
            
        </script>
    </html>

    1. Vue.extend()是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器。 
    2. Vue.extend()构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的HTML。 
    3. 使用Vue.component()注册组件时,需要提供2个参数,第1个参数时组件的标签,第2个参数是组件构造器。 
    4. 组件应该挂载到某个Vue实例下,否则它不会生效。

    请注意第4点,以下代码在3个地方使用了<my-component>标签,但只有#app1和#app2下的<my-component>标签才起到作用。

    <!DOCTYPE html>
    <html>
        <body>
            <div id="app1">
                <my-component></my-component>
            </div>
            
            <div id="app2">
                <my-component></my-component>
            </div>
            
            <!--该组件不会被渲染-->
            <my-component></my-component>
        </body>
        <script src="js/vue.js"></script>
        <script>
            var myComponent = Vue.extend({
                template: '<div>This is a component!</div>'
            })
            
            Vue.component('my-component', myComponent)
            
            var app1 = new Vue({
                el: '#app1'
            });
            
            var app2 = new Vue({
                el: '#app2'
            })
        </script>
    </html>

    调用Vue.component()注册组件时,组件的注册是全局的,这意味着该组件可以在任意Vue示例下使用。
    如果不需要全局注册,或者是让组件使用在其它组件内,可以用选项对象的components属性实现局部注册

    上面的示例可以改为局部注册的方式:

    <!DOCTYPE html>
    <html>
        <body>
            <div id="app">
                <!-- 3. my-component只能在#app下使用-->
                <my-component></my-component>
            </div>
        </body>
        <script src="js/vue.js"></script>
        <script>
            // 1.创建一个组件构造器
            var myComponent = Vue.extend({
                template: '<div>This is my first component!</div>'
            })
            
            new Vue({
                el: '#app',
                components: {
                    // 2. 将myComponent组件注册到Vue实例下
                    'my-component' : myComponent
                }
            });
        </script>
    </html>

    父组件和子组件

    我们可以在组件中定义并使用其他组件,这就构成了父子组件的关系。

    <!DOCTYPE html>
    <html>
        <body>
            <div id="app">
                <parent-component>
                </parent-component>
            </div>
        </body>
        <script src="js/vue.js"></script>
        <script>
            
            var Child = Vue.extend({
                template: '<p>This is a child component!</p>'
            })
            
            var Parent = Vue.extend({
                // 在Parent组件内使用<child-component>标签
                template :'<p>This is a Parent component</p><child-component></child-component>',
                components: {
                    // 局部注册Child组件,该组件只能在Parent组件内使用
                    'child-component': Child
                }
            })
            
            // 全局注册Parent组件
            Vue.component('parent-component', Parent)
            
            new Vue({
                el: '#app'
            })
            
        </script>
    </html>

    我们分几个步骤来理解这段代码:

    1. var Child = Vue.extend(...)定义一了个Child组件构造器
    2. var Parent = Vue.extend(...)定义一个Parent组件构造器
    3. components: { 'child-component': Child },将Child组件注册到Parent组件,并将Child组件的标签设置为child-component
    4. template :'<p>This is a Parent component</p><child-component></child-component>',在Parent组件内以标签的形式使用Child组件。
    5. Vue.component('parent-component', Parent) 全局注册Parent组件
    6. 在页面中使用<parent-component>标签渲染Parent组件的内容,同时Child组件的内容也被渲染出来

    #简化注册组件

    使用Vue.component()直接创建和注册组件:
    
    // 全局注册,my-component1是标签名称
    Vue.component('my-component1',{
        template: '<div>This is the first component!</div>'
    })
    
    var vm1 = new Vue({
        el: '#app1'
    })
    在选项对象的components属性中实现局部注册:
    
    var vm2 = new Vue({
        el: '#app2',
        components: {
            // 局部注册,my-component2是标签名称
            'my-component2': {
                template: '<div>This is the second component!</div>'
            },
            // 局部注册,my-component3是标签名称
            'my-component3': {
                template: '<div>This is the third component!</div>'
            }
        }
    })

    #使用script或template标签

    尽管语法糖简化了组件注册,但在template选项中拼接HTML元素比较麻烦,这也导致了HTML和JavaScript的高耦合性。
    庆幸的是,Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。

    <!DOCTYPE html>
    <html>
        <body>
            <div id="app">
                <my-component></my-component>
            </div>
            
            <script type="text/x-template" id="myComponent">
                <div>This is a component!</div>
            </script>
        </body>
        <script src="js/vue.js"></script>
        <script>
            
            Vue.component('my-component',{
                template: '#myComponent'
            })
            
            new Vue({
                el: '#app'
            })
            
        </script>
    </html>

    template选项现在不再是HTML元素,而是一个id,Vue.js根据这个id查找对应的元素,然后将这个元素内的HTML作为模板进行编译。

     使用<script>标签时,type指定为text/x-template,意在告诉浏览器这不是一段js脚本

    如果使用<template>标签,则不需要指定type属性。
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <my-component></my-component>
            </div>
            
            <template id="myComponent">
                <div>This is a component!</div>
            </template>
        </body>
        <script src="js/vue.js"></script>
        <script>
            
            Vue.component('my-component',{
                template: '#myComponent'
            })
            
            new Vue({
                el: '#app'
            })
            
        </script>
    </html>

    #使用props

    组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

    <!DOCTYPE html>
    <html>
        <body>
           <div id="app">
              <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
           </div>     
            
            <template id="myComponent">
                    <table>
                        <tr>
                            <th colspan="2">
                                子组件数据
                            </th>
                        </tr>
                        <tr>
                            <td>my name</td>
                            <td>{{ myName }}</td>
                        </tr>
                        <tr>
                            <td>my age</td>
                            <td>{{ myAge }}</td>
                        </tr>
                    </table>
                 </template>
           
        </body>
        <script src="vue.min.js"></script>
        <script>
            
           var vm = new Vue({
                    el: '#app',
                    data: {
                        name: 'keepfool',
                        age: 28
                    },
                    components: {
                        'my-component': {
                            template: '#myComponent',
                            props: ['myName', 'myAge']
                        }
                    }
                })
          
            
        </script>
    </html>

    #prop 绑定类型

    单项绑定

    <!DOCTYPE html>
    <html>
        <body>
           <div id="app">
    
                        <table>
                            <tr>
                                <th colspan="3">父组件数据</td>
                            </tr>
                            <tr>
                                <td>name</td>
                                <td>{{ name }}</td>
                                <td><input type="text" v-model="name" /></td>
                            </tr>
                            <tr>
                                <td>age</td>
                                <td>{{ age }}</td>
                                <td><input type="text" v-model="age" /></td>
                            </tr>
                        </table>
                    
                        <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
                    </div>
                    
                    <template id="myComponent">
                        <table>
                            <tr>
                                <th colspan="3">子组件数据</td>
                            </tr>
                            <tr>
                                <td>my name</td>
                                <td>{{ myName }}</td>
                                <td><input type="text" v-model="myName" /></td>
                            </tr>
                            <tr>
                                <td>my age</td>
                                <td>{{ myAge }}</td>
                                <td><input type="text" v-model="myAge" /></td>
                            </tr>
                        </table>
                    </template>
           
        </body>
        <script src="vue.min.js"></script>
        <script>
            
           var vm = new Vue({
                    el: '#app',
                    data: {
                        name: 'keepfool',
                        age: 28
                    },
                    components: {
                        'my-component': {
                            template: '#myComponent',
                            props: ['myName', 'myAge']
                        }
                    }
                })
          
            
        </script>
    </html>

     修改了子组件的数据,没有影响父组件的数据。

     修改了父组件的数据,同时影响了子组件。

    prop默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态

  • 相关阅读:
    SpringBoot实现原理
    常见Http状态码大全
    forward(转发)和redirect(重定向)有什么区别
    1094. Car Pooling (M)
    0980. Unique Paths III (H)
    1291. Sequential Digits (M)
    0121. Best Time to Buy and Sell Stock (E)
    1041. Robot Bounded In Circle (M)
    0421. Maximum XOR of Two Numbers in an Array (M)
    0216. Combination Sum III (M)
  • 原文地址:https://www.cnblogs.com/code-java/p/6387464.html
Copyright © 2011-2022 走看看