<!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 一起使用的更多相关文章

  1. vue项目 （1） vue结合mini-ui 的使用

    1.安装 npm install mini-ui -S 2. 使用 import Vue from 'vue' import App from './App' import router from ' ...

  2. vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法

    (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...

  3. vue框架搭建--移动端

    由于Vue官方提供了vue-cli手脚架,所以快速构建出个简单的项目框架.在做移动端项目时,因为移动端的特性可能会用到些比较常用的插件,就在这里简单介绍如何使用 这里只介绍怎么在项目中安装引用和简单的 ...

  4. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  5. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  6. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  7. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  8. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  9. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. UVa 140 Bandwidth【枚举排列】

    题意:给出n个节点的图,和一个节点的排列,定义节点i的带宽b[i]为i和其相邻节点在排列中的最远的距离,所有的b[i]的最大值为这个图的带宽,给一个图,求出带宽最小的节点排列 看的紫书,紫书上说得很详 ...

  2. 十一 模板匹配match template

    一.介绍 1.模板匹配 通俗讲就是以图找图,通过图中的一部分来找它在图中的位置(模板匹配就是在整个图像区域发现与给定子图像匹配的小块区域). 模板匹配是一种最原始.最基本的模式识别方法,研究某一特定对 ...

  3. php八大设计模式之单例模式

    单例模式的好处: 实例化后只得到一个对象,减少内存的开销. 实现单例模式: 提供一个私有的属性用来存储实例后的对象. 禁止外部实例化对象,提供公共的的方法,返回实例化后的对象. 避免继承此类,然后重写 ...

  4. JSunpack-n模拟WireShark拦截文件传输

    前言: 在前面的实验里我们进行了JSunpack-n的安装及其简单使用.JSunpack-n还有另外一些功能须要进行測试试验,由于本人也是刚接触这些东西.本文就当中一个"功能点"进 ...

  5. 减少UIViewController切换的耦合

    我们一般切换UIViewController的时候用的是例如以下代码 #import "UIViewControllerDemo.h" UIViewControllerDemo * ...

  6. Find problem in eXtremeDB

    class table1 { char<8>    f1; char<80>  f2; uint4        f3; uint4        f4; double     ...

  7. Android TextureView简易教程

    如果你想显示一段在线视频或者任意的数据流比如视频或者OpenGL 场景,你可以用android中的TextureView做到. TextureView的兄弟SurfaceView 应用程序的视频或者o ...

  8. js插件---IUpload文件上传插件（包括图片）

    js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...

  9. poj--1237--Drainage Ditches（最大流）

    Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000KB   64bit IO Format: %I64d & %I64u Sub ...

  10. 方便查看线程状况的jsp页面

    此方法来自深入理解java虚拟机一书,用作管理员页面,可以随时用浏览器查看线程堆栈 <%@ page language="java" import="java.ut ...