01——Vue的学习

最新推荐文章于 2024-10-09 16:14:55 发布

原创最新推荐文章于 2024-10-09 16:14:55 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue.js应用的基本结构，从入口文件main.js开始，到父组件App.vue，再到子组件HelloWorld.vue，展示了如何通过组件化的方式构建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>