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页面上去

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

<script>
  import HelloWorld from './components/HelloWorld.vue' // 1. 引入自己定义的子组件

  export default {
    components: { // 2.映射组件标签(通过这个配置，将子组件映射成<HelloWorld>标签，这里的HelloWorld是HelloWorld:HelloWorld的简写)
      HelloWorld
    }
  }
</script>

<style>
  .logo {
     100px;
    height: 100px;
  }
</style>

(3) 入口js：main.js

/*
入口JS
 */
import Vue from 'vue' // 引入vue
import App from './App.vue' // 1.引入App组件

// 创建vm实例, 最终的目的是将App组件渲染到index页面中去
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {App},  // 2.映射成标签：通过这个配置，将组件映射成指定名称的一个标签(即这里的标签名叫App), 这里{App}可以写成{App:App}
  template: '<App/>' // 3.使用组件标签：指定需要渲染到页面的模板，这个模板会插入到 '#app'中(el所匹配的页面上的div中)
})

标签渲染也可以采用如下的简化写法：

/*
入口JS
 */
import Vue from 'vue'
import App from './App.vue'
import store from './store'

import './base.css'

// 创建vm
/* eslint-disable no-new */
// new Vue({
//   el: '#app',
//   components: {App}, // 映射组件标签
//   template: '<App/>', // 指定需要渲染到页面的模板
//   store // 所有的组件对象都多了一个属性: $store(值就是store对象)
// })

// 这是比较简洁的写法
new Vue({
  el: '#app',
  //箭头函数是用来定义匿名函数的，接收一个参数h, 而这个参数是函数类型的，这个是用来创建元素标签的(根据组件来创建)，这里是根据App组件来创建来创建所对应的标签<App/>,
  //返回的结果最终会插入到el所对应的div中去
  render: h => h(App), // 渲染函数, '=>'有两个作用：代表是一个函数;代表return   这个渲染函数代替了components、template的功能
  store
})

// 原始方式
// new Vue({
//   el: '#app',
//   render: function (createElement) {
//     return createElement(App) //更具组件创建一个元素标签，相当于返回了<App/>标签，而这个<App/>标签会被插入到'#app'中去
//   },
//   store
// })

View Code

(4) index.html: 这个页面基本上没有做任何的配置

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue_blank</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>