zoukankan      html  css  js  c++  java
  • vue的组件学习———做一个简易机器人

    组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

    • 注册及使用组件

    注册一个全局组件语法格式如下:
    Vue.component(tagName, options)tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:
    <tagName></tagName>

    // 注册一个组件:
    Vue.component('my-component', {
    template: '<div>A custom component!</div>'
    })

    • 使用组件

    <div id="example">
    <my-component></my-component>
    </div>
    ......

    new Vue({
    el: '#example'
    })

    data 必须是函数
    组件就是vue的实例,所有vue实例中属性和方法,组件中也可以用,但是data属性必须是一个函数,因为组件会重复使用在多个地方,为了使用在多个地方的组件数据相对独立,data属性需要用一个函数来返回值。

    • 定义组件

    Vue.component('simple-counter', {
    template: '<button v-on:click="counter += 1">{{ counter }}</button>',
    data: function () {
    return {
    counter: 0
    }
    }
    })

    • 使用组件

    <div id="example-2">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    </div>
    ......
    new Vue({
    el: '#example-2'
    })

    代码实现:

    效果演示:

  • 相关阅读:
    指针如何影响结构体,细节的思考
    【转】oracle null
    【转】JavaScript闭包
    【转】Ext JS xtype
    【转】EXT JS MVC开发模式
    【转】Ext.ajax.request 中的success和failure
    【转】Oracle job procedure 存储过程定时任务
    JDK重要包和Java学习方法论
    rownum
    【转】Js获取当前日期时间及格式化操作
  • 原文地址:https://www.cnblogs.com/onerose/p/10103180.html
Copyright © 2011-2022 走看看