zoukankan      html  css  js  c++  java
  • vue组建的创建

    Vue.js 组件

    组件(Component)是 Vue.js 最强大的功能之一。vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。

    组件可以扩展 HTML 元素,封装可重用的代码。

    组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树

    注册一个全局组件语法格式如下

    Vue.component(tagName, options)
    

     tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:

    <tagName></tagName>
    

    全局组件

    所有实例都能用全局组件。

    全局组件实例

    注册一个简单的全局组件 runoob,并使用它:

    <div id="app">
        <runoob></runoob>
    </div>
     
    <script>
    // 注册
    Vue.component('runoob', {
      template: '<h1>自定义组件!</h1>'
    })
    // 创建根实例
    new Vue({
      el: '#app'
    })
    </script>
    

    局部组件

    我们也可以在实例选项中注册局部组件,这样组件只能在这个实例中使用:

    局部组件实例

    注册一个简单的局部组件 runoob,并使用它:

    <div id="app">
        <runoob></runoob>
    </div>
     
    <script>
    var Child = {
      template: '<h1>自定义组件!</h1>'
    }
     
    // 创建根实例
    new Vue({
      el: '#app',
      components: {
        // <runoob> 将只在父模板可用
        'runoob': Child
      }
    })
    </script>
    

     组件实例

    #组建的创建
    Vue.component('Vheader',{ data:function(){ #data必须是函数,必须有return return { } }, template:`<div class="header"> <div class="w"> <div class="w-l"> <img src="./logo.png"/> </div> <div class="w-r"> <button>登录</button><button>注册</button> </div> </div> </div>` })

    组件是可复用的Vue实例,并且带有一个名字:在这个例子中是 <Vheader>。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:

    <div id="app">
            <Vheader></Vheader>
            <Vheader></Vheader>
    </div>
    
    var app = new Vue({  #绑定vue的根元素
           el:'#app',
           data:{
    
           }
     })
    
     

    I can feel you forgetting me。。 有一种默契叫做我不理你,你就不理我

  • 相关阅读:
    状态模式作业
    建造者模式作业
    关于 IIS 上的 Speech 设置
    装饰模式作业
    《软件架构与设计模式》关于 抽象工厂模式 的一个小例子
    谈一谈为什么我要创建个人博客
    C#网站发布在IIS10上,Access数据库读取为空白的解决方案
    广义表 Head Tail
    c# asp.net4.0尚未在web服务器上注册
    装饰者模式(例子)
  • 原文地址:https://www.cnblogs.com/weidaijie/p/10428610.html
Copyright © 2011-2022 走看看