热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

vue2.0开发入门笔记之.vue文件的生成和使用

这几天新项目用vue2.0开发,由于之前没用过vue,拿到项目框架看到都是.vue文件, 不知道怎么用,以下是关于.vue文件的发现:

这几天新项目用vue2.0开发,由于之前没用过vue,拿到项目框架看到都是.vue文件,

这里写图片描述

不知道怎么用,以下是关于.vue文件的发现:

1、一个.vue文件是一个封装的组件,在.vue文件里可以写 html, css, js

这里写图片描述

其中template 中写html 代码,其实就是定义模板。

2、各个.vue之间样式不是独立的,同一选择器在不同的.vue里只要满足选中的条件就可以起作用.比如我在箭头1指的文件里定义了样式 .box{ width:200px; },如果在箭头2指的文件里也有 .box,那么 .box{ width:200px; }就会在箭头2的文件也起作用,除非是在箭头2的文件重新定义样式并覆盖。

这里写图片描述

3、不使用.vue 单文件时,通过 Vue 构造函数 创建一个 Vue 根实例来启动vuejs 。.vue文件中不用Vue创建实例,用export default 。 .vue文件中 export default 后面的对象 就相当于 new Vue() 构造函数中的接受的对象:

这里写图片描述

即:


4、可以引入less等:

这里写图片描述

5、在route.js中设置跳转路径是,如果调到某一文件夹下的 index.vue文件,则可以省略文件夹后的 index.vue。要跳转到这个文件时:

这里写图片描述

则下面这两句话是等价的:

这里写图片描述

这里写图片描述

所以一般是省略掉文件夹后的index.vue。

以上关于这个.vue的组件应用,希望对您有所帮助。也希望大家多多支持。


