<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定义和注册组件</title> </head> <script src="vue1.0.11.js"></script> <body> <template id="account"> {{msg}} <a href="javascript:void(0)" @click="login">登录</a> <a href="#" @click="register">注册</a> </template> <div id="app"> <!--//使用组件--> <l></l> <account></account> </div> </body> <script> //vue1.0定义一个全局组件写法 //定义组件 var login=Vue.extend({ template:'<h1>登录页面</h1>' }); //注册组件 Vue.component('l',login);//两个参数，第一个参数就是的组件的名字，第二个是组件 //vue2.0实现定义和注册组件 Vue.component('register',{//vue2.0定义和注册一步到位 template:'<h1>注册页面</h1>' }); //定义一个账号组件 Vue.component('account',{ template:'#account', //在组件中中datashi 一个function而不是一个对象,还要有一个return对象 data:function(){ return { msg: '登录页面' } }, methods:{ login:function () { alert('login'); } } }); new Vue({ el:'#app' }); </script> </html>
vue中组件中的data是一个方法而不是一个对象
猜你喜欢
转载自blog.csdn.net/weixin_40593587/article/details/79293361
今日推荐
周排行