Vue学习之--------组件在Vue脚手架中的使用（代码实现）（2022/7/24）

Vue学习之--------组件在Vue脚手架中的使用（代码实现）（2022/7/24）

文章目录

​​1、第一步编写组件​​

​​1.1 编写一个 展示学校的组件​​​​1.2 定义一个展示学生的信息组件​​

​​2、第二步引入组件​​​​3、制作一个容器​​​​4、使用Vue接管 容器​​​​5、实际效果​​​​6、友情提示：​​​​7、项目的目录结构​​

1、第一步编写组件

template中进行页面结构（必须要有一个根节点（div））script 中进行数据的交互操作、data、method、watch…style 进行页面样式设计注意 ：需要向外抛出组件

1.1 编写一个 展示学校的组件

1.2 定义一个展示学生的信息组件

2、第二步引入组件

1、引入组件2、注册组件3、在指定位置使用

3、制作一个容器

4、使用Vue接管 容器

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: ''})

5、实际效果

6、友情提示：

需要使用Vue脚手架

7、项目的目录结构

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。