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. 前端开发 | 尝试用Markdown写一下近几个月的总结

    近期总结 回顾 半年前 半年前,接触了前端一年多(工作半年)的我了解的东西只有下面这些.因为在公司里的工作就是切静态页,捣鼓CMS. HTML (比较简洁的编写HTML) CSS/CSS3 (PC兼容 ...

  2. 树莓派wifi环境下初始化及环境配置

    在此放一下我的系统 链接:https://pan.baidu.com/s/192cL6qSsMd-wqxHeDWfIug 提取码:0lrq 1.准备一张内存卡,最好是32G class10 16G的话 ...

  3. CISCO SMARTnet服务和SMB服务技术支持

    点击官网:SMB Support Assistant技术支持服务 点击官网:思科SMARTnet快速维护及快速维护现场服务 一.SMARTnet服务 1.1 标准SMARTnet 服务级别:5*8*N ...

  4. 借助Charles来测试移动端-下篇

    本篇是借助Charles来测试移动端的下半篇.(上篇任意门点我) 上次说到可以借助Charles来抓移动端的网络请求,接下来,我们来看一下怎么通过Charles来模拟返回,还是以网页版豆瓣为例. 先找 ...

  5. 关于cli打包至服务器出现的BUG(样式错乱,路径出错)解决方案

    很久没来博客园了,今天给大家带来两个硬货bug,前端大牛可能不觉得是啥,但是对于没碰到过这问题的小菜鸟我来说还是很不错的 1.npm run build 至服务端的时候出现路径报错解决方案 ①.本地测 ...

  6. java 学习笔记(五) Zookeeper的集群配置和Java测试程序

    参考博客 http://blog.csdn.net/catoop/article/details/50848555 http://blog.csdn.net/randompeople/article/ ...

  7. HDU - 6582 Path (最短路+最小割)

    题意:给定一个n个点m条边的有向图,每条边有个长度,可以花费等同于其长度的代价将其破坏掉,求最小的花费使得从1到n的最短路变长. 解法:先用dijkstra求出以1为源点的最短路,并建立最短路图(只保 ...

  8. linux cp复制目录所有文件

    mkdir gpio cp -r build/ /home/yl/gpio 这样就把build目录及所有文件都拷贝到gpio文件夹中.

  9. hiho #1485 : hiho字符串(滑动窗口)

    #1485 : hiho字符串 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 如果一个字符串恰好包含2个'h'.1个'i'和1个'o',我们就称这个字符串是hiho字符 ...

  10. qt5--鼠标操作

    #include "mylabel.h" #include <QDebug> #include <QPointF> #include <QPoint& ...