zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    观众查询界面
    排球积分程序
    产品会议
    本周工作量及进度统计
    排球积分规则
    我与计算机
    排球记分员
    怎样成为一个高手观后感
    第十八周冲刺
    十六周
  • 原文地址:https://www.cnblogs.com/junwu/p/6970848.html
Copyright © 2011-2022 走看看