zoukankan      html  css  js  c++  java
  • 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}

    }  

    })

        

      

  • 相关阅读:
    假期周进度报告02
    假期周进度报告01
    浪潮之巅阅读笔记6
    浪潮之巅阅读笔记5
    浪潮之巅阅读笔记4
    科技创新平台年报系统利益相关者分析
    浪潮之巅阅读笔记3
    浪潮之巅阅读笔记2
    浪潮之巅阅读笔记1
    Linux Redis 重启数据丢失解决方案,Linux重启后Redis数据丢失解决方
  • 原文地址:https://www.cnblogs.com/slpo007/p/6899854.html
Copyright © 2011-2022 走看看