接着前面的内容:https://www.cnblogs.com/yanggb/p/12682137.html

单文件组件

介绍

在很多的vue项目中,我们都是使用【Vue.component】来定义全局组件,紧接着用【new Vue({el:'#container'})】在每个页面内指定一个容器元素。

这种方式在很多中小规模的项目中运作得很好,在这些项目里javascript只被用来加强特定的视图。当在更复杂的项目中,或者你的前端完全由javascript驱动的时候,下面的这些缺点将会变得非常明显:

1.全局定义(Global Definitions)强制要求每个component中的命名不得重复。

2.字符串模板(String Template)缺乏语法高亮,在html有多行的时候,需要用到丑陋的【\】符号。

3.不支持CSS(No CSS Support)意味着当html和javascript组件化的时候,css被明显遗漏。

4.没有构建步骤(No Build Step)限制只能使用html和es5 javascript,而不能使用预处理器,如Pug(formerly jade)和Babel。

而文件拓展名为【.vue】的single-file-components(单文件组件)为上面所有的问题提供了解决方案,并且还可以使用webpack或Browserify等构建工具。

这是一个文件名为Hello.vue的简单示例:

现在我们就获得了以下好处:

1.完整的语法高亮。

2.CommonJS模块(module.exports)。

3.组件作用域的CSS(注意scoped属性)

正如上面说到的,开发者可以使用预处理器来构建简洁和功能更丰富的组件,比如Pug,Babel(with es2015 modules)和Stylus等。

这些特定的语言只是例子,你可以只是简单地使用Babel,TypeScript,SCSS,PostCSS或其他任何能够帮助你提高生产力的预处理器。比如,如果搭配vue-loader使用webpack,它也能为CSS Modules提供头等支持。

怎么看待关注点分离

一个重要的事情值得注意,关注点分离不等于文件类型分离。在现代UI开发中,我们已经发现,相比于把代码库分离成三个大的层次并将其相互交织起来,把它们划分为松散耦合的组件再将其组合起来要更合理一些。在一个组件里,其模板、逻辑和样式是内部耦合的,并且把它们搭配在一起实际上使得组件更加内聚且更可维护。

即便你不喜欢单文件组件,你仍然可以把javascript、css分离成独立的文件然后做到热重载和预编译。

<!-- my-component.vue -->
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

针对刚接触javascript模块开发系统的用户

有了【.vue】组件,我们就进入了高级javascript的应用领域。如果你没有准备好的话,意味着还需要学会使用一些附加的工具:

1.Node Package Manager(NPM)。

2.Modern JavaScript with ES2015/2016。

在你花费了一天时间了解了这些资源之后,官方文档建议你参考vue cli3。只要遵循指示,你就能很快地运行一个带有【.vue】组件、es2015、webpack和热重载(hot-reloading)的vue项目。

针对高级用户

cli会为你搞定大多数工具的配置问题,同时也支持细粒度自定义配置项。

而有时你可能会想要从零开始搭建你自己的构建工具,这时候你就需要通过vue loader手动配置webpack。关于webpack的内容学习可以通过查阅其官方文档。

"我还是很喜欢你,像细雨洒落八千里,淅淅沥沥。"

