vue2.0组件入门
2017-06-09 10:43
387 查看
如何定义一个组件
在根目录src/components/文件夹下新建组件的文件夹Footer.vue组件
在Footer.vue中
在app.vue 中引用此组件
在根目录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>
相关文章推荐
- vue2.0组件快速入门
- vue.js 2.0父子组件学习入门套路
- vue.js 2.0父子组件学习入门套路(推荐相关阅读)
- Vue.js——60分钟组件快速入门(下篇)
- Vue.js——60分钟组件快速入门(下篇) 概述【3】
- vue2.0 组件之间的数据传递
- vue2.0父子组件及非父子组件之间的通信方法
- vue日期组件 支持vue1.0和2.0
- Vue.js——60分钟组件快速入门(上篇)
- Vue.js——60分钟组件快速入门(上篇)
- vue2.0--组件通信(非vuex法)
- vue2.0组件通信各种情况总结与实例分析
- vue2.0入门(一)
- Vue2.0的通用组件
- 通信vue2.0组件
- Vue.js——60分钟组件快速入门(上篇)【2】
- 饿了么基于Vue2.0的通用组件开发之路(分享会记录)
- vue.js入门(3)――详解组件通信
- Vue2.0组件间数据传递
- Vue 2.0 制作列表组件,实现分页、搜索、批量操作等