组件分为全局组件和局部组件。

组件的核心是template；所有的数据都为template服务。

父组件子组件传值：因为子组件是父组件的个标签，完全等同于添加动态属性；

然后子组件能够通过props：[  ]获取，(注意，props必须是数组或者对象，而不能是字符串)

如果不通过props接受父组件穿过来的值，那么子组件会以行间样式的形式把值表现出来，如下

 <body>

     <div id="app">

         <my-template :trans='data1'></my-template>

     </div>

     <!-- <script src="../vue.js"></script> -->

     <script src="https://cdn.bootcss.com/vue/2.5.21/vue.common.dev.js"></script>

     <script>

         var myTemplate = {

             template: '<div> {{trans}} </div>',

             props: {
　　

                 trans: [Number, String ] //子组件对父组件传来的值进行约束，必须是数字,还可以是对象，有default，type，require，validator

             }

         }

         const vm = new Vue({

             el: '#app',

             data: {

                 data1: 'aaa',

             },

             components:{

                 myTemplate: myTemplate

             }

         })

     </script>

vue的组件基础的更多相关文章

  1. 前端框架之Vue(9)-组件基础&vue-cli

    组件基础 基本示例 这里有一个 Vue 组件的示例: <!DOCTYPE html> <html lang="en"> <head> <m ...

  2. vue入门——组件基础todolist

    1. 以下是 todolist 的例子,没有用到组件:下面的3 会通过组件拆分todolist <!DOCTYPE html> <html lang="en"&g ...

  3. vue 父子组件 基础应用scrollball v-model sync

    # 组件之间通信 可以通过 v-model 子组件可以通过 改变数据来改变父组件的数组  * v-model  子组件需要接受value属性,需要出发this.$emit("input&qu ...

  4. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  5. Vue.js-09：第九章 - 组件基础再探（data、props）

    一.前言 在上一章的学习中,我们学习了 Vue 中组件的基础知识,知道了什么是组件,以及如何创建一个全局/局部组件.不知道你是否记得,在上一章中,我们提到组件是一个可以复用的 Vue 实例,它与 Vu ...

  6. Vue组件基础

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  7. Vue学习计划基础笔记(六) - 组件基础

    组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...

  8. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  9. Vue 组件基础完整示例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. fopen_s遇到的一个问题

    今天使用公司代码的日志模块记录程序运行的相关信息,发现日志总是只有两条记录,即程序启动和结束,别的都没有.跟踪了很久,终于发现是日志输出模块被我修改了一个地方:把fopen改成了fopen_s,毕竟报 ...

  2. Foxmail中配置O365邮箱和Hotmail邮箱

    一.简述 平时我们经常使用第三方的邮箱工具来管理邮箱.可能性能比Outlook好很多,比如Foxmail,而且也能和Skype会议关联的很好.本文就讲如何在Outlook中关联Office365邮箱和 ...

  3. [转]PID控制算法原理

    PID控制算法是工业界使用极其广泛的一个负反馈算法,相信这个算法在做系统软件时也有用武之处,这里摘录了知乎上的一篇文章,后面学习更多后自己总结一篇 以下为原文: PID控制应该算是应用非常广泛的控制算 ...

  4. 单片机成长之路（51基础篇） - 022 N76e003 APROM模拟EEPROM驱动

    N76e003单片机内部没有EEPROM,但是可以使用 APROM模拟EEPROM功能,代码如下: eeprom.h #ifndef _EEPROM_H_ #define _EEPROM_H_ //E ...

  5. Python 获得最近一个月的每天的日期

    直接上代码: #coding:utf-8 # from common.contest import * import datetime import time begin_date = (dateti ...

  6. Django Rest Framework(认证、权限、限制访问频率)

    阅读原文Django Rest Framework(认证.权限.限制访问频率) django_rest_framework doc django_redis cache doc

  7. 音视频编解码: YUV存储格式中的YUV420P,YUV420SP,NV12, NV21理解(转)

    概述  之前介绍了YUV码流的采样格式,下面分析下YUV码流的存储格式,YUV码流的存储格式与采样格式息息相关.总的来讲,YUV存储格式主要分为两种: planar 平面格式 指先连续存储所有像素点的 ...

  8. SQL Server 2016新特性：数据库级别配置

    新的  ALTER DATABASE SCOPED CONFIGURATION (Transact-SQL) 用来配置数据库级别配置. 这个语句可以配置每个数据库的配置: 清理过程cache 设置MA ...

  9. 【iCore4 双核心板_uC/OS-II】例程五：信号量——共享资源

    一.实验说明: 信号量是操作系统中的一类事件,是实现任务间通信的一个中间环节.当系统中的多个任务 在运行时,经常需要互相无冲突地访问同一个资源,或者需要互相支持的依赖,甚至有时还要互 相加以必要的限制 ...

  10. myeclipse 从数据库生成java实体类