• 文章作者:漫漫鱼
  • 发布日期:2018/08/08
  • 推荐:

学习编程的最佳捷径就是拿来先写,写完再体会,否则停留在字面阶段。好了,Telerik说支持Vue,那我先试试。

安装Kendoui

Kendoui 是一套 JavaScript UI 库,感觉就是皮肤做的比较漂亮,Grid 功能也非常强,之前用 jQuery 时使用过,最新版的 Kendo UI 支持了Vue,所以拿这个库测试一下。

安装 Kendo UI Grid 

Grid 用的最多,所以拿 Gird 开始。

安装简单,不用下载什么的,直接 npm,在node.js世界里,只有 npm...

npm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-grid-vue-wrapper

编写模版

下面我们需要写模版和注册组件。

表格的模版

创建一个vue模版,我们在components文件夹下创建一个grid.vue文件,内容如下:

<template>
	<div>
		<Grid :data-source="localDataSource">
		</Grid>
	</div>
</template>

<script>

import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'
import { Grid } from '@progress/kendo-grid-vue-wrapper'

export default {
	name: 'KendoGrid',
	components:{
		Grid
	},
	data: function(){
        return {localDataSource: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18,
                "UnitsInStock": 39,
                "Discontinued": false,
            },
            {
                "ProductID": 2,
                "ProductName": "Chang",
                "UnitPrice": 17,
                "UnitsInStock": 40,
                "Discontinued": false,
            },
            {
                "ProductID": 3,
                "ProductName": "Aniseed Syrup",
                "UnitPrice": 10,
                "UnitsInStock": 13,
                "Discontinued": false,
            }
        ]}	
	}
}
</script>

注册组件

我们需要将自定义的Grid组件注册,打开App.vue文件,修改如下

<template>
  <div id="app">
    <img src="./assets/logo.png" title="hi logo!">
    <hello-world msg="漫漫鱼学习 Vue.js App"/>
	<hello-grid />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import HelloGrid from './components/grid.vue'

export default {
  name: 'app',
  components: {
	  'hello-world':HelloWorld,
	  'hello-grid':HelloGrid
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

重新编译

我们点击编译按钮,cli将自动创建dist文件夹和文件。

Image

运行 demo

我们在浏览器中输入地址,查看到如下结果,出现了 Kendoui 表格。

Image

小结

今天在注册组件的时候花时间看了一下Vue的文档,这块还没有很深的理解,只能靠后面多写代码才能熟悉了。 到今天为止,对Vue的感觉是也挺繁琐的,各种tags,要记住还要理解透彻。其实 Vue 就是制定了一套写前端的规则,所有都需要按照规则写,这样的好处是规范了代码,Vue为了实现这个规则做了高度的抽象,这个可能就是个jQuery的一个区别吧,jQuery的选择器随便你写,找到dom随便你怎么操作。

今天的例子做完了,但是留下几个问题:

  • webpack打了一个20M多的JS,这太大了,它把所有kendoui都打进去了,实际环境应该kendoui单独引用。
  • 目前的数据是固定的数组,实际数据应该来自服务器端的url,如何动态加载,服务端排序等还需要后面继续学习。