在 2.5.0 及以上版本中,如果你使用了单文件组件,那么基于模板的函数式组件可以这样声明:

<template functional>
<div class="cell">
<div v-if="props.value" class="on"></div>
<section v-else class="off"></section>
</div>
</template> <script>
export default {
props: ['value']
}
</script>

我们标记组件为 functional,这意味它是无状态 (没有响应式数据),无实例 (没有 this 上下文)。

提示:函数式组件比普通组件性能更好,缺点是定义的数据没有响应式。

【vue】函数式组件的更多相关文章

  1. Vue 函数式组件 functional

    函数式组件 无状态 无法实例化 内部没有任何生命周期处理函数 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件,无逻辑和状态修改) 在template标签里标明functional 只 ...

  2. Vue函数式组件的应用

    一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1. 以局部组件为例,将组件标记为 functional=ture; 因为 ...

  3. vue函数式组件详解

    本篇将详细介绍vue组件化之函数式组件,会用到以下api: Vue.component().Vue.extend().$createElement.patch(). 从事vue开发的小伙伴,平时组件化 ...

  4. Vue.js 源码分析(三十) 高级应用 函数式组件 详解

    函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...

  5. 渲染函数render和函数式组件

    vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...

  6. Vuejs函数式组件,你值得拥有(1)

    函数式组件在React社区很流行使用,那么在vue里面我们要怎么用呢 下面会涉及到的知识点: 高阶函数.状态.实例.vue组件 什么是函数式组件 我们可以把函数式组件想像成组件里的一个函数,入参是渲染 ...

  7. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  8. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  9. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

随机推荐

  1. 【憩园】C#并发编程之异步编程(一)

    写在前面 C#5.0中,对异步编程进行了一次革命性的重构,引入了async和await这两个关键字,使得开发人员在不需要深刻了解异步编程的底层原理,就可以写出十分优美而又代码量极少的代码.如果使用得当 ...

  2. 利用ELK分析Nginx日志生产实战(高清多图)

    本文以api.mingongge.com.cn域名为测试对象进行统计,日志为crm.mingongge.com.cn和risk.mingongge.com.cn请求之和(此二者域名不具生产换环境统计意 ...

  3. C语言函数及变量的声明与定义的区别

    变量: 1.声明变量不需要建立存储空间,如:extern int a; 2.定义变量需要建立存储空间,如:int a:或者 int b=10:无论变量是否赋值,只要定义它,即占用空间. 3.int a ...

  4. 菜鸟学IT之简易四则运算程序开发

    作业要求来源:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2166 作业要求: 任何编程语言都可以,命令行程序接受一个数字输入,然后 ...

  5. Docker 概览

    什么是Docker Docker是开发,运行和部署应用程序的开放管理平台. 开发人员能利用docker 开发和运行应用程序 运维人员能利用docker 部署和管理应用程序 Docker 平台介绍 Do ...

  6. JS对JSON对象遍历输出的时候真的是按照顺序输出吗?

    对象的遍历输出并不是按照对象属性定义顺序来的,那么是按照什么规则来的呢,仔细深入研究你会发现,这还跟浏览器有关系,Chrome跟IE是不一样的,所以给出以下结论: Chrome Opera 的 Jav ...

  7. qsort.c源码

    /* 版权所有(C) 1991-2019 自由软件资金会. 该文件属于是GUN C语言函数库,由Douglas C. Schmidt(schmidt@ics.uci.edu)所写. GUN C语言函数 ...

  8. 2019-04-19 EasyWeb数据源问题

    问题描述:今天增加了个新模块,为了让各个模块自己保留自己的数据源配置,所以把数据源配置类放入自己模块包中,但是进行请求发现数据源会先选择默认的数据源,导致报错说主数据源下不存在表:当我把配置文件放回统 ...

  9. js定时器 实现提交成功提示

    应用场景: 用户评论后,在合适位置弹出“评论成功”,2秒钟后自动消失,提示用户评论成功. HTML: {#评论成功提示#} <div class="popup_con" st ...

  10. hashlib 模块:加密

    import hashlib # 基本使用 cipher = hashlib.md5('需要加密的数据的二进制形式'.encode('utf-8')) print(cipher.hexdigest() ...