Vue学习之--------组件在Vue脚手架中的使用（代码实现）（2022/7/24）
文章目录
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）的更多相关文章
- Vue学习之--------组件嵌套以及VueComponent的讲解（代码实现）（2022/7/23）
欢迎加入刚建立的社区:http://t.csdn.cn/Q52km 加入社区的好处: 1.专栏更加明确.便于学习 2.覆盖的知识点更多.便于发散学习 3.大家共同学习进步 3.不定时的发现金红包(不多 ...
- Vue学习之组件切换及父子组件小结（八）
一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...
- Vue学习之--------组件的基本使用（非单文件组件）（代码实现）（2022/7/22）
文章目录 1.为啥要使用组件 2.基本使用 3.代码实例 4.测试效果 5.注意点 1.为啥要使用组件 好用啊.像堆积木一样 2.基本使用 Vue中使用组件的三大步骤: 一.定义组件(创建组件) 二. ...
- vue学习之组件
组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...
- vue学习之四组件系统
vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. 一.Vue.js组件系统 每一个 ...
- 浅谈vue学习之组件通信
vue用组件化简化了我们编写代码的复杂度,组件之间经常会出现数据传递的情况,那么组件之间是怎样通信的呢? 使用props传递数据 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内 ...
- vue学习之组件(component)(二)
自定义事件 父组件使用 prop 传递数据给子组件.但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了. 1. 使用 v-on 绑定自定义事件 每个vue实例都实现了事件接口 ...
- Vue学习笔记七：Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
- vue学习之路 - 3.基本操作（中）
基本操作(中) 本章节主要介绍:vue的条件渲染.列表渲染,计算属性和侦听器 条件渲染和列表渲染 条件渲染主要使用到了 v-if 指令,列表渲染主要使用了 v-for 指令. 下面介绍 v-if . ...
随机推荐
- 用虚拟机封装win10系统的一些记录
想用虚拟机封装一个WIN10企业LTSC,期间参考了IT天空小鱼儿的几大步骤一直到手动优化完,后面就自己用系统安装直接备份了一个.gho镜像.期间出过好多毛病,不过总算是成功实现了.注意点: 1.前面 ...
- MySQL8.0错误日志Error log
GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 理论知识 错误日志内容 错误日志包含mysqld启动和关闭的时间信息,还包含诊断消息,如服务器启动和关闭期间以及服务器运行 ...
- 故障案例 | lsof是怎么"影响"MySQL计算打开文件句柄数的
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 lsof中附加不同参数产生的结果也不同,小心"踩坑". 1. ...
- Vue3 发生错误：setup function returned a promise
当你组件中有 Promise 对象时,即 Axios.Ajax 这类的请求,然后把数据渲染到模板中就会报如下图的错误: 在这个异步组件外包裹一个 <Suspense> 组件.比如 App. ...
- iOS去广告最简单方案！+以图搜漫
iOS去广告 ️推荐 | 通过下载.安装.启用(一般默认启用)描述文件,即可实现通过私人dns来达到全系统的广告拦截.隐私保护功能 ️注意: 限 iOS 14 及以上版本系统使用 复制链接需在 saf ...
- 【碳硫磷模拟赛】消失的+和* （树形DP）
好久没做过这么恶心的DP题了 题面 题面很简单,有一个计算式,由+号.*号.括号和小于10的正整数组成,现在所有的+和*(由于属于违禁词而)都被-号给和谐掉了,现在要求所有可能的原计算式的结果之和. ...
- 使用Python批量爬取美女图片
运行截图 实列代码: from bs4 import BeautifulSoup import requests,re,os headers = { 'User-Agent': 'Mozilla/5. ...
- django_day06
django_day06 内容回顾 事务 try: with transaction.atomic(): #事务 #一系列的操作 pass except Exception as e: print(e ...
- 第五十篇： webpack中的loader(一) --css-loader
好家伙, 1.webpack配置中devServer节点的常用配置项 devServer:{ //首次打包完成后,自动打开浏览器 open:ture, //在http协议中,如果端口号是80,则可以被 ...
- 字节微服务HTTP框架Hertz使用与源码分析｜拥抱开源
一.前言 Hertz[həːts] 是一个 Golang 微服务 HTTP 框架,在设计之初参考了其他开源框架 fasthttp.gin.echo 的优势, 并结合字节跳动内部的需求,使其具有高易用性 ...