<!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. nodejs 通过 get获取数据修改redis数据

    如下代码是没有报错的正确代码 我通过https获取到数据 想用redis set一个键值存储 现在我掉入了回调陷阱res.on 里面接收到的数据是data 里面如果放入 client.on('conn ...

  2. 关于thinkphp 命令行

    很多人做多年开发只懂得PHP能在浏览器下运行或者只能结合APACHE等WEB服务器运行,却不晓得,PHP也能用命令行执行,或许是由于大多人在WINDOWS平台做开发部署运行,比较少接触LINUX. T ...

  3. CodeForcesEducationalRound40-D Fight Against Traffic 最短路

    题目链接:http://codeforces.com/contest/954/problem/D 题意 给出n个顶点,m条边,一个起点编号s,一个终点编号t 现准备在这n个顶点中多加一条边,使得st之 ...

  4. mysql去掉密码规则的两种方式

    环境介绍:centeros 7 + mysqld5.7 当我们装完数据库以后,使用临时密码登录到数据库去更改一个简单的密码,如 set password='; 结果出现以下提示: ERROR (HY0 ...

  5. Linux中常用命令（文件）

    1.cat 显示出文件的全部内容 (1)格式:cat 文件名 -n 显示行号 (2)特点:一次性显示所有文件内容 2.tac 从最后一行倒着显示文件全部内容 3.more 全屏方式分页显示文件内容 回 ...

  6. webStrom的破解以及汉化

    破解方法: 把JetbrainsCrack-3.1-release-enc.jar包放到bin目录下,然后把webstorm64.exe.vmoptions文件用文本打开, 在最后面加上一句-java ...

  7. 洛谷 P3467 [POI2008]PLA-Postering

    P3467 [POI2008]PLA-Postering 题目描述 All the buildings in the east district of Byteburg were built in a ...

  8. 【VBA研究】用VBA取得EXCEL随意列有效行数

    作者:iamlaosong 用VBA对Excel文件进行处理的时候,keyword段的列号编程时往往是不知道的.须要通过參数设定才干知道,因此.我们编程的时候,就不能用这种语句取有效行数: linen ...

  9. BZOJ 1578 DP

    思路:裸的完全背包 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> ...

  10. 最长回文子串 hihocode 1032 hdu 3068

    最长回文 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...