vue-cli组件的使用

一、前言

​ 本文介绍 vue-cli组件的使用,基于已经搭建好的基础项目。关于 vue-cli 构建项目的详细流程,可参考博文:使用vue脚手架构建项目

二、使用步骤

1、创建Header.vue组件

  1. 在components 目录下创建 Header.vue

    vue-cli组件的使用_第1张图片

  2. 编写Header.vue

    
    
    
    
    //scoped 表示当前的样式,只作用与当前组件中的 template 视图.
    
    
    

2、引入 Header组件

修改HomeView.vue





3、测试结果

vue-cli组件的使用_第2张图片


三、组件的传参

1、修改 Header.vue





//scoped 表示当前的样式,只作用与当前组件中的 template 视图.


2、修改HomeView.vue





3、测试结果

vue-cli组件的使用_第3张图片

你可能感兴趣的:(vue,vue.js,javascript,前端)