基于vue.js 2.0,不使用webpack的nodejs服务,只在浏览器上单独使用在Element UI的Tree树形控件
2017-04-13 19:17
1461 查看
Vue.js(读音 /vjuː/,类似于 view)
是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue
采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue
生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
如果你是有经验的前端开发者,想知道 Vue.js 与其它库/框架的区别,查看对比其它框架。Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,它面向企业级的后台应用,能够帮助你快速地搭建网站,极大地减少研发的人力与时间成本。在这个月的 NingJS 上我们开源了这个项目,当时它的文档还没有准备好。今天,经过两周多的完善,
Element UI 的文档正式上线啦!目前它处于 rc 阶段,正式版将于 Vue 2.0 发布后第一时间跟进。 欢迎大家来使用和完善,一起把它做成 Vue 最好的企业级组件库。
Element
UI的Tree树形控件官网例子
http://element.eleme.io/#/zh-CN/component/tree
<el-tree :data="data2" :props="defaultProps" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent"> </el-tree> <script> let id = 1000; export default { data() { return { data2: [{ id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1', children: [{ id: 9, label: '三级 1-1-1' }, { id: 10, label: '三级 1-1-2' }] }] }, { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }, { id: 6, label: '二级 2-2' }] }, { id: 3, label: '一级 3', children: [{ id: 7, label: '二级 3-1' }, { id: 8, label: '二级 3-2' }] }], defaultProps: { children: 'children', label: 'label' } } }, methods: { append(store, data) { store.append({ id: id++, label: 'testtest', children: [] }, data); }, remove(store, data) { store.remove(data); }, renderContent(h, { node, data, store }) { return ( <span> <span> <span>{node.label}</span> </span> <span style="float: right; margin-right: 20px"> <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button> <el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button> </span> </span>); } } }; </script>
只使用浏览器方式运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>树控件测试</title> <!-- 引入样式 --> <link rel="stylesheet" href="/res/css/vue/element-ui-1.2.8.css"> </head> <body> <div id="app"> {{ message }} </div> <div id="treeView"> <el-tree :data="data2" :props="defaultProps" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false" :render-content="renderContent"> </el-tree> </div> <script src="/res/js/vue/vue-2.2.0.min.js"></script> <script src="/res/js/vue/element-ui-1.2.8.js"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: '树控件测试' } }); var treeView = new Vue({ el: '#treeView', data: { baseId:1000, data2: [{ id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1', children: [{ id: 9, label: '三级 1-1-1' }, { id: 10, label: '三级 1-1-2' }] }] }, { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }, { id: 6, label: '二级 2-2' }] }, { id: 3, label: '一级 3', children: [{ id: 7, label: '二级 3-1' }, { id: 8, label: '二级 3-2' }] }], defaultProps: { children: 'children', label: 'label' } }, methods:{ append:function(store, data) { store.append({ id: id++, label: 'testtest', children: [] }, data); }, remove:function(store, data) { store.remove(data); }, renderContent:function(createElement, { node, data, store }) { var self = this; return createElement('span', [ createElement('span', node.label), createElement('span', {attrs:{ style:"float: right; margin-right: 20px" }},[ createElement('el-button',{attrs:{ size:"mini" },on:{ click:function() { console.info("点击了节点" + data.id + "的添加按钮"); store.append({ id: self.baseId++, label: 'testtest', children: [] }, data); } }},"添加"), createElement('el-button',{attrs:{ size:"mini" },on:{ click:function() { console.info("点击了节点" + data.id + "的删除按钮"); store.remove(data); } }},"删除"), ]), ]); } } }) </script> </body> </html>
效果
参考Vue的Render函数,使用createElement的方式重新渲染了树的子节点
https://cn.vuejs.org/v2/guide/render-function.html
相关文章推荐
- 基于vue.js 2.0,不使用webpack,只在浏览器上单独使用Element UI的Table表格控件完成增删改查页面
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- windows下安装nodejs 、webpack及vue.js的基本使用<一>
- 在基于vue的webpack脚手架开发中使用了代理转发,结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办?
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
- 基于webpack和vue.js搭建的H5端框架(其实主要用于Hybrid开发H5端框架,但是依然能够作为纯web端使用)
- vue.js使用webpack发布,部署到服务器上之后在浏览器中可以查看到vue文件源码
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
- 基于vue.js和webpack的Chat示例
- 基于vue.js和webpack的Chat示例
- webpack使用file-loader单独打包js文件
- 使用Nightwatch.js做基于浏览器的web应用自动测试
- 使用Webpack加速Vue.js应用的4种方式
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
- 基于webpack和vue.js搭建的H5端框架