1、第一步编写组件

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

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

<template>

  <div class="demo">

    <h2>学校名称：{{ name }}</h2>

    <h2>学校地址：{{ address }}</h2>

    <button @click="showName">点我提示学校名</button>

  </div>

</template>

<script>

export default {

  name: "School",

  data() {

    return {

      name: "长沙大学",

      address: "湖南长沙",

    };

  },

  methods: {

    showName() {

      alert(this.name);

    },

  },

};

</script>

<style>

.demo {

  background-color: pink;

}

</style>

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

<template>

	<div>

		<h2>学生姓名：{{name}}</h2>

		<h2>学生年龄：{{age}}</h2>

	</div>

</template>

<script>

	 export default {

		name:'Student',

		data(){

			return {

				name:'张三',

				age:18

			}

		}

	}

</script>

2、第二步引入组件

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

	<div>

		<School></School>

		<Student></Student>

	</div>

</template>

<script>

	//引入组件

	import School from './School.vue'

	import Student from './Student.vue'

	export default {

		name:'App',

		components:{

			School,

			Student

		}

	}

</script>

3、制作一个容器

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>myvue</title>

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

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: '<App/>'

})

5、实际效果

6、友情提示：

需要使用Vue脚手架

7、项目的目录结构



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

  1. Vue学习之--------组件嵌套以及VueComponent的讲解（代码实现）（2022/7/23）

    欢迎加入刚建立的社区:http://t.csdn.cn/Q52km 加入社区的好处: 1.专栏更加明确.便于学习 2.覆盖的知识点更多.便于发散学习 3.大家共同学习进步 3.不定时的发现金红包(不多 ...

  2. Vue学习之组件切换及父子组件小结（八）

    一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...

  3. Vue学习之--------组件的基本使用（非单文件组件）（代码实现）（2022/7/22）

    文章目录 1.为啥要使用组件 2.基本使用 3.代码实例 4.测试效果 5.注意点 1.为啥要使用组件 好用啊.像堆积木一样 2.基本使用 Vue中使用组件的三大步骤: 一.定义组件(创建组件) 二. ...

  4. vue学习之组件

    组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...

  5. vue学习之四组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. 一.Vue.js组件系统 每一个 ...

  6. 浅谈vue学习之组件通信

    vue用组件化简化了我们编写代码的复杂度,组件之间经常会出现数据传递的情况,那么组件之间是怎样通信的呢? 使用props传递数据 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内 ...

  7. vue学习之组件(component)(二)

    自定义事件 父组件使用 prop 传递数据给子组件.但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了. 1. 使用 v-on 绑定自定义事件 每个vue实例都实现了事件接口 ...

  8. Vue学习笔记七：Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  9. vue学习之路 - 3.基本操作（中）

    基本操作(中) 本章节主要介绍:vue的条件渲染.列表渲染,计算属性和侦听器 条件渲染和列表渲染 条件渲染主要使用到了 v-if 指令,列表渲染主要使用了 v-for 指令. 下面介绍 v-if .  ...

随机推荐

  1. AOP实现切入

    6.AOP实现切入 AOP为Aspect Oriented Programming的缩写,意为:面向切面编程 通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术 AOP是OOP的延续,也 ...

  2. Git学习与码云实战

    Git学习与码云实战 一.Git安装 概述: Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理,是目前使用范围最广的版本管理工具. 下载安装: 下载地址:http ...

  3. Git 09 IDEA撤销提交

    参考源 https://www.bilibili.com/video/BV1FE411P7B3?spm_id_from=333.999.0.0 版本 本文章基于 Git 2.35.1.2 如果提交了不 ...

  4. HCIA-datacom 4.3 实验三：网络地址转换配置实验

    实验介绍: 网络地址转换NAT(Network Address Translation)是将IP数据报文头中的IP地址转换为另一个IP地址的过程.作为减缓IP地址枯竭的一种过渡方案,NAT通过地址重用 ...

  5. OpenCV CMake VSCode Windows 平台下运行配置及其解决方案

    前言 最近在搞 计算机图形学相关的东西,有个 demo 用到了 opencv,找了 google 一圈,发现国内都没有比较好的配置和解决的办法,要不就是几年前的教程,最近正好踩坑完,其中经历了自己编译 ...

  6. C++一些新的特性的理解(二)

    1 C++11多线程thread 重点: join和detach的使用场景 thread构造函数参数 绑定c函数 绑定类函数 线程封装基础类 互斥锁mutex condition notify.wai ...

  7. django_day03

    django_day03 Django的view(视图) CBV和FBV FBV:function based view 基于函数的视图 CBV:class based view 基于类的视图 fro ...

  8. KingbaseES R3 受限dba影响集群切换

    ​ 一.受限dba功能说明(参考自官方文档) 受限DBA 受限DBA可以对当前DBA的权限进行一定限制.当功能开启后DBA将不能更改以下对象: Table Database Function(by n ...

  9. 【读书笔记】C#高级编程 第八章 委托、lambda表达式和事件

    (一)引用方法 委托是寻址方法的.NET版本.委托是类型安全的类,它定义了返回类型和参数的类型.委托不仅包含对方法的引用,也可以包含对多个方法的引用. Lambda表达式与委托直接相关.当参数是委托类 ...

  10. Karmada v1.3：更优雅 更精准 更高效

    摘要:最新发布的1.3版本中,Karmada重新设计了应用跨集群故障迁移功能,实现了基于污点的故障驱逐机制,并提供平滑的故障迁移过程,可以有效保障服务迁移过程的连续性(不断服). 本文分享自华为云社区 ...