<!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. php基础：define()定义常数函数

    define(); 常量类似变量,不同之处在于: 在设定以后,常量的值无法更改 常量名不需要开头的美元符号 ($) 作用域不影响对常量的访问 常量值只能是字符串或数字 <?php define( ...

  2. 归档备份被删，GoldenGate无法抽取数据

    发生错误如下,源端EXTRACT进程异常中止,查看日志,发现如下错误. 2014-07-23 01:32:13  ERROR   OGG-00446  Oracle GoldenGate Captur ...

  3. 搭建Lvs负载均衡群集

    一.Lvs详解 lvs内核模型 1.模型分析 用户访问的数据可以进入调度器 匹配调度器分配的虚拟IP|IP+端口(路由走向) 根据调度器的算法确定匹配的服务器 2.调度条件:基于IP.基于端口.基于内 ...

  4. 苹果下一代iPhone曝光

    3月23日消息,据9TO5Mac报道,苹果下一代iPhone(以下暂命名为iPhone 11)可能会提供像三星Galaxy S10的PowerShare功能,能为Apple Watch和AirPods ...

  5. ifreq、ifconf

    网络相关的ioctl请求的request参数及arg地址必须指向的数据类型如下表所示: 接口 SIOCGIFCONF SIOCSIFADDR SIOCGIFADDR SIOCSIFBRDADDR SI ...

  6. ArcGIS api for javascript——显示多个查询结果

    描述 本例展示了在重叠的多边形处理查询的一种方式.单击一个石油和天然气的字段来查看地图上的高亮显示.如果仅仅点击一个要素,能够在单击一次来查看包含一些属性的InfoWindow.如果偶然单击到重叠的要 ...

  7. Snail—UI学习之导航视图控制器UINavigationController(系统)

    背景 有一个根视图控制器 然后跳转到第一个界面  第一个界面能够返回到根视图 也能够跳转到第二个视图 第二个视图能够直接返回到根视图 新建三个ViewController    RootViewCon ...

  8. VC双缓冲画图技术介绍

    双缓冲画图,它是一种主要的图形图像画图技术.首先,它在内存中创建一个与屏幕画图区域一致的对象,然后将图形绘制到内存中的这个对象上,最后把这个对象上的图形数据一次性地拷贝并显示到屏幕上. 这样的技术能够 ...

  9. 99.重载[] * -> ->*

    #include "mainwindow.h" #include <QApplication> #include <QPushButton>> //重 ...

  10. 远程带参数POST访问接口，返回数据

    1. string token = GetRequest.GetString("token"); int customer_id = GetRequest.GetInt(" ...