组件的创建
vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。
那接下来就跟我看一下如何在一个Vue实例中使用组件吧!
这里有一个Vue组件的示例:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="app"> <Vheader></Vheader> <Vheader></Vheader> </div> <script type="text/javascript" src='./vue.js'></script> <script type="text/javascript"> //组件的创建 Vue.component('Vheader',{ data:function(){ 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>` }) var app = new Vue({ el:"#app", data:{ }, computed:{ }, method:{ }, }) </script> </body> </html>
官网:
https://cn.vuejs.org/v2/guide/components-registration.html