概念:

  组件(Component)是自定义元素。

作用:

  可以扩展HTML元素,封装可重用的代码。

<div id="myView">
<!-- 把学生的数据循环输出,用 v-bind动态绑定 props的值到父组件的数据中-->
<student
v-for="student in studentList"
v-bind:data="student"
v-bind:key="student.id">
</student>
</div>

<!-- 定义模型层,存放学生的数据-->
var myModel = {studentList:[{id:,name:'张三',height:},{id:,name:'李四',height:},{id:,name:'王平',height:},{id:,name:'老张',height:}]};
<!-- 创建视图层,接收存放学生数据的界面、数据-->
var myViewModel = new Vue({ el:'#myView', data:myModel });
//导入自己写的js,主要目的是:组件可复用
//<script src="js/student.js"></script> //注册
Vue.component('student', {
//声明props
props:['data'],
template: '<div><span style="color:red">{{data.id}}</span><span style="color:green">{{data.name}}</span><span style="color:blue">{{data.height}}</span></div>'
});//目的:组件可复用

Vue.js——component(组件)的更多相关文章

  1. Vue.js多重组件嵌套

    Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...

  2. Vue.js之组件嵌套

    Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...

  3. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  4. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  5. Vue.js之组件传值

    Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...

  6. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  7. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

  8. Vue.js之组件(component)

    从结构上看,组件之于实例,就好比轮子之于汽车.从属性和方法来看,组件有实例的大部分方法,如果Vue实例是孙悟空,组件就好比实例的一个毫毛,变化多端却为Vue实例所用. 目录: 组件的注册 is的作用 ...

  9. Vue.js说说组件

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...

随机推荐

  1. 教程] 《开源框架-Afinal》之FinalHttp 01一步一脚

    1.FinalHttp是什么 :FinalHttp 对 HttpClient再次封装,最简洁的就是增加了许多回调的方法,对Get 和 Post 请求进行了简化.另外一点就是FinalHttp加入线程池 ...

  2. cocos2d-x入门学习笔记,主要介绍cocos2d-x的基本结构,并且介绍引擎自带的示例

    cocos2d-x 3.0 制作横版格斗游戏 http://philon.cn/post/cocos2d-x-3.0-zhi-zuo-heng-ban-ge-dou-you-xi http://blo ...

  3. A1053. Path of Equal Weight

    Given a non-empty tree with root R, and with weight Wi assigned to each tree node Ti. The weight of ...

  4. JSP总结(一)——基础(汇总)

    前言:原本呢,是打算只写个JSP的内置对象总结,但是没想到这个家伙的JSP总结非常不错,我就拿来用了. 注:后缀为汇总的基本上是整理一些网上的. 借鉴地址:http://www.cnblogs.com ...

  5. Skype 使用小技巧

    原文发布在个人独立博客上,链接:http://maxpeng.vipcloud.me/2016/09/01/skype-tricks-tips/   Skype 作为一个即时聊天工具,相信大家都不陌生 ...

  6. Code-force 1003 E Tree Constructing

                                                                                                    E. T ...

  7. 用socket写一个简单的客户端和服务端程序

    用来练手写写socket代码 客户端代码 #include <stdio.h> #include <sys/types.h> #include <sys/socket.h ...

  8. js对象克隆

    大家都知道,js的对象是引用类型,如果直接var obj2 = obj,obj2和obj是共享同一个对象实体的,这往往不是我们想要的结果. 官方并没有给出通用的对象克隆方法: 我们给出以下几种写法: ...

  9. redis工具类 ----RedisPoolUtil

    这里介绍一下,这个工具类不是在分布式环境下来用的,就是我们平常使用的,单机状况下,为什么博主开头要这样强调呢?因为,之前见网上有些博友有这样封装的,也有RedisShardedPoolUtil 封装的 ...

  10. #define宏定义中## #@ # \ 符号使用

    C/C++ 宏命令的神奇用法. 先看下面三条语句: #define Conn(x,y)     x##y#define ToChar(x)     #@x#define ToString(x)    ...