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. mybatis 04: mybatis对象分析 + 测试代码简化 + 配置优化

    MyBatis对象分析 测试代码示例 package com.example.test; import com.example.pojo.Student; import org.apache.ibat ...

  2. ArcGIS QGIS学习一：打开shp、geojson地图变形变扁问题（附最新坐标边界下载全国省市区县乡镇）

    目录 打开的地图变扁了 修改投影坐标系 等角圆锥投影 Web墨卡托投影 一些要注意的地方 打开的地图变扁了 记得初学GIS软件时,用ArcGIS或QGIS打开省级地图的时候(shp或geojson等格 ...

  3. Taurus.MVC 微服务框架 入门开发教程：项目集成：4、默认安全认证与自定义安全认证。

    系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 本系列第一篇:Taurus.MVC V3.0.3 微服务开源框架发布:让.NET 架构在大并发的演进过程更简单 ...

  4. JavaScript基础回顾知识点记录4-正则表达式篇（介绍基本使用）

    js 中 正则表达式使用 创建正则对象和test方法使用 /* 创建正则表达式的对象 语法: var 变量 = new RegExp("正则表达式","匹配模式" ...

  5. DLL Proxy Loading Bypass AV

    DLL Proxy Loading Bypass AV 前言 感谢国外大佬开源的免杀思路,本文就是基于该文章的一次实践. https://redteaming.co.uk/2020/07/12/dll ...

  6. Mac系统下Datagrip打不开、点击没反应？

    有没有可能是因为你从网上下载了一些破解软件导致的? 背景 Mac系统下JB公司家的IDEA. Datagrip.PyCharm 或 Goland 打不开点击没反应-- 分析 大概率是之前安装过 汉化插 ...

  7. SDIO移植

    1.拷贝 STM32F4xx_DSP_StdPeriph_Lib_V1.8.0\Utilities\STM32_EVAL\STM324x7I_EVAL 目录下的stm324x7i_eval_sdio_ ...

  8. centOS查看修改时区

    // 查看时间各种状态,查看时区等 timedatectl // 输出 Local time: 四 2014-12-25 10:52:10 CST Universal time: 四 2014-12- ...

  9. thinkphp5.1打印SQL语句

    最近在写tp框架搭建的小玩具,有时候我们需要查看SQL语句.所以就诞生了这篇随笔,命令如下: $xxx=db('xxx')->where('x',xx)->select(); $sql=D ...

  10. 前端必读：如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件

    JavaScript在前端领域占据着绝对的统治地位,目前更是从浏览器到服务端,移动端,嵌入式,几乎所有的所有的应用领域都可以使用它.技术圈有一句很经典的话"凡是能用JavaScript实现的 ...