vue组件化之模板优化及注册组件语法糖

vue组件化 模板 优化 

https://www.cnblogs.com/singledogpro/p/12054895.html 这里我们对vue.js进行了初体验,输出了经典的hello world.但是在这个过程遇到了编程最恶心的事情----字符串拼接


enter description here

vue.extend函数需要一个对象,这个对象的属性是个模板,这个模板的源码是H5.

模板优化


创建组件构造器

在JavaScript里面写H5代码,这对于模块化来说是一种破坏。

再者,字符串拼接是非常恶心的事情,看上面的gif,可知字符串拼接不能格式化不能代码检查,要自己动手调格式,非常容易出错。

在script标签之前使用template标签,相当于在H5文档编写H5代码,不仅代码可以缩进,还有代码检查。


template模板

注册组件语法糖

所谓的注册组件语法糖是指省去组件构造器的定义,直接将组件构造器对象传入注册组件函数里,这样会减少CPU的调度以及内存的分配。

全局注册组件语法糖


全局组件注册优化

将组件构造器对象传入注册组件函数

局部注册组件语法糖


局部组件注册优化

将组件构造器对象传入注册组件函数

一般来说,很少使用全局组件,通常都是使用局部组件。

vue组件化之模板优化及注册组件语法糖的更多相关文章

  1. vue.js原生组件化开发(二)——父子组件

    前言 在了解父子组件之前应先掌握组件开发基础.在实际开发过程中,组件之间可以嵌套,也因此生成父子组件. 父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件chi ...

  2. App 组件化/模块化之路——Android 框架组件(Android Architecture Components)使用指南

    面对越来越复杂的 App 需求,Google 官方发布了Android 框架组件库(Android Architecture Components ).为开发者更好的开发 App 提供了非常好的样本. ...

  3. 从一个简单的组件化封装写优化DOM操作

    /* *缺点 * 1. 还需要我们自己手工维护dom状态,以数据的思想去思考 *2. 数据改变后,还需要我们自己手动改变dom *3. * */ class LikeButton{ construct ...

  4. vue组件化思想和模块化

    组件化 注册组件的基本步骤 创建组件构造器 (调用Vue.extend()方法) 注册组件 (调用Vue.component()方法) 注册组件语法糖 省去了调用Vue.extend()的步骤,而是可 ...

  5. Vue 组件化开发之插槽

    插槽的作用 相信看过前一篇组件化开发后,你对组件化开发有了新的认识. 插槽是干什么的呢?它其实是配合组件一起使用的,让一个组件能够更加的灵活多变,如下图所示,你可以将组件当作一块电脑主板,将插槽当作主 ...

  6. 三. Vue组件化

    1. 认识组件化 1.1 什么是组件化 人面对复杂问题的处理方式 任何一个人处理信息的逻辑能力都是有限的,所以当面对一个非常复杂的问题时我们不太可能一次性搞定一大堆的内容. 但是我们人有一种天生的能力 ...

  7. vue - Vue组件化编程

    今天是对vue组件化的一个理解,最主要的单文件组件,然后就可以脚手架的学习了,本来昨晚就该上传的,但是用的那个上传博客园的Python脚本不行了,换了一个新的. 组件化让我越来越感觉到框架的力量了 一 ...

  8. 为什么VUE注册组件命名时不能用大写的?

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...

  9. vue系列---Vue组件化的实现原理(八)

    _ 阅读目录 一. 什么是Vue组件? 如何注册组件? 1.1 全局注册组件 1.2 局部注册组件 二:组件之间数据如何传递的呢? 1) props 2) $emit 3) 使用$ref实现通信 4) ...

随机推荐

  1. 解决stackoverflow加载慢的插件

    浏览stackoverflow的时候,比较慢,网上找到一个大神写的小工具 挺管用,给推荐下. gitthub地址: https://github.com/justjavac/ReplaceGoogle ...

  2. jquery做的滑动按钮开关

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Delphi 内部过程和函数

  4. 9、linux权限-ACL权限

    来自为知笔记(Wiz)

  5. 23、GoAccess分析Nginx日志

    1.GoAccess基本概述 GoAccess是一个基于终端的快速日志分析器.其核心思想是实时快速分析和查看Web服务器统计信息. 1.安装简单: 2.操作容易: 3.界面酷炫:  2.GoAcce ...

  6. JavaScript 的 this 指向问题深度解析

    与我们常见的很多语言不同,JavaScript 函数中的 this 指向并不是在函数定义的时候确定的,而是在调用的时候确定的.换句话说,函数的调用方式决定了 this 指向. JavaScript 中 ...

  7. jmeter解析response里的json对象和数组

    1.解析提取json对象 2.解析提取json数组 注意,标红这里是从0开始计数 提取最后一个数组

  8. 格式化输出的三种方式,运算符及流程控制之if判断

    ''' 格式化输出的三种方式,运算符及流程控制之if判断 ''' # 格式化输出的三种方式 # 一.占位符 程序中经常会有这样场景:要求用户输入信息,然后打印成固定的格式 比如要求用户输入用户名和年龄 ...

  9. Python&R:警告信息管理

    计算机程序有时很人性化,比如给你警告提示信息: 计算机程序有时又非常不人性化,比如动不动就给你警告提示...... 如果你的程序是要给客户使用,有运行美化要求: 再尤其是比如警告出现在循环里的情况,那 ...

  10. [Linux系统] (8)Nginx

    一.高并发基础架构 简要流程: 1.客户端发请求. 2.又LVS等四层负载均衡系统将请求转发给不同的Nginx服务器. 3.Nginx与客户端建立TCP连接,拿到请求后分析URI,然后将其转发给对应的 ...