vue2.x学习笔记(二十六)的更多相关文章

  1. python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码

    python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码 python的json.dumps方法默认会输出成这种格式"\u535a\u ...

  2. Java基础学习笔记二十六 JDBC

    什么是JDBC JDBC(Java DataBase Connectivity)就是Java数据库连接,说白了就是用Java语言来操作数据库.原来我们操作数据库是在控制台使用SQL语句来操作数据库,J ...

  3. vue2.x学习笔记(十六)

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12616543.html. 组件中的插槽 在2.6.0的版本中,vue为具名插槽和作用域插槽引入了一个新的统一的语法 ...

  4. PHP学习笔记二十六【类的重载】

    <?php //重载: //函数名一样,通过函数的参数个数或者是参数类型不同,达到调用同一个函数名 Class A{ // public function test1(){ // echo &q ...

  5. angular学习笔记(二十六)-$http(4)-设置请求超时

    本篇主要讲解$http(config)的config中的timeout项: $http({ timeout: number }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错 ...

  6. Java学习笔记二十六:Java多态中的引用类型转换

    Java多态中的引用类型转换 引用类型转换: 1.向上类型转换(隐式/自动类型转换),是小类型到大类型的转换: 2.向下类型转换(强制类型转换),是大类型到小类型的转换: 3.instanceof运算 ...

  7. 深度学习(二十六)Network In Network学习笔记

    深度学习(二十六)Network In Network学习笔记 Network In Network学习笔记 原文地址:http://blog.csdn.net/hjimce/article/deta ...

  8. Nodejs学习笔记(十六)--- Pomelo介绍&入门

    目录 前言&介绍 安装Pomelo 创建项目并启动 创建项目 项目结构说明 启动 测试连接 聊天服务器 新建gate和chat服务器 配置master.json 配置servers.json ...

  9. python3.4学习笔记(二十五) Python 调用mysql redis实例代码

    python3.4学习笔记(二十五) Python 调用mysql redis实例代码 #coding: utf-8 __author__ = 'zdz8207' #python2.7 import ...

  10. python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法

    python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...

随机推荐

  1. MySQL 解析 json 数组(mysql在5.7开始支持json解析)

      1.函数 JSON_EXTRACT 表数据格式: 查询结果: sql 语句: -- ---------------------------- -- Table structure for json ...

  2. 在scratch中怎样编写抓蝴蝶游戏

    打开scratch2.0软件,进入工作界面,将语言切换为简体中文:将默认的演员猫删除掉:在新建背景中选择“从背景库中选择背景”: 选择户外,来点一个背景图flower bed,然源后点下面的确定: 背 ...

  3. Vulnhub DC-2靶机渗透

    信息搜集 nmap扫描端口 nmap -sV 192.168.146.140 -p1-10000 开了80端口,那就直接访问一下把.(7744端口是ssh端口,之后会用到) 输入ip,发现url处变成 ...

  4. Google GMS介绍

    Google GMS介绍GMS全称为GoogleMobile Service.GMS目前提供有Search.Search by Voice.Gmail.Contact Sync.Calendar Sy ...

  5. JAVA中基本类型和包装类之间的相互转换

    转自:https://www.imooc.com/code/2250 仅做个人学习记录之用,侵删. 基本类型和包装类之间经常需要互相转换,以 Integer 为例(其他几个包装类的操作雷同哦): 在 ...

  6. json.dumps() 和 json.loads()

    转载: https://blog.csdn.net/qinglingls/article/details/96476368

  7. 【高并发】高并发环境下如何防止Tomcat内存溢出?看完我懂了!!

    写在前面 随着系统并发量越来越高,Tomcat所占用的内存就会越来越大,如果对Tomcat的内存管理不当,则可能会引发Tomcat内存溢出的问题,那么,如何防止Tomcat内存溢出呢?我们今天就来一起 ...

  8. JMF 下载安装与测试 测试成功

    本来就是想在自己写的java里面加入实习的摄像头监控,然后个各种百度了一下,就用JMF来弄了,不过这个东西貌似比较旧,网上的资料虽然说有,但是也不是太多,并且遇到的一下问题也不能解决,总之经过了一天的 ...

  9. JavaScript实现简单的弹幕效果实例分析

    不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰.今天我们来写一个简单的弹幕.简单到什么程度呢?看下效果: 由图可以看出,我们的呆毛html结构确实是非 ...

  10. 45道SQL数据题详解1

    准备阶段: 创建表: //创建学生表,前面的s表示学生,相应的标签前面加t表示老师 CREATE TABLE students (sno VARCHAR(3) NOT NULL, sname VARC ...