<!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. 关于iOS适配问题

    大家都知道在iOS开发当中对于UI适配问题可以从如下两个方面去考虑: 1.比例适配 2.利用autolayout自动布局 通常情况来说,利用auto自动布局是一个比较好的方案,开发者可以利用story ...

  2. Spring MVC 核心架构图

    架构图对应的DispatcherServlet核心代码如下: //前端控制器分派方法 protected void doDispatch(HttpServletRequest request, Htt ...

  3. spinlock参考资料

    spinlock:http://irl.cs.ucla.edu/~yingdi/web/paperreading/smp_locking.pdf

  4. 通俗易懂的Git使用入门教程

    原文链接:点我 首先新司机接触 Git 和 Github 可能会搞不清楚两者之间的关系,这里稍微解释一下: 1.Git是一款免费.开源的分布式版本控制系统 2.Github是用Git做版本控制的代码托 ...

  5. [洛谷P1119][codevs1817]灾后重建

    题目大意:有n个村庄和一些连通两个村庄的双向道路.每个村庄在一个特定的时间修复.没有修复的村庄不能经过.现在有一系列询问,问两个村庄在t时刻的最短路(如果无法到达或两个村庄本身未修复,输出-1). 解 ...

  6. [NOIP2015提高组]子串

    题目:洛谷P2679.Vijos P1982.codevs4560.UOJ#149. 题目大意:有长度为n的A串和长度为m的B串.现在要从A串中取出k个互不重叠的子串,使它们按顺序相连后得到B串.问有 ...

  7. Unity经验之谈

    1.全屏与非全屏之间的切换 if (Input.GetMouseButtonDown(1)) { Screen.fullScreen = !Screen.fullScreen; } 2.Camera适 ...

  8. Java基础学习总结（21）——数组

    一．数组的基本概念 数组可以看成是多个相同类型数据组合,对这些数据的统一管理. 数组变量属引用类型,数组也可以看成是对象,数组中的每个元素相当于该对象的成员变量. 数组的元素可以是任何数据类型,包括基 ...

  9. 【python下使用OpenCV实现计算机视觉读书笔记2】图像与字节的变换

    import cv2 import numpy import os # Make an array of 120,000 random bytes. randomByteArray = bytearr ...

  10. vim基础学习之EX命令

    :tabnew -创建新标签 :split(sp)-垂直分割窗口 如果没有打开新的文件,那么会打开原来窗口的文件 :vsplit(vsp)-水平分割窗口 如果没有打开新的文件,那么会打开原来窗口的文件 ...