Vue 1.27

一、工程化开发入门

**1.**工程化开发和脚手架

我采用的是npm.cmd

**2.**脚手架目录文件介绍和项目运行流程

**3.**组件化开发和根组件

**4.**普通组件的注册使用

(1)局部注册:只能在注册的组件内使用

使用:当成 html 标签使用 <组件名></组件名>

(2)全局注册:所有组件内都能使用

使用:当成 html 标签使用 <组件名></组件名>

技巧:一般都用局部注册,如果发现确实是通用组件,再定义到全局。

二、组件的三大组成部分 (结构/样式/逻辑)

注意点说明

**1.**组件的样式冲突 scoped

在 components 文件夹下的 .vue 文件操作

javascript 复制代码
<style scoped>
/* 
1. 默认的 style 样式, 会作用于全局 => 全局样式
2.加上 scoped 属性的 style 样式,只会作用于当前组件 => 局部样式

组件应该有着自己独立的样式,推荐加上scoped(原理)
-----------------------------------------------------------
scoped原理:
1. 给当前组件模板的所有元素,都会添加上一个自定义属性
  data-v-hash值  
  data-v-5f6a9d56 区分开不同发组件
  2.css选择器后面,被自动处理,添加上了属性选择器
    div[data-v-5f6a9d56]
*/
div {
  border: 3px solid skyblue;
  margin: 30px;
}
</style>

**2.**data 是一个函数

三、组件通信

1.父传子

(1)父组件通过 props 将数据传递给子组件

2.子传父

(1)子组件利用 $emit 通知父组件,进行修改更新

总结:

相关推荐
朱涛的自习室10 分钟前
我给 Gemini 4 和 DeepSeek 搞了套「末位淘汰」,AI 干活会更猛吗?(Day 3)
android·前端·后端
java1234_小锋2 小时前
【技术专题】HTML5 网页技术 - HTML5简介 & HTML5 文档结构
前端·html·html5
鶴哥只手遮天3 小时前
Vue 3 核心源码深度剖析系列(v3.5.44)-第 1 章 项目全景:monorepo 架构与工程化体系
前端·vue.js·开源
流星。。方3 小时前
小团队官网SEO落地:前端语义化与静态生成的工程实践
前端·状态模式
用户530429765793 小时前
盘点危化品搬运诊断的6类工具与自处理边界判断
前端
curtain3 小时前
从古法编程到 Agent:我入行这两年,AI 改变了什么
前端·openai
zyfts3 小时前
10分钟自制Codex钉钉通知Skill:AI干完活自动钉钉提醒你
前端
大孜然3 小时前
孜然QQ频道自动化程序机器人配置教程
前端
用户469384921553 小时前
AIUI 焦点高亮切换失效排查与规避:为什么按钮不变换形态呢?
前端
派大鑫wink4 小时前
纯前端实现软考中级·软件设计师备考学习网站
前端·学习