美文网首页
Vuejs单文件写法--es6写法

Vuejs单文件写法--es6写法

作者: Simon_King | 来源:发表于2017-06-30 15:53 被阅读0次

    第一次使用Vuejs,选择了vue-cli 来构建项目。写起来略微蛋疼,官方文档都是es5的写法,要用es6做项目还需要不断的找资料来完善才行。

    入口文件==> main.js源码

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      template: '<App/>',
      components: { App }
    })
    

    App.vue源码

    //app.vue --- template部分
    <template>
        <div>
            <!-- 这里如果是这样<AppHeader></AppHeader> 或者 <AppHeader /> 这样写就会报错 -->
            <app-header></app-header>  <!-- 插入组件 -->
                    <app-side-menu></app-side-menu>
        </div>
    </template>
    
    //app.vue--- script部分
    import AppHeader from './components/Header.vue'      //导入其它组件
    import AppSideMenu from './components/SideMenu.vue'   //导入其它组件
    export default {
        components: {  //配置多个是这样写的,貌似官方文档里面写的是伪代码
            'app-header': AppHeader,  
            'app-side-menu': AppSideMenu
        },
        name: 'app'
    }
    

    Header.vue源码

    // Header.vue ---template部分
    <template>
      <div v-on:mouseenter="show" v-on:mouseleave="hide" :class="{ active }">
    </template>
    // Header.vue ---script部分
    <script>
      export default {
        name: 'app-header',
        data () {
          return {
            active: false
          }
        },
        methods: {
          show: function () {
            this.active = true
          },
          hide: function () {
            this.active = false
          }
        },
        created: () => {
          console.log(this)
        },
        watch: {
          active: function (val, oldVal) {
            console.log(val, oldVal)
          }
        }
      }
    </script>
    

    相关文章

      网友评论

          本文标题:Vuejs单文件写法--es6写法

          本文链接:https://www.haomeiwen.com/subject/jeqicxtx.html