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. python django网站编程视频教程学习资料下载

    “人生苦短,我用python”,学python的小伙伴应该都了解这句话的含义.但是,学python,你真正了了解强大的Django框架吗!?据说Django还是由吉普赛的一个吉他手的名字命名的呢,有木 ...

  2. C语言之在头文件中定义全局变量

    通常情况下,都是在C文件中定义全局变量,在头文件中声明,但是,如果我们定义的全局变量需要被很多的C文件使用的话,那么将全局变量定义在头文件里面会方便很多,那到底是如何实现的? os_var.c文件内容 ...

  3. RPM包搭建

    打包rpm软件包之spec文件解析 1. 概述 RPM的全称是(Red Hat Package Manager,Red Hat包管理器).RPM是一个开放的软件包管理器,工作在Red Hat.类Lin ...

  4. 读《JavaScript面向对象编程指南》(二)

    第五章 原型 在JavaScript中,所有函数都会拥有一个 prototype 的属性,默认初始值为空对象. 可以在相关的原型对象中添加新的方法和属性,甚至可以用自定义对象来完全替换掉原有的原型对象 ...

  5. java String练习

    package com.oracle.demo01; public class WorkNext { public static void main(String[] args) { //题目一:获取 ...

  6. 高性能mysql 第7章 mysql高级特性之分区表

    分区表: 分区表是一个独立的逻辑表,底层通过多个物理表实现. mysql实现分区表的方式是对底层表的封装.这意味着没有全局索引,索引是建立在底层的每个表上的(跟ORACLE不一样). 用到分区表的几种 ...

  7. /usr/lib/python2.7/site-packages/requests/__init__.py:91: RequestsDependency

    原因:python库中urllib3 (1.22) or chardet (2.2.1) 的版本不兼容 解决如下: [ [root@aaaaaaaaaaaaaaaaaaaa~]# pip uninst ...

  8. node + mongoDB

    在MongoDB安装这篇博客中已经创建了一个bella_blog的数据库,该数据已经包含了user集合. 下面就可以在node sever端用MongoDB了. Mongoose库简而言之就是在nod ...

  9. HDU6740 2019CCPC秦皇岛赛区 J. MUV LUV EXTRA

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=6740思路:求小数部分后k位的真前后缀 倒着kmp就好 #include<bits/stdc++.h& ...

  10. 什么是Web Service(Web服务)?

    从表面上看,Web Service就是一个应用程序,它向外界暴露出一个能够通过Web进行调用的API.例如可以创建一个提供天气预报的Web Service,那么无论你用哪种编程语言开发的应用都可以通过 ...