组件介绍

时间 2019-11-30

标签组件介绍繁體版

原文原文链接

vue组件javascript

1. 是页面组成的一部分html

2. 是封装好的可重用的代码vue

组件注册java

全局注册 1vue-router

大体能够分红三步app

1.在咱们引入vue.js以后,Vue会被注册为一个全局对象,咱们使用对象自己的方法进行组件的建立函数

使用Vue这个全局对象的component方法进行全局注册一个组件spa

2.建立根实例,进行视图的绑定code

3.组件的显示：将组价的名称做为标签写在视图内部,就可以完成组件的显示component

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!--3. 定义的组件名做为标签存在,将组件显示在页面上-->
            <my-component></my-component>

        </div>
    </body>

</html>
<script>

    //1. 使用vue这个全局队形内置的components方法进行组件的建立
    //在components这个方法中有两个重要的参数,第一个参数是组件的名称,第二个参数是组件的内容
    Vue.component('my-component', {
        //在这里使用一个父标签将组件包裹起来
        template: '<div><a href="#">注册</a><a href="#">登陆</a></div>'
    })

    //2. 建立根实例,也就是实例化一个vue对象,进行视图的绑定
    var vm = new Vue({
        el: '#app'
    })
</script>

全局注册2

使用全局的Vue.extend()构造器进行注册

Vue.extend()相似于继承,经过这个构造器扩展(继承)以后,至关于Vue对象自己添加了一些这个对象原先没有的东西

局部注册1

大体能够分红两个部分

1.穿件跟实例

2.在跟实例内部定义组件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!--3. 这是我定义的组件    占位标签-->
            <my-component></my-component>

        </div>
    </body>

</html>
<script>
    //1. 建立根实例
    var vm = new Vue({
        el: '#app',
        //2. 在根实例内部建立组件
        components:{
           'my-component':{
               template: '<div><a href="#">注册</a><a href="#">登陆</a></div>'
           }
        }
    })
</script>

　　组件内部的data

组件内部的data属性必须是一个函数

父子组件

一个组件的内部包含另一个组件，内部的组件称为子组件，外部的组件称为父组件，这就是父子组件

父子组件通讯-----解决父子组件之间传值问题

在上下级组件之间进行数据的传递,也就是父子组件通讯

父组件须要将数据传递给子组件自组件须要将其内部发生的事情通告给父组件

Props 与 camelCase

数据传输分三步:

1. 进行数据的传输,首先要有数据,也就是要在父组件上定义数据

2. 使用props创建数据通讯的渠道

3. 在子组件中接收父组件经过props传递过来的数据

动态props

在模板中，要动态地绑定父组件的数据到子模板的props，与绑定到任何普通的HTML特性相相似，就是用 v-bind

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>

    <body>
        <div id="app">
            <parent></parent>
        </div>
        <template id="parent">
            <div>
                <div>我是父组件</div>
                <child :message="message"></child>
            </div>
        </template>
        <template id="child">
            <div>
                <div>我是子组件</div>
                <span>{{message}}</span>
            </div>
        </template>
    </body>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        //我是父组件
        components:{'parent':{
            template:"#parent",
            data:function(){
                return {
                    message:"hello world"
                }
            },
            //我是子组件
            components:{'child':{
                props:['message'],
                template:"#child"
            }}
        }}
    })
</script>

1. JIRA组件介绍
2. openstack组件介绍
3. Spark组件介绍
4. Aspose.word组件介绍
5. OpenStack组件介绍
6. Mybatis组件介绍
7. selenium组件介绍
8. kubernetes组件介绍
9. Kubernetes 组件介绍
10. Flutter组件介绍
更多相关文章...
• 网站主机介绍 - 网站主机教程
• ASP AdRotator 组件 - ASP 教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• 互联网组织的未来：剖析GitHub员工的任性之源