推荐阅读
  • 本文详细解析了 `DirectoryInfo.GetFiles` 方法的使用方法及其应用场景。通过示例代码展示了如何在 C# 程序中利用该方法获取指定目录下的所有文件列表,同时探讨了其参数选项和返回值类型,为开发者提供了实用的操作指南。 ... [详细]
  • 下面的代码旨在输出其类文件的完整名称。对于不熟悉类字面量的读者,`Me.class.getName()` 方法会返回类的全称,例如 “com.javapuzzlers.Me”。通过这一机制,可以深入了解 Java 类加载和反射机制的内部工作原理。 ... [详细]
  • 本文深入探讨了层叠样式表(CSS)的核心原理与应用技巧,旨在帮助读者全面理解CSS的工作机制。从选择器、属性到布局模式,文章详细解析了CSS的关键概念,并通过实例展示了如何高效运用这些技术,提升网页设计与开发的水平。 ... [详细]
  • 通过命令行工具 `virt-install` 配置和安装虚拟机环境。`virt-install` 是一个基于 `libvirt` 虚拟化管理库的命令行工具,用于创建新的虚拟机实例。该工具支持通过串行控制台和 SDL 图形界面进行虚拟机的安装和管理,适用于多种操作系统和虚拟化平台。 ... [详细]
  • 在进行 MySQL 表连接操作时,首先需明确业务需求,确定所需字段所在的表,并选择合适的连接类型。关键在于识别两个表之间的关联字段,如学生表中的 `studentNO` 与成绩表中的 `studentID`,并设置相应的连接条件,以确保数据准确匹配。此外,合理利用索引和优化查询语句,可以显著提升查询性能。 ... [详细]
  • 正则表达式与文本处理三剑客深入解析
    本文深入解析了正则表达式及其在文本处理中的应用,详细介绍了常用的正则表达式模式,如 `[0-9]` 用于匹配任意一个数字字符,`[^0-9]` 匹配任意一个非数字字符,`^[0-9]` 表示以数字开头,`[a-z]` 匹配任意一个小写字母,而 `[a-zA-Z]` 则匹配任意一个字母,并强调了正则表达式中大小写的区分。此外,文章还探讨了正则表达式在文本处理中的高级用法,包括模式匹配、字符串替换和数据提取等技术,为读者提供了丰富的实战案例和应用场景。 ... [详细]
  • 问题背景:在使用Struts2注解实现ZIP文件下载功能时,由于InputStream未正确关闭,导致Tomcat服务器异常终止。重启后,系统抛出`java.io.EOFException`错误。具体表现为,在文件下载过程中,如果请求未正常完成或客户端提前中断连接,未关闭的InputStream会占用资源,最终导致服务器资源耗尽,触发异常。为解决此问题,建议在代码中确保InputStream在使用完毕后能够及时且正确地关闭,以避免资源泄露和服务器崩溃。 ... [详细]
  • 使用 Vue 集成 iScroll 实现移动端表格横向滚动与固定列功能 ... [详细]
  • Oracle程序包基础入门:了解核心概念与基本结构
    本文旨在为初学者介绍 Oracle 程序包的基础知识,涵盖其核心概念和基本结构。通过详细解析程序包的组成元素,如过程、函数和变量,帮助读者理解如何在实际应用中有效使用 Oracle 程序包。此外,文章还提供了实例代码,以便读者更好地掌握这些关键概念。 ... [详细]
  • Zuul过滤器:深入解析与应用优化
    在服务网关中实现过滤器,只需继承抽象类并实现其定义的四个关键方法,即可对请求进行拦截和处理。过滤器具有两大核心功能:一是路由功能,负责将外部请求转发至具体的微服务实例,实现外部访问的统一入口;二是过滤功能,用于对请求进行预处理和后处理,增强系统的安全性和性能。通过合理配置和优化过滤器,可以显著提升服务网关的整体效能。 ... [详细]
  • 教程:使用Source Monitor进行代码质量分析
    Source Monitor 是一款强大的代码分析工具,能够对 Java、C++、C、C# 和 Delphi 等多种编程语言进行复杂度分析,帮助开发者有效评估和提升代码质量。通过详细的指标和报告,该工具可辅助团队识别潜在问题并优化代码结构。 ... [详细]
  • WinForms应用程序中的高效双缓冲技术优化方法
    在探讨WinForms应用程序中高效的双缓冲技术优化方法时,网络上的资料往往杂乱无章,缺乏清晰的解释。本文总结了多种优化方案,包括但不限于:第一种方案,通过设置控件的DoubleBuffered属性来减少屏幕闪烁;第二种方案,自定义绘图方法以提高性能;第三种方案,利用重载WndProc方法拦截绘制消息。此外,还结合实际代码示例,详细解析了每种方案的实现原理和应用场景,帮助开发者更好地理解和应用双缓冲技术。 ... [详细]
  • 本文深入探讨了Windows操作系统中线程同步机制的关键技术,重点分析了`WaitForSingleObject`和`Event`的使用方法及其应用场景。通过详细介绍`CreateEvent`函数的创建过程及其在判断线程退出和实现线程间同步中的重要作用,结合具体实例,展示了如何高效地利用这些工具来解决多线程编程中的常见问题。此外,文章还讨论了这些机制在实际开发中的最佳实践和注意事项,为开发者提供了宝贵的参考。 ... [详细]
  • 题目要求在给定的数组中找到一个连续子数组,使其乘积最大。本文详细介绍了使用动态规划算法解决这一问题的方法,包括状态定义、状态转移方程和初始化步骤。通过具体的例子和代码实现,帮助读者深入理解该算法的核心思想和实现细节。 ... [详细]
  • Dapper:一款高效轻量的ORM框架
    Dapper 是一个高效且轻量级的 ORM(对象关系映射)框架,由 StackExchange 开发并维护。它旨在提供快速的数据访问性能,同时保持代码的简洁性和易用性。Dapper 可以显著提高开发效率,特别适用于需要高性能数据操作的应用场景。更多详细信息可参考其官方文档和 GitHub 仓库。 ... [详细]
author-avatar
迷失在黑暗中的我_136
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有