• vue组件化开发


     一、概念

      什么是组件,我个人理解为积木。而用vue创建项目就要一个搭积木的过程。

    二、语法

      vue无非也就是一种框架,先理解其核心内容之后再来操作。

      2.1引包

        vue有两个版本。不同的版本有不同的语法

      2.2开辟一个vue接管的实例对象

        完成这件事,首先要在dom中开辟一个空间

      dom:

        <div id='app'></div>

      js:

        实例化一个vue对象

          new Vue({

        el:'#app',

        data:{}

        })

      三、全局创建组件(也可以创建局部组件):

        3.1创建组件构造器:

          var parent=Vue.entend({

          template:'<h1>hello</h1>'  //这里就是组件的内容,可以理解为积木的形状,当然你也可以引用标签dom  template:'#demo'(这个demo是页面中的script或者template的ID)

    })

        3.2注册组件

        积木已经做好了现在就是要给积木命名好可以各尽其责。

        Vue.component('my-component',parent)  //这里的两个参数分别表示页面标签和构造器的名字

      四、简写构造组件

        简写的关键就是把构造器放到了注册里面

        Vue.component('my-component',{

        template:'<div>hello</div>'

    })

        如上就简写了一个组件在页面中<my-component></my-component>这样使用

      五、嵌套组件

        嵌套组件就牵扯出父组件与子组件,关键点:1,子组件应该在父组件构造器中注册和使用。所以子组件只能在父组件中使用。

       但是组件构造器还是各自执行。

        var child=Vue.extend({

        template:'thankyou'

    })

        var parent=Vue.extend({

        template:'hello <child-companent></child-component>',//子组件要在父组件的template中使用

        components:{  //注意后面的s

          'child-companent':child

    }

     

    })

      Vue.component('parent-companent',parent);

    html:

    <parent-companent></parent-companent>//父组件可在全局使用

      六、嵌套组件传值。

        6.1说道组件中的数据,与Vue实例化的数据不同,Vue规定组建中的data必须是一个回调函数

          Vue.component('parent',{

        data:function(){

      return{a:1}

    }  

    })

        

      

  • 相关阅读:
    青春如同奔流的江河,一去不回来不及道别
    关于RESOURCE_SEMAPHORE等待类型
    sql server 2008 The fulltext filter daemon host (FDHost) process has stopped abnormally.
    [转]SQL Server 2008 R2 Pricing
    64bit sql server 2008 sp1 使用lock pages in memory 具体操作
    [转]Fun with Locked Pages, AWE, Task Manager, and the Working Set…
    关掉和开启win7的Windows Search服务
    How to recreate the msdb database in SQL Server 2005
    Kimberly L. Tripp的sp_helpindex2 for sql server 2005/2008,并修复了for sqk2k8的一个bug
    表无索引为什么sp_spaceused 中的index_size不为0
  • 原文地址:https://www.cnblogs.com/slpo007/p/6899854.html
Copyright © 2020-2023  润新知