<!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. C#共享WIFI能通过代码控制给连接的移动端分配IP么

    用C#创建了一个虚拟WIFI,但是能不能通过代码来给连接上的移动端分配各自的IP.之前都是自动分配的IP.望大神们赐教 C#共享WIFI能通过代码控制给连接的移动端分配IP么 >> csh ...

  2. 外媒分析：iPhone销量低于预期是中国市场疲软影响的

    根据外媒AppleInsider的报道,来自摩根士丹利(Morgan Stanley)的Katy Huberty是最新一位下调苹果目标股价的分析师,她在报告中写道,iPhone的销量低于预期,主要是因 ...

  3. dstat---统计磁盘，CPU，IO，等相关信息

    dstat命令是一个用来替换vmstat.iostat.netstat.nfsstat和ifstat这些命令的工具,是一个全能系统信息统计工具.与sysstat相比,dstat拥有一个彩色的界面,在手 ...

  4. vuex 闲置状态重置方案

    前言 大型单页应用(后面都是指spa),我们往往会通过使用状态管理器 vuex 去解决组件间状态共享与状态传递等问题.这种应用少则几十个单页,多则上百个单页.随着路由的频繁切换,每个路由对应的 vue ...

  5. Win10+TensorFlow-gpu pip方式安装，anaconda方式安装

    中文官网安装教程:https://www.tensorflow.org/install/install_windows#determine_how_to_install_tensorflow 1.安装 ...

  6. 如何使用Java创建Excel(.xls 和 .xlsx)文件 并写入数据

    1,需要依赖的jar包, <!-- POI(operate excel) start --> <!-- the version of the following POI packag ...

  7. CSU 1364 Interview RMQ

    题意: 瑶瑶有一家有一家公司,最近他想招m个人.因为他的公司是如此的出名,所以有n个人来参加面试.然而,瑶瑶是如此忙,以至于没有时间来亲自面试他们.所以他准备选择m场面试来测试他们. 瑶瑶决定这样来安 ...

  8. C++函数指针相关 & 类成员的指针 & 成员函数的指针

    有时候会有指向类成员变量或者成员函数的指针,但是注意,这个指针并不是针对一个地址的指向,而更多的是一个偏移. 同时,支持将父类对象的成员 转为 子类对象的成员指针,如下: 反过来,是不行的.因为父类的 ...

  9. 125.C++输入小结

    #include <iostream> #include <iomanip> #include <cstring> #include <cstdlib> ...

  10. Sqoop Export原理和详细流程讲解

     Sqoop Export原理 Sqoop Export详细流程讲解