01——Vue的学习

 在main.js中

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

/*
//这里是入口js
//1、引入vue
//2、new一个vue
//3、需要将App组件渲染到index.html中，所以需要引入import App from './App'
//4、映射App标签components: { App },
//5、使用组件标签template: '<App/>'
 */

在App.vue中

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--3、使用组件标签-->
    <HelloWorld/>
  </div>
</template>

<script>
// 1、引入组件
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    // 2、映射组件标签，可以配置多个
    HelloWorld
  }
}
</script>

<style>
</style>

在HelloWorld.vue中

<template>
  <div class="hello">
   <p class="mg">{{msg}}</p>
  </div>
</template>

<script>

// 向外默认暴露一个对象
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped>
   .mg{
     color: red;
     font-size: 30px;
   }
</style>

  

main.js是入口，app.vue是父组件，helloworld是子组件