Vue组件（2）- 单文件组件

最新推荐文章于 2024-04-28 20:14:59 发布

君莫笑.

最新推荐文章于 2024-04-28 20:14:59 发布

阅读量153

点赞数

分类专栏： Vue 文章标签： Vue组件

本文链接：https://blog.csdn.net/WeiLanooo/article/details/100609397

版权

这篇博客详细介绍了Vue组件的使用，包括父传子props、子传父$emit的通信方式，以及单文件组件的创建和使用环境。还涉及了多组件嵌套、多组件路由的配置，并对Element-UI和vue-cli的使用进行了简单介绍，帮助读者深入理解Vue开发。

摘要由CSDN通过智能技术生成

1,父传子props(掌握)

目的: 可以将父组件中的内容,传递给子组件进行显示
操作流程图解:

2,子传父$emit(掌握)

目的: 可以通过emit将子组件的值, 传递给父组件
操作图解:

3,单文件组件使用环境(理解)

目的: 可以将单文件组件使用环境进行创建

操作流程:

1, 安装nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
// 更新配置
source .bashrc

2,安装node
- ```
nvm 
```

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

君莫笑.

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue2风格规范

Mr_RedStar的博客

03-18

1773

vue2风格规范前言单组件如何命名单文件组件的文件名的大小写基础组件名单例组件名紧密耦合的组件名组件名中的单词顺序完整单词的组件名组件名为多个单词模板中的组件名大小写JS/JSX中的组件名大小写自闭合组件prop名的大小写多个特性的元素模板中简单的表达式简单的计算属性指令缩写良好的代码顺序组件/实例的选项顺序元素特性的顺序单文件组件顶级元素的顺序前言项目开发，以个人愚见，应从规范入手，遵从社区规范，学习前辈们经验总结的最佳实践，这于个人于团队都是有利的。编程除了有些是靠思维，我认为大多数还是靠记忆的

vue-md-loader-Markdown文件到ALIVE Vue组件。-Vue.js开发

05-27

vue-md-loader简介Webpack加载器，用于将Markdown文件转换为ALIVE Vue组件。可配置的Markdown-It解析器。内置语法high vue-md-loader简介Webpack加载器，用于将Markdown文件转换为ALIVE Vue组件。可配置的...

参与评论您还未登录，请先登录后发表或查看评论

