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

组件的核心是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. 比较两个list对象是否相同

    public Boolean exist(Container container){ List<SensorAtom> newSensorList = container.getSenso ...

  2. Eclipse中Project的属性Deployment Assembly（部署程序集）消失了，不存在了，去哪儿了

    1. 该项目不是web项目,所以不存在Deployment Assembly 属性.在Eclipse中,怎样将一个非web project变成一个web project? 1)右键项目,选择Proje ...

  3. ssh的用户配置文件config管理ssh会话

    抄的这个: https://www.cnblogs.com/zhonghuasong/p/7236989.html 只是在这里留个存档,防止删除 我有这样的需求就是,因为需要ssh连接到服务器,然后每 ...

  4. shell脚本启动语法错误syntax error near unexpected token '{

    执行shell脚本时失败,报语法错误,但脚本内容检查正常 原因为该脚本是在非Linux系统下编辑之后放到系统执行的,文件模式类型非Linux系统匹配的模式类型. 查看文件的模式类型 显示文件的模式类型 ...

  5. MATLAB 统计元素出现的次数

    可以使用 hist 函数: A = [1 2 8 8 1 8 2 1 8 2 1]; count = hist(A,unique(A)) count的结果与unique(A)对应.

  6. 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题

    ##2017.10.30收集 面试技巧 5.1 面试形式 1)        一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好. ...

  7. css3 box-shadow 使用方法详解

    其用法为:  代码如下 复制代码 box-shadow: x-offset y-offset blur spread color inset; 上述六个参数含义依次是水平方向的偏移(正值向右偏移,负值 ...

  8. 批量替换存储过程内容脚本sp_SqlReplace

    开始 在数据库开发过程中,如果某一个表字段名被重命名.那么在使用到该字段的存储过程,对应的表字段名也要修改. 当存在多个存储都有使用该表字段,需要逐个去修改替换,是一件比较繁琐的事情,我们需要一个能实 ...

  9. php位运算 与 或 异或 取反

    <?php /** php中有4个位运算,分别是&与 |或 ^异或 ~取反 & 两位全为1,结果为1 | 有一位为1,结果为1 ^ 一个为0,一个为1,结果为1 ~ 取反0-&g ...

  10. logrus日志使用详解

    1.logrus特点 golang标准库的日志框架很简单,logrus框架的特点: 1)完全兼容标准日志库 六种日志级别:debug, info, warn, error, fatal, panic ...