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. CF242E XOR on Segment

    CF242E XOR on Segment codeforces 洛谷 关于异或,无法运用懒标记实现区间异或: 可以像trie树一样拆位,将每个值拆成二进制数,对此建相应个数的线段树. 0 1与 0异 ...

  2. 巨变！a16z 关于新一代数据基础设施架构的深度洞察

    点击上方 蓝字关注我们 来源 | a16z 作者 | Matt Bornstein, Martin Casado,Jennifer Li 翻译 | 夕颜 作为未来最重要的基础设施之一,数据正在成为各行 ...

  3. 从 React 原理来看 ahooks 是怎么解决 React 的闭包问题的？

    本文是深入浅出 ahooks 源码系列文章的第三篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本文来探索一下 ahooks 是怎么解决 React 的闭包问题的 ...

  4. Flask 运行报错　HTTPStatus.BAD_REQUEST　This site can’t provide a secure connection

    这时候将访问的url,从https换成http 就好啦!!!!!!!!!!!!!

  5. 解决使用（Jenkins检出代码）git clone检出代码提示必须安装 .NET framework,Version =v4.7.2

    一.事件背景 真的是非常想使用pipeline流水线进行自动化部署打包测试. 于是,晚上下班回家后,真的是"现学现卖",开始做流水线脚本. 经过不懈努力,熬到凌晨两点多,终于把整个 ...

  6. wbr 文本换行规则标签

    <wbr/>标签规定在文本中的何处适合添加换行符.如果文本太长,浏览器可能会在错误的位置换行,那么可以使用<wbr/>标签来添加单词换行时机. Talk is cheap. S ...

  7. jsp获取单选按钮组件的值

    jsp获取单选按钮组件的值 1.首先,写一个带有单选按钮组件的前台页 1 <%@ page language="java" contentType="text/ht ...

  8. MySQL查询关键数据方法

    MySQL查询关键数据方法 操作表的SQL语句补充 1.修改表名 alter table 表名 reame 新表名: 2.新增字段名 alter table 表名 add 字段名 字段类型(数字) 约 ...

  9. C#基础_析构函数

    C#析构函数 1. 析构函数的定义与注意的问题 析构函数用于释放被占用的系统资源. 析构函数的名字由符号"-"加类名组成. 使用析构函数时,应该注意下面的问题: ?只能在类中使用析 ...

  10. Java自增自减运算

    自增自减运算 //++(自增) --(自减) 一元允运算 int a =3; //a = a+1-----4 int b=a++; //执行完这行代码后,先给b赋值,再自增 System.out.pr ...