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. 技术分享|MySQL caching_sha2_password认证异常问题分析

    欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 0. 导读 相同的账号.密码,手动客户端连接可以成功,通过MySQL Conne ...

  2. 在Go中如何正确重试请求

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com/archives/677 我们平时在开发中肯定避不开的一个问题是如何在不可靠的网络服务中 ...

  3. java中为什么只存在值传递（以传入自定义引用类型为例）

    java中只有值传递 为什么这么说?两个例子: public class Student { int sage = 20; String sname = "云胡不归"; publi ...

  4. mybatis 14: 多对一关联查询

    业务背景 根据订单id查询订单的信息,以及该订单所属的客户的基本信息(不包括该客户自己的订单信息) 两张数据表 客户表 订单表 实体类 客户实体类:Customer private Integer i ...

  5. java-前端之js

    js: js的三种形式: <!-- 事件:就是用户的操作或者动作,就是js被调用的时机:如:单机事件,双击事件 --> <!-- 1.事件定义式:在定义事件时直接写js --> ...

  6. Vue+Koa+MongoDB从零打造一个任务管理系统

    大概是在18年的时候,当时还没有疫情.当时工作中同时负责多个项目,有 PC 端运营管理后台的,有移动端 M 站的,有微信小程序的,每天 git 分支切到头昏眼花,每个需求提测需要发送邮件,而且周五要写 ...

  7. Express 使用 Cookie

    在使用 Cookie 之前,需要给 Express 加载中间件,cookie-parser: npm i cookie-parser Express 使用中间件: import express fro ...

  8. 微软Azure配置中心 App Configuration (二)：Feature Flag 功能开关特性

    写在前面 Web服务开发过程中我们经常有这样的需求: 某些功能我必须我修改了配置才启用,比如新用户注册送券等: 某个功能需到特定的时间才启用,过后就失效,比如春节活动等: 某些功能,我想先对10%的用 ...

  9. docker可视化

    可视化第一种方式 Portainer(不是最佳选择但先用这个) docker run -d -p 8088:9000 \ #docker run 启动:通过内网9000端口,外网8088端口:rest ...

  10. Gitea 1.17.1 正式发布 | 08 累积更新

    Gitea 1.17.1 已正式发布.在这个小的版本更新中我们合并了 35 个 PR,没有包含功能性的更改,但我们强烈建议用户升级到此版本以获得重要的修复补丁. 致谢:感谢报告问题的安全研究人员,同时 ...