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. Java---- 静态内部类与非静态内部类的区别

    静态类(只有内部类才能被声明为静态类,即静态内部类)1.只能在内部类中定义静态类 2.静态内部类与外层类绑定,即使没有创建外层类的对象,它一样存在. 3.静态类的方法可以是静态的方法也可以是非静态的方 ...

  2. HTML 5的革新之一:语义化标签一节元素标签。

    摘至于:<HTML 5的革新——语义化标签(一)> HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即 ...

  3. javaweb中的标签的核心标签库的常用标签

    //标签的使用使得页面的代码更加简洁,jsp脚本的尽可能少的使用,所以熟练掌握标签对于开发是很有必要的 <%--set设置数据,默认在page域 --%> <c:set var=&q ...

  4. time:时间就是生命

    golang中的time包是用来处理时间的. 1.时间的基本属性 package main import ( "fmt" "strings" "tim ...

  5. linux svn 安装

    1.环境centos6.4 2.安装svnyum -y install subversion 3.配置 建立版本库目录mkdir /var/www/svndata svnserve -d -r /va ...

  6. VMware:未能将管道连接到虚拟机, 所有的管道范例都在使用中

    问题描述:虚拟机下的Ubuntu系统长时间死机无法正常关机,用Windows任务管理器关闭VMware也关不掉,没办法,只能直接关电脑了...重新打开电脑,启动VMware,发现提示客户机已经处于打开 ...

  7. 00-A-springmvc分布式项目项目结构

    项目使用IDEA进行开发 一个分布式项目基本需要的模块. 用到的技术spring+springmvc+mybatis+dubbo +mysql+redis 01模块名字:p2p-parent 作为父模 ...

  8. 11jsp

    1.JSP 1. 指令 作用:用于配置JSP页面,导入资源文件 格式:             <%@ 指令名称 属性名1=属性值1 属性名2=属性值2 ... %> 分类:        ...

  9. POJ 1734 无向图最小环/有向图最小环

    给定一张图,求图中一个至少包含三个点的环,环上的点不重复,并且环上的边的长度之和最小. 点数不超过100个 输出方案 无向图: /*Huyyt*/ #include<bits/stdc++.h& ...

  10. 关于scanf一个变量的覆盖问题

    假如你为了省空间,在scanf一个很长的字符串s后,又重复scanf 字符串s, 但是后面的s比前面的s短,那么在s后面一定有没覆盖的原字符串的字符: 那么在取字符串长度时会不会还是原来的s长度而不是 ...