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 ...
随机推荐
- 上传golang 版本SDK
在上传的时候,文件都上传成功了,但是返回的信息里面errcode 404 token 是"".是不是因为我的callbackUrl(随便写的) 写错导致的. 上传golang 版本 ...
- C# fixed语句固定变量详解
相信很多人在这样或那样的项目中,或者无意间看到了fixed语句块,看到之后你肯定会疑问: 1,这个fixed关键字是做什么用的? 2,什么情况下需要该关键字? 3,这个关键字该怎么用? 我相信解决了上 ...
- Python3基础笔记--基础知识
目录: 一.变量问题 二.运算符总结 三.字符串问题 四.数据结构 五.文件操作 一.变量问题 变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间.它自始至终都是在内存中活动,只有指明 ...
- iOS开发—— Couldn't add the Keychain Item
报错:*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Couldn ...
- POJ2104 K-th Number(线段树,二分,vector)
题意 不带修改区间第k小.(n<=100000) 题解 建立线段数和vector数组(vector为当前区间排列之后的序列)(归并) 然后对于每一个询问二分答案. 问题就转化为区间有多少数小于等 ...
- subline Text3 插件安装
--没有解决,换了vscode 安装Package Control 这是必须的步骤,安装任何插件之前需要安装这个 自动安装的方法最方便,只需要在控制台(不是win的控制台,而是subline 的)里粘 ...
- Java基础学习总结(17)——线程
一.线程的基本概念 线程理解:线程是一个程序里面不同的执行路径 每一个分支都叫做一个线程,main()叫做主分支,也叫主线程. 程只是一个静态的概念,机器上的一个.class文件,机器上的一个.exe ...
- Linux查看当前正在执行的进程
Linux查看当前正在执行的进程 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ps PID TTY TIME CMD 2576 pts/0 00:00:00 ...
- hdu4691 Front compression(后缀数组)
Front compression Time Limit: 5000/5000 MS (Java/Others) Memory Limit: 102400/102400 K (Java/Others) ...
- IIS Modules Overview
Introduction The IIS 7 and above Web server feature set is componentized into more than thirty indep ...