Vue组件(二）单文件组件

yyclassmvp的博客

11-16

419

1. Vue组件化编程 1.2. 非单文件组件 1.3. 单文件组件 1.3.1. 一个.vue 文件的组成(3 个部分) 1.3.2. 基本使用 1.3.3 单文件组件工作方式

Vue2.0 Vue组件单文件组件

yasinawolaopo的博客

12-14

557

Vue组件单文件组件

前端学习笔记系列一：2 Vue的单文件组件

weixin_30600197的博客

05-15

194

（1）非单文件vue组件和单文件vue组件的一般写法一个完整的vue组件会包括三个部分：一是template模板部分，二是js程序逻辑部分，三是css样式部分。每个组件都有属于自己的模板，js和样式。如果将一个页面比喻成一间房子的话，组件就是房子里的客厅、卧室、厨房、厕所。如果把厨房单独拿出来的话，组件又可以是刀、油烟机...等等。就是说页面是由组件构成的，而组件也可以是组件构成的。这样就可以...

Vue知识点整理（二）- Vue组件化编程（2）- 单文件组件

JHY97的博客

04-15

572

目录一、单文件组件 1.1 创建.vue文件 1.2 .vue文件内容编写 1.3 项目主组件 1.4 项目入口文件一、单文件组件单文件组件 — Vue.js (vuejs.org)https://cn.vuejs.org/v2/guide/single-file-components.html 1.1 创建.vue文件该文件创建直接在创建文件时，添加上后缀 .vue 即可，一般与组件的命名相同 1.2 .vue文件内容编写 // 模板页面 <templat

vue-svg-loader-Webpack加载器，可让您将SVG文件用作Vue组件-Vue.js开发

05-27

vue-svg-loader webpack loader，可让您将SVG文件用作Vue组件文档-常见问题解答安装npm i -D vue-svg-loader vue-template-comp vue-svg-loader Webpack loader，可让您将SVG文件用作Vue组件文档-常见问题解答安装...

vue-fa-简单的FontAwesome 5 Vue.js 2组件。-Vue.js开发

05-27

FontAwesome svg图标可摇树，仅导入使用过的图标不需要CSS文件FontAwesome duotone i vue-fa Tiny FontAwesome 5组件，用于Vue.js。 FontAwesome svg图标可摇树，仅导入使用的图标不需要CSS文件FontAwesome duotone...

vue-pull-refresh-Vue.js 2.0的刷新刷新组件。-Vue.js开发

05-27

vue-pull-refresh vuejs 2.0针对移动设备实现的下拉刷新组件。演示演示PS：请使用支持Promise用法的浏览器安装vue-pull-refresh vuejs 2.0用于移动设备的下拉刷新组件实现。演示演示PS：请使用支持Promise用法的...

vue-mini-weather:基于Vue开发的迷你实时天气预报组件

05-14

基于Vue开发的迷你实时天气预报组件项目展示基于Vue框架开发的一款迷你天气预报展示的小组件，目前只支持中国大陆的天气预报，原因在更新公告中有，有问题请提 :package: 安装 2021.04.24 因为刚上传到npm仓库没...

Vue.js 2.0 单文件组件

2201_75866484的博客

04-15

309

在很多Vue项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方案在只是使用 JavaScript 增强某个视图的中小型项目中表现得很好。全局定义(Global definitions)强制要求每个 component 中的命名不得重复字符串模板(String templates)缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \不支持CSS(No CSS support)

Vue2（六）：组件的定义、组件的嵌套、Vuecomponent构造函数、单文件组件

Hdhhdhbsjxbdhvyg的博客

03-20

1480

或<school>

vue2笔记3（模块组件化，单文件组件和非单文件组件、脚手架搭建、ref、props、mixin、自定义插件、scoped、todolist案例、cookie、自定义事件、总线、nextTick动画）

m0_64589497的博客

12-04

252

模块组件化，单文件组件和非单文件组件、脚手架搭建、ref、props、mixin、自定义插件、scoped、todolist案例、cookie、自定义事件、总线、nextTick、动画

vue单文件组件实例2：简单单文件组件

duansamve的博客

02-11

1033

Introduce.vue： <template> <div class="intro"> 单位介绍 </div> </template> <script> </script> <style scoped> .intro{ font-size:20px; c

学习 Vue(2) 单文件组件

qq_42030756的博客

05-19

214

在制作游戏页面当中,有许多需要重复使用的视图,我习惯将复用超过三次的代码进行封装,减少代码量. vue可以使用组件来实现,组件分为两种,1.直接在当前vue中注册组件,2,使用单文件,然后导入. 两者之间的利弊可查看官网的讲解https://cn.vuejs.org/v2/guide/single-file-components.html#%E4%BB%8B%E7%BB%8D 在components注册的时候,可以使用直接使用导入时候的名字,出现大写的时候在写视图是需要使用-隔开,并将大写改为消息

vue2知识点：非单文件组件和单文件组件

刘大猫

05-26

640

文章目录3.3非单文件组件3.3.1使用Vue.extend({})方式创建组件(了解，实际不常用)举例：3.3.2组件嵌套举例：练习组件嵌套3.3.3VueComponent构造函数3.3.4一个重要的内置关系3.4单文件组件 3.3非单文件组件问题：“单文件组件”与“非单文件组件”区别？ 3.3.1使用Vue.extend({})方式创建组件(了解，实际不常用) Vue.extend({})属于vue的全局API，在实际业务开发中很少使用，因为相比较vue.component来说，使用Vue.

vue2.0-创建单文件组件注册组件以及组件的使用

weixin_33908217的博客

01-21

1442

vue2.0-创建单文件组件注册组件以及组件的使用 1、项目效果 2、项目组件演变项目组件需求，依次演变。 App.vue为根组件，对应Components目录专门放置vue文件（组件）。新增公共的头部信息。 3、项目项目目录结构， App.vue根组件 Components：存放自定义子组件其他目录暂时不管，如下目录结构，组件...

初学vue2 之组件

xinbear的博客

04-13

192

全局组件 1. 在main.js 内注册一个组件 // import bottom from '../reusecomponents/bottom.vue' // Vue.component('bottom ', bottom) // 注册组件要写在new Vue前面 Vue.component('my-component', { template: '<div @clic...

Vue2---组件