zoukankan      html  css  js  c++  java
  • Vue 简明使用--组件的使用(五)

      组件是可复用的 Vue 实例,vue的核心就是组件的使用,玩好了组件才能将前面的基础更好的运用起来。组件使我们的项目解耦,更加符合vue的设计思想MVVM。组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树, 这里可以将组件理解为 java 里的方法,通过方法名调用方法

    head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
    <wdh01 name=" wdh01"></wdh01>
    </div>
    <script>
        Vue.component('wdh01',{
            props:['name'],
            template: '<h3> hello  {{name}} !!!</h3>'
        })
      /*    定义组件 wdh01 组件名称   template 组件内容,定义好组件,可以通过组件名称调用组件:
        这里可以将组件理解为 java 里的方法,通过方法名调用方法 */
        var app = new Vue({
            el:'#app',
            data:{
                input_info:'please inpue some info'
            }
        })
    </script>
    </body>

    如上:我们定义了一个简单的组件,运行页面可得到瑞一下结果:

  • 相关阅读:
    mongodb安装及操作
    小白学jQuery
    python break 和continue区别
    pyqt5 Qlabel控件添加图片单击进入网站
    pyqt5 主窗口退出,子窗口退出问题
    pyqt5 关于主窗口闪退
    python 浮点数不精确原因
    定时器 sched模块
    python 获得文件大小、修改时间等系统信息
    原码
  • 原文地址:https://www.cnblogs.com/wdh01/p/13195344.html
Copyright © 2011-2022 走看看