3.2 vue组件的使用/去除红色波浪线

一、概述

一个vue文件主要由三个部分组成：模板页面、js模块对象、css样式。

组件： 组件是一个局部功能界面，它包含了所有要实现这个功能界面的相关资源，如css、html等.

 

组件化编码的基本流程
1)  拆分界面, 抽取组件
2)  编写静态组件
3)  编写动态组件
　　初始化数据, 动态显示初始化界面；
　　实现与用户交互功能；

 

二、使用

以下主要演示组件化编码的过程，首先定义一个子组件HelloWorld.vue、然后在在根组件App.vue中引入子组件，

在main.js中将App.vue渲染到主页面index.jsp中去。

 

1. 组件化编程的步骤

(1) 首先定义一个子组件：HelloWorld.vue

<template>
  <div>
    <h2 class="title">{
   {msg}}</h2>
  </div>
</template>

<script>
  // 自定义一个子组件
  // 这是默认的写法
  // 向外默认暴露一个配置对象（与vue一直）
  export default {
    // data : {}  // 对象，这里不可以写
    data () { // data里面可以写对象，也可以写函数，但是在组件里面必须写函数
      return {
        msg: '第一个Vue组件'
      }
    }
  }
</script>

<style scoped>
  .title {
    color: red;
    background: yellow;
  }
</style>

(2) 根组件App.vue：在根组件里面使用子组件,最终要将改组件渲染到index.html页面上去<