vue和miniui 一起使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-dmeo</title> <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="http://www.miniui.com/scripts/miniui/miniui.js" type="text/javascript"></script> <link href="http://www.miniui.com/scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css"> <link href="http://www.miniui.com/scripts/miniui/themes/icons.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <search-area :gridet = "ss"></search-area> <home :gridet2 = "ss"></home> <cin :gd = "item" :index="$index" v-for="item in vvdata"></cin> </div> <script type="text/javascript" src="vue.js"></script> <script> var manage = function(){ var searchArea = { template:'<div><input type="text" v-model="searchVal"/><button @click="getMess">按钮</button>{{searchVal}}</div>', data:function(){ return { searchVal:'' } }, methods:{ getMess:function(){ var self = this, g = self.gridet; g.load({id1:3,id2:'abc'}) } }, props:['gridet'] } var home = { template:'<button @click="draw">home按钮</button><div id="datagrid1" class="mini-datagrid" style="width:700px;height:250px;"url="list.txt" idField="id" allowResize="true" sizeList="[20,30,50,100]" pageSize="20">'+ ' <div property="columns">'+ ' <div field="name" name="vname" width="120" headerAlign="center" allowSort="true">姓名</div> '+ ' <div field="sex" width="100" allowSort="true" decimalPlaces="2" dataType="float">性别</div>'+ ' <div field="age" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">年龄</div> '+ ' </div>'+ ' </div> ', data:function(){ return { mess2:"hellow 测试数据11111111111" } }, methods:{ draw:function(){ var self = this, g = self.gridet2; console.log(g); } }, props:['gridet2'], ready:function(){ var self = this; // self.draw(); } } var cin = { template:"<div>{{gd.name}}---{{gd.sex}}---{{gd.age}}</div>", props:['gd'] } return new Vue({ el:"#page", data:{ parentdata:'hh', currentView: 'home', ss:null, vvdata:[ {"name":"zhujiasheng","sex":"boy","age":13}, {"name":"zjs01","sex":"boy","age":23}, {"name":"ztaobao","sex":"boy","age":24} ] }, methods:{ canvals:function(){ var self = this; mini.parse(); var grid = mini.get("datagrid1"); grid.load(); grid.on('drawcell',function(e){ var record = e.record; // console.log(e.column) if(e.column.name = "vname"){ e.cellHtml = "<div onclick='manage.getL()' style='text-align:center;color:#f00;'>"+record.name+"</div>" } }) self.ss = grid; } }, components:{ home:home, searchArea:searchArea, cin:cin }, ready:function(){ var self = this; self.canvals(); } }) }() </script> </body> </html>
vue和miniui 一起使用的更多相关文章
- vue项目 (1) vue结合mini-ui 的使用
1.安装 npm install mini-ui -S 2. 使用 import Vue from 'vue' import App from './App' import router from ' ...
- vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...
- vue框架搭建--移动端
由于Vue官方提供了vue-cli手脚架,所以快速构建出个简单的项目框架.在做移动端项目时,因为移动端的特性可能会用到些比较常用的插件,就在这里简单介绍如何使用 这里只介绍怎么在项目中安装引用和简单的 ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
随机推荐
- C#共享WIFI能通过代码控制给连接的移动端分配IP么
用C#创建了一个虚拟WIFI,但是能不能通过代码来给连接上的移动端分配各自的IP.之前都是自动分配的IP.望大神们赐教 C#共享WIFI能通过代码控制给连接的移动端分配IP么 >> csh ...
- 外媒分析:iPhone销量低于预期是中国市场疲软影响的
根据外媒AppleInsider的报道,来自摩根士丹利(Morgan Stanley)的Katy Huberty是最新一位下调苹果目标股价的分析师,她在报告中写道,iPhone的销量低于预期,主要是因 ...
- dstat---统计磁盘,CPU,IO,等相关信息
dstat命令是一个用来替换vmstat.iostat.netstat.nfsstat和ifstat这些命令的工具,是一个全能系统信息统计工具.与sysstat相比,dstat拥有一个彩色的界面,在手 ...
- vuex 闲置状态重置方案
前言 大型单页应用(后面都是指spa),我们往往会通过使用状态管理器 vuex 去解决组件间状态共享与状态传递等问题.这种应用少则几十个单页,多则上百个单页.随着路由的频繁切换,每个路由对应的 vue ...
- Win10+TensorFlow-gpu pip方式安装,anaconda方式安装
中文官网安装教程:https://www.tensorflow.org/install/install_windows#determine_how_to_install_tensorflow 1.安装 ...
- 如何使用Java创建Excel(.xls 和 .xlsx)文件 并写入数据
1,需要依赖的jar包, <!-- POI(operate excel) start --> <!-- the version of the following POI packag ...
- CSU 1364 Interview RMQ
题意: 瑶瑶有一家有一家公司,最近他想招m个人.因为他的公司是如此的出名,所以有n个人来参加面试.然而,瑶瑶是如此忙,以至于没有时间来亲自面试他们.所以他准备选择m场面试来测试他们. 瑶瑶决定这样来安 ...
- C++函数指针相关 & 类成员的指针 & 成员函数的指针
有时候会有指向类成员变量或者成员函数的指针,但是注意,这个指针并不是针对一个地址的指向,而更多的是一个偏移. 同时,支持将父类对象的成员 转为 子类对象的成员指针,如下: 反过来,是不行的.因为父类的 ...
- 125.C++输入小结
#include <iostream> #include <iomanip> #include <cstring> #include <cstdlib> ...
- Sqoop Export原理和详细流程讲解
Sqoop Export原理 Sqoop Export详细流程讲解