template-组件封装
HTML:
//:ligit='ligit' 一致
<div id='app'>
<template-swiper :ligit='ligit'></template-swiper>
</div>
<template id='tabs-list-t'>
<ul>
<li v-for='item,index in ligit'>{{item.name}}-{{item.age}}-{{item.addr}}</li>
</ul>
</template>
JS:
<script src="vue2.js"></script>
<script type="text/javascript">
Vue.component('template-swiper',{
// :light是props
props:['ligit'],
data(){
return {
// data1随便起的
data1:this.ligit
}
},
template:'#tabs-list-t'
})
var vm= new Vue({
el:'#app',
data : {
// light与props一致
ligit:[
{name:'YJUI',age:123,addr:'地址'},
{name:'hui',age:12,addr:'地址2'},
]
},
})
</script>
运行:
template-组件封装的更多相关文章
- Vuejs 页面的区域化与组件封装
组件的好处 当我用vue写页面的时候,大量的数据页面渲染,引入组件简化主页面的代码量,当代码区域块代码差不多相同时,组件封装会更加简化代码.组件是Vue.js最强大的功能之一. 组件可以扩展HTML元 ...
- Vue + Element UI 实现权限管理系统 (功能组件封装)
组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
- Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)
在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着 ...
- elementUI分页组件封装
在实际开发需求,产品需要的分页组件比较简单,只可以一页页地翻,就是为了防止用于直接翻看最后的数据(因为有一些历史数据数据量比较大,查看的意义不大,检索效率比较低也比较忙,因为不希望用户在翻页的时候可以 ...
- elementUI下拉树组件封装
使用组件:Popover 弹出框.Tree 树形控件 和 input 输入框 用法: 1.新建一个.vue文件,粘贴以下组件封装的代码(完全可以使用) 2.在页面需要使用下拉树的地方调用即可. (1) ...
- 循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码
VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...
- 04.ElementUI源码学习:组件封装、说明文档的编写发布
0x00.前言 书接上文.项目经过一系列的配置,开发脚手架已经搭建完毕.接下来开始封装自定义组件.并基于 markdown 文件生成文档和演示案例. 后续文章代码会根据篇幅,不影响理解的情况下进行部分 ...
- Masa Blazor自定义组件封装
前言 实际项目中总能遇到一个"组件"不是基础组件但是又会频繁复用的情况,在开发MASA Auth时也封装了几个组件.既有简单定义CSS样式和界面封装的组件(GroupBox),也有 ...
- ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State
开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合 ...
随机推荐
- 2017-12-08 违法数据筛选.sql
SELECT R. ID, R.LKBH, R.CDBH, R.FXBH, R.ZJBH, R.SBBH, R.CPHM, R.CPYSBH, R.CPYS, R.CSYSBH, R.CSYS, R. ...
- python os 模块详解
os.sep:取代操作系统特定的路径分隔符 os.name:指示你正在使用的工作平台.比如对于Windows,它是'nt',而对于Linux/Unix用户,它是'posix'. os.getcwd:得 ...
- Python之旅的开始day1
Python有哪些种类: JPython.IronPython.JavaScriptPython.RubyPython.CPython(即将开始学习种类,最为常见的种类).pypy pypy:这是用C ...
- python3练习100题——014
这题卡了我一整天,然后还是看答案撸了一遍- 原题链接:http://www.runoob.com/python/python-exercise-example14.html 题目:将一个正整数分解质因 ...
- 用eclipse的同一个tomcat启动两个javaweb项目
1.右键选择 Add and Remove 2.把左边两个项目add到右边 3.完成之后查看eclipse左边的Servers下的server.xml文件,会自动生成两个Context标签,当然你到第 ...
- SQL注入 盲注
来源:http://www.cnblogs.com/cheatlove/articles/384233.html SQL注入攻击: (1) 脚本注入式的攻击(2) 恶意用户输入用来影响被执行的SQL脚 ...
- js的全局变量与var关键字
var a = '1'; 如果定义在函数外,就是全局变量.如果定义在函数内,就不是全局变量,只能在函数内调用. 但是:如果在函数内定义变量,没有加var关键字,默认表示该变量是全局的.
- 如何在linux安装ruby2.2.2+
背景: 想搭建redis集群但是提示需要ruby2.2.2+ 直接使用yum安装 yum -y install ruby ruby-devel rubygems rpm-build 使用ruby -v ...
- auto_ptr的VC版本源码剖析
auto_ptr是当前C++标准库(STL)中提供的一种智能指针,包含于头文件 #include<memory> .auto_ptr 能够方便的管理单个堆内存对象,在你不用的时候自动帮你释 ...
- Linux - XShell - alt 快捷键的设置
1. 概述 命令行的 alt 快捷键可能会冲突 2. 环境 os win10 centos7 xshell xhell6 3. 场景 开启 centos7 虚拟机 在 win10 打开 xshell6 ...