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. 移动端布局-rem

    created(){ // 设置根字号 // 屏幕宽度 setHTML(); // addEventListener()不冲突 window.addEventListener('resize', se ...

  2. Wayos网吧路由英雄联盟频繁掉线解决办法

    英雄联盟某些机器瞬间ping值飙升,然后一直掉线重连!研究好久,解决了,经验与大家分享 第一步,在路由器地址后加qos_ext.htm进入qos参数设置页面(如果出现不了设置界面请更新固件).比如:h ...

  3. linux下创建软链--laravel软链

    ln -s /www/wwwroot/project_name/storage/app/public/ /www/wwwroot/project_name/public/storage

  4. linux服务器上软件的安装

    mysql数据库的安装 redis的安装 zookeeper的安装

  5. DeepFM: A Factorization-Machine based Neural Network for CTR Prediction (2017)论文要点

    论文链接: https://arxiv.org/pdf/1703.04247.pdf FM原理参考: Factorization Machines with libFM 论文阅读  https://w ...

  6. 变分推断到变分自编码器(VAE)

    EM算法 EM算法是含隐变量图模型的常用参数估计方法,通过迭代的方法来最大化边际似然. 带隐变量的贝叶斯网络 给定N 个训练样本D={x(n)},其对数似然函数为: 通过最大化整个训练集的对数边际似然 ...

  7. Mongodb的mapreduce

    简单的看了一下mapreduce,我尝试不看详细的api去做一个group效果,结果遇到了很多问题,罗列在这里,如果别人也遇到了类似的bug,可以检索到结果. //先看person表的数据 > ...

  8. Linux下Discuz!7.2 LAMP环境搭建

    linux下Discuz LAMP环境搭建 1.需要的源代码 httpd-2.2.15.tar.gz          mysql-5.1.44.tar.gz     php-5.3.2.tar.gz ...

  9. 【leetcode】1237. Find Positive Integer Solution for a Given Equation

    题目如下: Given a function  f(x, y) and a value z, return all positive integer pairs x and y where f(x,y ...

  10. idea生成实体类

    1.点击View->Tool Windows->Database 2.点击Datebase框的加号,DateSource,选择对应的数据源,配置对应信息,点击Test Connection ...