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>
如上:我们定义了一个简单的组件,运行页面可得到瑞一下结果: