vue2.0组件入门
如何定义一个组件
在根目录src/components/文件夹下新建组件的文件夹Footer.vue组件
在Footer.vue中
<template> <div class="footer"> {{name}} <button class="btn" @click="che">click</button> </div> </template> <script> export default { name:'Footer', data() { return{ name:123 } }, methods:{ che:function(){ alert(9999); } } } </script> <style type="text/stylus" lang="stylus"> .footer color red </style>
在app.vue 中引用此组件
<template> <div id="app"> {{age}} <router-view></router-view> <Footer></Footer> </div> </template> <script> import Footer from './components/Footer/Footer.vue' export default { name: 'app', data() { return { age:111 } }, components:{Footer} } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>