热门总结

  • Hyperapp 172 0 1 发布
    简介

    Hyperapp是一个用于开发Web应用程序前端(主要是View部分)的现代JavaScript库,它的大小仅有1.3kB,并且非常容易上手。

    Hyperapp的架构借鉴了React、Redux以及Elm,支持JSX同时也提供了一些JSX的替代方案,比如h函数(Hyperapp的首字母)、hyperapp/html、hyperx、t7。

    Hyperapp的初衷就是以尽量少的代码做尽量多的事。但Hyperapp虽小,仍然包含了状态管理、虚拟DOM引擎,所有这些都是独立实现,不依赖于任何第三方库的。

    导入使用CDN不指定版本 <script src="https://unpkg.com/hyperapp"></script> 指定版本 <script src="https://unpkg.com/hyperapp@1.0.1"></script> HelloWord

    Hyperapp可以使用JSX表示法,以及基于ES6字符串模板的Hyperx表示法。下面两种写法的代码都准备好了,您可以根据自己的喜好自由选用。

    使用JSX<body> <script src="https://unpkg.com/hyperapp@1.0.1"></script> <script src="https://unpkg.com/babel-standalone"></script> <script type="text/babel"> const { h, app } = hyperapp /** @jsx h */ const state = { greeting: "Hello,world" } const actions = {} const view = state => <h1 id="title">{state.greeting}</h1> app(state, actions, view, document.body) </script> </body> 使用Hyperx<body> <script src="https://unpkg.com/hyperapp@1.0.1"></script> <script src="https://wzrd.in/standalone/hyperx"></script> <script> const { h, app } = hyperapp const html = hyperx(h) const state = { greeting: "Hello,world" } const actions = {} const view = state => html`<h1 id="title">${state.greeting}</h1>` app(state, actions, view, document.body) </script> </body>

    浏览器中会发生什么呢?

    浏览器通过CDN下载了Hyperx和JSX,编译并渲染<script>部分,最终在页面上显示了“hello,world”。

  • 解析器 111 0 1 发布

    Benchpress是一个轻量级的超快速模板框架,运行于浏览器和node.js.

    安装

    Benchpress可以作为npm模块使用:

    npm i benchpressjs API

    Benchpress使用AOT )编译模型。 它要求在使用模板之前将模板预编译为Javascript模块。

    precompile.precompile(source, { minify = false, unsafe = false }): Promise<string>

    这个方法将模板源编译为Javascript代码,可以选择将结果压缩为 UglifyJS

    const benchpress=require('benchpressjs'); const template='My favourite forum software is {forum}. This templating engine is written in {language}.'; benchpress.precompile(template, {}).then((precompiled) => { // store it somewhere }); // precompiled output (function (factory) { if (typeof module==='object' && module.exports) { module.exports=factory(); } elseif (typeof define ==='function' && define.amd) { define(factory); } })(function () { function compiled(helpers, context, get, iter, helper) { return'My favourite forum software is '+get(context && context['forum']) +'. This templating engine is written in '+get(context && context['language']) +'.'; } return compiled; }); __express

    这个方法提供了一个快速引擎 API。

    <span></span>const express=require('express'); const app=express(); const benchpress=require('benchpressjs'); const data= { foo:'bar', }; app.configure(function() { app.engine('jst', benchpress.__express); app.set('view engine', 'jst'); app.set('views', 'path/to/compiled/templates'); }); app.render('myview', data, function(err, html) { console.log(html); }); app.get('/myroute', function(res, req, next) { res.render('myview', data); }); render.render(template, data): Promise<string>

    这个方法主要用于解析客户端上的模板。 要使用它,必须使用 .registerLoader(loader) 来设置用于获取已经编译模板模块的回调。

    require(['benchpress'], (benchpress) => { benchpress.registerLoader((name, callback) => { // fetch `name` template module }); benchpress.render('basic', { forum:'NodeBB', language:'Javascript', }).then((output) => { // do something with output }); }); 

    模板语法

    示例数据

    { "animals": [ { "name": "Cat", "species": "Felis silvestris catus", "isHuman": false, }, { "name": "Dog", "species": "Canis lupus familiaris", "isHuman": false, }, { "name": "Human", "species": "Homo sapiens", "isHuman": true } ], "package": { "name": "benchpressjs", "author": "psychobunny", "url": "http://www.github.com/benchpressjs/benchpress" }, "website": "http://burnaftercompiling.com", "sayHello": true } 简单键/值 My blog URL is {website}. The URL for this library is {{package.url}} 条件 <!-- IF sayHello --> Hello world! <!-- END --> <!-- IF !somethingFalse --> somethingFalse doesn't exist <!-- END --> 迭代

    重复HTML块。两个特殊键 @first 和 @last 可以用作布尔值,@index,@key 和 @value 特殊键也可以用。 Benchpress支持迭代对象,在这种情况下 @index 将是当前的循环号,@key 将是当前项的键。 对于普通数组,@key == @index。

    <!-- BEGIN animals --> {animals.name} is from the species {animals.species}. <!-- IF!animals.isHuman --> - This could be a pet. <!-- ENDIF!animals.isHuman --> <!-- END animals -->

    output:

    Cat is from the species Felis silvestris catus. - This could be a pet. Dog is from the Canis lupus familiaris. - This could be a pet. Human is from the species Homo sapiens. 帮助器

    帮助器是用于模板中高级逻辑的JavaScript方法。 这个例子展示了一个名为 print_is_human的函数的简单示例,它将根据 block的当前数据呈现文本。

    benchpress.registerHelper('print_is_human', function (data) { return (data.isHuman) ?"Is human":"Isn't human"; }); <!-- BEGIN animals --> {function.print_is_human} <!-- END animals -->

    output

    Isn't human Isn't human Is human

  • UI 96 0 1 发布

    简介

    List.js是一个非常简单且轻巧的JavaScript库,用来实现列表UI。它可以扩展对现有HTML上的列表项进行搜索和排序,以及在JS端添加项。

    主要功能

    Existing List

    这里例子展示了如何对直接记述在HTML里的「既存列表」执行搜索/过滤/排序

    Existing List + Add

    这里例子展示了如何通过JavaScript端操作对直接记述在HTML里的「既存列表」执行添加项

    New List

    这里例子展示了如何通过JavaScript端操作创建一个新的列表

  • DOM操作 93 0 1 发布
    特点:轻量级但功能强大移动列表项时有动画支持触屏设备和大多数浏览器(IE9及以下除外)支持单个列表容器内部拖拽排序,也支持两个列表容器互相拖拽排序支持拖放操作和可选择的文本非常友善的滚动效果基于原生HTML5中的拖放API支持多种框架(Angular、Vue、React等)支持所有的CSS框架,如:Bootstrap简单的API,方便调用CDN不依赖于jQuery

    下载地址:https://github.com/RubaXa/Sort...
    官方Demo:http://rubaxa.github.io/Sortab...

    范例

    单个列表容器内部拖拽排序

    <head> <script src="~/Scripts/jquery-3.3.1.min.js"></script> <script src="~/Scripts/Sortable-master/Sortable.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var ul = document.getElementById("infos"); var sortable = new Sortable(ul, { handle: "input,li",//设置li、input支持拖拽 animation: 150,//设置动画时长 // Element dragging started onStart: function (/**Event*/evt) { evt.oldIndex; // element index within parent,此处指的是li的索引值 }, // Element dragging ended onEnd: function (/**Event*/evt) { var lis = $("#infos li"); //拖拽完毕后重新设置序号,使其连续 for (var i = 0; i < lis.length; i++) { var no = $(lis[i]).find("input:eq(0)"); no.val(i + 1); } } }); }); </script> <style> li{ cursor:pointer; padding-bottom:5px; list-style:none; } </style> </head> <body> <ul id="infos"> <li> <input type="text" value="1" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">objective</option> <option value="2">proposition</option> </select> </li> <li> <input type="text" value="2" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">eliminate</option> <option value="2">alige</option> </select> </li> <li> <input type="text" value="3" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">optimize</option> <option value="2">deploy</option> </select> </li> </ul> </body>

    两个列表容器相互拖拽排序

    <span style="font-size:14.4px;"><head> <script src="~/Scripts/jquery-3.3.1.min.js"></script> <script src="~/Scripts/Sortable-master/Sortable.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var infosOne = document.getElementById("infosOne"); var sortableOne = new Sortable(infosOne, { group: "guo",//若需要在两个列表容器间拖拽排序,那group的值必须相同 handle: "input,li",//设置li、input支持拖拽 animation: 150,//设置动画时长 // Element dragging started onStart: function (/**Event*/evt) { evt.oldIndex; // element index within parent,此处指的是li的索引值 }, // Element dragging ended onEnd: function (/**Event*/evt) { var lis = $("#infosOne li"); for (var i = 0; i < lis.length; i++) { var no = $(lis[i]).find("input:eq(0)"); no.val(i + 1); } lis = $("#infosTwo li"); for (var i = 0; i < lis.length; i++) { var no = $(lis[i]).find("input:eq(0)"); no.val(i + 1); } } }); var infosTwo = document.getElementById("infosTwo"); var sortableTwo = new Sortable(infosTwo, { group:"guo",//若需要在两个列表容器间拖拽排序,那group的值必须相同 handle: "input,li",//设置li、input支持拖拽 animation: 150,//设置动画时长 // Element dragging started onStart: function (/**Event*/evt) { evt.oldIndex; // element index within parent,此处指的是li的索引值 }, // Element dragging ended onEnd: function (/**Event*/evt) { var lis = $("#infosOne li"); for (var i = 0; i < lis.length; i++) { var no = $(lis[i]).find("input:eq(0)"); no.val(i + 1); } lis = $("#infosTwo li"); for (var i = 0; i < lis.length; i++) { var no = $(lis[i]).find("input:eq(0)"); no.val(i + 1); } } }); }); </script> </head> <body> <ul id="infosOne"> <li> <input type="text" value="1" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">objective</option> <option value="2">proposition</option> </select> </li> <li> <input type="text" value="2" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">eliminate</option> <option value="2">alige</option> </select> </li> <li> <input type="text" value="3" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">optimize</option> <option value="2">deploy</option> </select> </li> </ul> <hr /> <ul id="infosTwo"> <li> <input type="text" value="1" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">目标任务</option> <option value="2">论题议题</option> </select> </li> <li> <input type="text" value="2" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">消除排除</option> <option value="2">机敏的敏捷的</option> </select> </li> <li> <input type="text" value="3" /> <input type="text" value="hierarchy" /> <select> <option value="">--请选择--</option> <option value="1">优化使最优化</option> <option value="2">发布部署</option> </select> </li> </ul> </body>

    常见配置项及事件

    var sortable = new Sortable(el, { group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] } sort: true, // sorting inside list delay: 0, // time in milliseconds to define when the sorting should start touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event disabled: false, // Disables the sortable if set to true. store: null, // @see Store animation: 150, // ms, animation speed moving items when sorting, `0` — without animation handle: ".my-handle", // Drag handle selector within list items filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function) preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter` draggable: ".item", // Specifies which items inside the element should be draggable ghostClass: "sortable-ghost", // Class name for the drop placeholder chosenClass: "sortable-chosen", // Class name for the chosen item dragClass: "sortable-drag", // Class name for the dragging item dataIdAttr: 'data-id', forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag. scroll: true, // or HTMLElement scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling. scrollSpeed: 10, // px setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) { dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent }, // Element is chosen onChoose: function (/**Event*/evt) { evt.oldIndex; // element index within parent }, // Element dragging started onStart: function (/**Event*/evt) { evt.oldIndex; // element index within parent }, // Element dragging ended onEnd: function (/**Event*/evt) { var itemEl = evt.item; // dragged HTMLElement evt.to; // target list evt.from; // previous list evt.oldIndex; // element's old index within old parent evt.newIndex; // element's new index within new parent }, // Element is dropped into the list from another list onAdd: function (/**Event*/evt) { // same properties as onEnd }, // Changed sorting within list onUpdate: function (/**Event*/evt) { // same properties as onEnd }, // Called by any change to the list (add / update / remove) onSort: function (/**Event*/evt) { // same properties as onEnd }, // Element is removed from the list into another list onRemove: function (/**Event*/evt) { // same properties as onEnd }, // Attempt to drag a filtered element onFilter: function (/**Event*/evt) { var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event. }, // Event when you move an item in the list or between lists onMove: function (/**Event*/evt, /**Event*/originalEvent) { // Example: http://jsbin.com/tuyafe/1/edit... evt.dragged; // dragged HTMLElement evt.draggedRect; // TextRectangle {left, top, right и bottom} evt.related; // HTMLElement on which have guided evt.relatedRect; // TextRectangle originalEvent.clientY; // mouse position // return false; — for cancel }, // Called when creating a clone of element onClone: function (/**Event*/evt) { var origEl = evt.item; var cloneEl = evt.clone; } }); 属性group:string or arraysort:boolean
    定义是否列表单元是否可以在列表容器内进行拖拽排序;delay:number
    定义鼠标选中列表单元可以开始拖动的延迟时间;disabled:boolean
    定义是否此sortable对象是否可用,为true时sortable对象不能拖放排序等功能,为false时为可以进行排序,相当于一个开关;animation:number
    单位:ms,定义排序动画的时间;handle:selector
    格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动;filter:selector
    格式为简单css选择器的字符串,定义哪些列表单元不能进行拖放,可设置为多个选择器,中间用“,”分隔;draggable:selector
    格式为简单css选择器的字符串,定义哪些列表单元可以进行拖放ghostClass:selector
    格式为简单css选择器的字符串,当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况,此配置项就是来给这个影子单元添加一个class,我们可以通过这种方式来给影子元素进行编辑样式;chosenClass:selector
    格式为简单css选择器的字符串,当选中列表单元时会给该单元增加一个class;forceFallback:boolean
    如果设置为true时,将不使用原生的html5的拖放,可以修改一些拖放中元素的样式等;fallbackClass:string
    当forceFallback设置为true时,拖放过程中鼠标附着单元的样式;scroll:boolean
    默认为true,当排序的容器是个可滚动的区域,拖放可以引起区域滚动事件:onChoose:function
    列表单元被选中的回调函数onStart:function
    列表单元拖动开始的回调函数onEnd:function
    列表单元拖放结束后的回调函数onAdd:function
    列表单元添加到本列表容器的回调函数onUpdate:function
    列表单元在列表容器中的排序发生变化后的回调函数onRemove:function
    列表元素移到另一个列表容器的回调函数onFilter:function
    试图选中一个被filter过滤的列表单元的回调函数onMove:function
    当移动列表单元在一个列表容器中或者多个列表容器中的回调函数onClone:function
    当创建一个列表单元副本的时候的回调函数

    事件对象在各个函数中略有不同,可通过输出对象查看对象的属性,下面简单列举几个:

    to:HTMLElement--
    移动到列表容器from:HTMLElement--
    来源的列表容器item:HTMLElement--
    被移动的列表单元clone:HTMLElement--
    副本的列表单元oldIndex:number/undefined--
    在列表容器中的原序号newIndex:number/undefined--
    在列表容器中的新序号方法option(name[,value])
    获得或者设置项参数,使用方法类似于jQuery用法,没有第二个参数为获得option中第一个参数所对应的值,有第二个参数时,将重新赋给第一个参数所对应的值;closest()
    返回满足selector条件的元素集合中的第一个项toArray()
    序列化可排序的列表单元的data-id(可通过配置项中dataIdAttr修改)放入一个数组,并返回这个数组中sort()
    通过自定义列表单元的data-id的数组对列表单元进行排序save()destroy()

    声明:本文转载自https://blog.csdn.net/xiaouncl...

  • jquery系 92 0 1 发布

    简介

    easyui 是一种基于 jQuery 的用户界面插件集合。

    easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能。

    使用 easyui 你不需要写很多代码,你只需要通过编写一些简单 HTML 标记,就可以定义用户界面。

    easyui 是个完美支持 HTML5 网页的完整框架。

    easyui 节省您网页开发的时间和规模。

    easyui 很简单但功能强大的。

    官网地址:http://www.jeasyui.com/index.php

    文档地址:

    中文文档英文文档快速入门 弹出对话框 demo

    第一步: 下载 Jquery EasyUI

    你在使用和进行开发时,请遵守官方相应的条款,尊重他们的知识版权。

    目前官方最新版本是:jQuery EasyUI 1.5,官方提供了两个版本供下载,GPL 版本和商业版本,你根据自己的需要下载

    GPL 版本 GPL 版本在 GPl 协议下有效,你能在任何遵循 GPl 协议的项目下使用它。商业版本 商业版在 Commercial 协议下有效,你能在任何非 GPL/专有的协议下使用。

    第二步:创建 html 文件,并添加相关引用

    创建项目的文件夹

    easydemo // 项目根目录 ├── index.html // 我们的测试页面 └── lib // 第三方组件 └── jquery-easyui-1.5.5.2 // 下载的easyui的压缩包解压后的文件夹 ├── easyloader.js // easyui的动态加载组件的js ├── jquery.easyui.min.js // 压缩后的包!!!关键!! ├── jquery.easyui.mobile.js ├── jquery.min.js // 依赖的jq的文件 ├── locale // 本地语言的文件夹 ├── plugins // 拆分的组件 └── themes // 样式主题文件夹

    第三步: 修改 index.html 文件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- easyui的样式,可以选择其他主题 --> <link rel="stylesheet" href="./lib/jquery-easyui-1.5.5.2/themes/bootstrap/easyui.css"> <!-- easyui的图标css文件 --> <link rel="stylesheet" href="./lib/jquery-easyui-1.5.5.2/themes/icon.css"> <!-- easyui 依赖jq --> <script src="./lib/jquery-easyui-1.5.5.2/jquery.min.js"></script> <!-- jq easyui的js脚本 --> <script src="./lib/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script> <!-- 引用语言包 --> <script src="./lib/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script> <title>AICODER jQuery EasyUI Demos</title> </head> <body> <!-- 功能:点击按钮弹出模态对话框 --> <input type="button" value="弹出模态对话框" id="btnOpenDialog"> <!-- 设置弹出来的对话框div,首先设置为隐藏 --> <div id="addDialog" style="display: none;"> <h3>添加的对话框</h3> </div> <script> $(function () { $('#btnOpenDialog').on('click', function () { // 弹出对话框 $('#addDialog').dialog({ modal: true, // 是否是模态对话框 title: 'AICODER全栈实习--添加用户!', // 弹出来的窗口的标题 width: 400, // 窗口的宽度 height: 400, // 窗口的高度 }); }); }); </script> </body> </html>

    结果如下:

    easyui 的布局

    jq easyui 把网页分成了 上、下、左、中、右,分别对应:North、South、West、Center、East。

    easyui 增加了自定义的属性:data-options,通过它可以设置 easyui 组件的选项。

    <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;"></div> <div data-options="region:'south',split:true" style="height:100px;"></div> <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div> <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"> <input type="button" value="弹出模态对话框" id="btnOpenDialog"> </div> </body> 布局区域选项说明选项类型说明默认值regionString所处的方位,可取值:North、South、West、Center、EastnulltitleString区域的标题nullsplitBoolean是否跟其他区域进行分离(增加外边距)falsehrefString从后台获取 html,并显示在此区域nullcollapsibleBoolean是否显示可折叠按钮trueiconClsstringAn icon CSS class to show a icon on panel header.nullminWidthNumber区域的最小宽度10minHeightNumber区域的最小高度10maxWidthNumber区域的最大宽度10000maxHeightNumber区域的最大高度10000布局的方法方法名参数描述resizeparam改变布局的大小. 参数 param 对象可以设置以下属性: 
    width: 布局的宽度.
    height: 布局的高度.collapseregion折叠区域, region 参数可以取值:north,south,east,west.expandregion展开区域面板, region 参数可以取值:north,south,east,west.addoptions添加一个面板removeregion移除一个区域面板, 参数 region 可以取值:north,south,east,west.splitregion移除区域 参数 region 可以取值:north,south,east,westunsplitregion取消移除区域 参数 region 可以取值:north,south,east,west

    例如:

    // 改变大小 $('#cc').layout('resize', { width: '80%', height: 300 }); // 折叠区域 $('#btnCloseEast').click(function () { $(document.body).layout('collapse', 'east'); }); // 展开区域 $('#btnExpandEast').click(function () { $(document.body).layout('expand', 'east'); }); 布局的事件事件名参数描述onCollapseregion当折叠区域的时候触发onExpandregion当展开区域的时候触发onAddregion当添加区域的时候触发onRemoveregion当移除区域的时候触发 // 注册监听事件 $(document.body).layout({ onCollapse: function (region) { $.messager.alert('消息标题', '消息内容:折叠了面板:' + region, 'info'); }, onExpand: function (region) { $.messager.alert('消息标题', '消息内容:展开了面板:' + region, 'warning'); } }); easyui 的消息组件

    easyui提供了丰富的弹出消息框的方法。

    弹出消息框

    $.messager.alert 方法提供了弹出消息的功能,类似window.alert的功能。

    此方法接受的参数:

    参数名说明title显示消息框的标题msg消息内容.icon消息的内容前面的图标,可以用图标名为: error,question,info,warning.fn点击ok按钮后的回调函数

    两种调用模式

    // 第一种: 传入三个字符串参数 $.messager.alert('My Title','Here is a info message!','info'); // 第二种: 传入对象参数 $.messager.alert({ title: 'My Title', msg: 'Here is a message!', fn: function(){ //... } }); 弹出确认对话框

    $.messager.confirm 方法提供了弹出消息的功能,类似window.confirm的功能。

    此方法接受的参数:

    参数名说明title显示消息框的标题msg消息内容.fn点击ok按钮后的回调函数

    两种调用模式

    // 第一种: 传入三个字符串参数 $.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){ if (r){ // 如果用户点击确认,那么 r就是true,否则fals // exit action; } }); // 第二种: 传入对象参数 $.messager.confirm({ title: 'My Title', msg: 'Are you confirm this?', fn: function(r){ if (r){ // 如果用户点击确认,那么 r就是true,否则fals alert('confirmed: '+r); } } }); easyui 的树组件

    easyui 树形菜单(Tree)也可以定义在 <ul> 元素中。

    初始化树有两种方式:

    通过标签初始化

    通过js初始化

    以下是通过js初始化的案例

    $('#tt').tree({ checkbox: true, // 是否显示多选框 data: [{ id: 1, text: '北京', state: 'open', attributes: { url: "/demo/book/abc", price: 100 }, children: [{ id: 7, text: "昌平", checked: true }, { id: 8, text: "朝阳", state: "closed" }] }, { id: 2, text: '山东', state: 'open', attributes: { url: "/demo/book/abc", price: 100 }, children: [{ id: 9, text: "潍坊", checked: true }, { id: 10, text: "青岛", state: "closed" }] },], animate: true, // 节点折叠和展开是否使用动画 lines: true, // 是否显示 节点之间的线条 dnd: true, // 是否可拖拽 });

    结果:

    easyui 表格组件

    表格是easyui里面使用最广的组件。

    DataGrid 数据表格,扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。

    依赖panelresizablelinkbuttonpagination用法 <table id="tt"></table> <script> $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100}, {field:'price',title:'Price',width:100,align:'right'} ]] }); </script> 数据表格(DataGrid)的特性

    其特性扩展自 panel,下列是为 datagrid 增加的特性。

    名称类型说明默认值columnsarraydatagrid 的 column 的配置对象,更多详细请参见 column 的特性。nullfrozenColumnsarray和列的特性一样,但是这些列将被冻结在左边。nullfitColumnsbooleanTrue 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。falsestripedbooleanTrue 就把行条纹化。(即奇偶行使用不同背景色)falsemethodstring请求远程数据的 method 类型。postnowrapbooleanTrue 就会把数据显示在一行里。trueidFieldstring标识字段。nullurlstring从远程站点请求数据的 URL。nullloadMsgstring当从远程站点加载数据时,显示的提示信息。 Processing, please wait…paginationbooleanTrue 就会在 datagrid 的底部显示分页栏。falserownumbersbooleanTrue 就会显示行号的列。falsesingleSelectbooleanTrue 就会只允许选中一行。falsepageNumbernumber当设置了 pagination 特性时,初始化页码。1pageSizenumber当设置了 pagination 特性时,初始化页码尺寸。10pageListarray当设置了 pagination 特性时,初始化页面尺寸的选择列表。[10,20,30,40,50]queryParamsobject当请求远程数据时,发送的额外参数。{}sortNamestring定义可以排序的列。nullsortOrderstring定义列的排序顺序,只能用 asc 或 desc。ascremoteSortboolean定义是否从服务器给数据排序。trueshowFooterboolean定义是否显示一行页脚。falserowStylerfunction返回例如 'background:red' 的样式,该函数需要两个参数:
    rowIndex: 行的索引,从0 开始。
    rowData:此行相应的记录。nullloadFilterfunction返回过滤的数据去显示。这个函数需要一个参数 data ,表示原始数据。 你可以把原始数据变成标准数据格式,此函数必须返回标准数据对象,含有total和 rows特性。nulleditorsobject定义编辑行时的 editor 。 预定义的 editornullviewobject定义 datagrid 的 view 。 默认的 viewnull列(Column)的特性

    DataGrid 的 Column 是一个数组对象,它的每个元素也是一个数组。数组元素的元素是一个配置对象,它定义了每个列的字段。

    名称类型说明默认值titlestring列的标题文字。undefinedfieldstring列的字段名。undefinedwidthnumber列的宽度。undefinedrowspannumber指一个单元格占据多少行。undefinedcolspannumber指一个单元格占据多少列。undefinedalignstring指如何对齐此列的数据,可以用 left、right、center。undefinedsortablebooleanTrue 就允许此列被排序。undefinedresizablebooleanTrue 就允许此列被调整尺寸。undefinedhiddenbooleanTrue 就隐藏此列。undefinedcheckboxbooleanTrue 就显示 checkbox。undefinedformatterfunction单元格的格式化函数,需要三个参数:value: 字段的值。rowData: 行的记录数据。 rowIndex: 行的索引。undefinedstylerfunction单元格的样式函数,返回样式字符串来自定义此单元格的样式,例如 background:red 。此函数需要三个参数: 
    value: 字段的值。 
    rowData: 行的记录数据。 
    rowIndex: 行的索引。undefinedsorterfunction自定义字段的排序函数,需要两个参数: 
    a: 第一个字段值。 
    b: 第二个字段值。undefinededitorstring,object指编辑类型。当是 string 时指编辑类型,当 object 时包含两个特性: 
    type:string,编辑类型,可能的类型是: text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。
    options:对象,编辑类型对应的编辑器选项。undefined columns : [ [ { field: 'itemid', title: 'Item ID', rowspan: 2, width: 80, sortable: true }, { field: 'productid', title: 'Product ID', rowspan: 2, width: 80, sortable: true }, { title: 'Item Details', colspan: 4 } ], [ { field: 'listprice', title: 'List Price', width: 80, align: 'right', sortable: true }, { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', sortable: true }, { field: 'attr1', title: 'Attribute', width: 100 }, { field: 'status', title: 'Status', width: 60 } ] ] 编辑器(Editor)

    用 $.fn.datagrid.defaults.editors 重写了 defaults。

    每个编辑器有下列行为:

    名称参数说明initcontainer, options初始化编辑器并且返回目标对象。destroytarget如果必要就销毁编辑器。getValuetarget从编辑器的文本返回值。setValuetarget , value给编辑器设置值。resizetarget , width如果必要就调整编辑器的尺寸。 $.extend($.fn.datagrid.defaults.editors, { text: { init: function (container, options) { var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container); return input; }, destroy: function (target) { $(target).remove(); }, getValue: function (target) { return $(target).val(); }, setValue: function (target, value) { $(target).val(value); }, resize: function (target, width) { $(target)._outerWidth(width); } } }); 数据表格视图(DataGrid View)

    用 $.fn.datagrid.defaults.view 重写了 defaults。

    view 是一个对象,它告诉 datagrid 如何呈现行。这个对象必须定义下列方法。

    名称参数说明rendertarget, container, frozen当数据加载时调用。target:DOM 对象,datagrid 对象。container:行的容器。frozen:表示是否呈现冻结容器。renderFootertarget, container, frozen这是呈现行脚选项的函数。renderRowtarget, fields, frozen, rowIndex, rowData这是选项的函数,将会被 render 函数调用。refreshRowtarget, rowIndex定义如何刷新指定的行。onBeforeRendertarget, rows视图被呈现前触发。onAfterRendertarget视图被呈现后触发。事件

    其事件扩展自 panel,下列是为 datagrid 增加的事件。

    名称参数说明onLoadSuccessdata当数据加载成功时触发。onLoadErrornone加载远程数据发生某些错误时触发。onBeforeLoadparam发送加载数据的请求前触发,如果返回 false加载动作就会取消。onClickRowrowIndex, rowData当用户点击一行时触发,参数包括: rowIndex:被点击行的索引,从 0 开始。rowData:被点击行对应的记录。onDblClickRowrowIndex, rowData当用户双击一行时触发,参数包括: rowIndex:被双击行的索引,从 0 开始。rowData:被双击行对应的记录。onClickCellrowIndex, field, value当用户单击一个单元格时触发。onDblClickCellrowIndex, field, value当用户双击一个单元格时触发。onSortColumnsort, order当用户对一列进行排序时触发,参数包括: sort:排序的列的字段名order:排序的列的顺序onResizeColumnfield, width当用户调整列的尺寸时触发。onSelectrowIndex, rowData当用户选中一行时触发,参数包括: rowIndex:选中行的索引,从 0 开始rowData:选中行对应的记录onUnselectrowIndex, rowData当用户取消选择一行时触发,参数包括: rowIndex:取消选中行的索引,从 0 开始rowData:取消选中行对应的记录onSelectAllrows当用户选中全部行时触发。onUnselectAllrows当用户取消选中全部行时触发。onBeforeEditrowIndex, rowData当用户开始编辑一行时触发,参数包括: rowIndex:编辑行的索引,从 0 开始rowData:编辑行对应的记录onAfterEditrowIndex, rowData, changes当用户完成编辑一行时触发,参数包括: rowIndex:编辑行的索引,从 0 开始rowData:编辑行对应的记录changes:更改的字段/值对onCancelEditrowIndex, rowData当用户取消编辑一行时触发,参数包括: rowIndex:编辑行的索引,从 0 开始rowData:编辑行对应的记录onHeaderContextMenue, field当 datagrid 的头部被右键单击时触发。onRowContextMenue, rowIndex, rowData当右键点击行时触发。方法名称参数说明optionsnone返回 options 对象。getPagernone返回 pager 对象。getPanelnone返回 panel 对象。getColumnFieldsfrozen返回列的字段,如果 frozen 设定为 true,冻结列的字段被返回。getColumnOptionfield返回指定列的选项。resizeparam调整尺寸和布局。loadparam加载并显示第一页的行,如果指定 param 参数,它将替换 queryParams 特性。reloadparam重新加载行,就像 load 方法一样,但是保持在当前页。reloadFooterfooter重新加载脚部的行。loadingnone显示正在加载状态。loadednone隐藏正在加载状态。fitColumnsnone使列自动展开/折叠以适应 datagrid 的宽度。fixColumnSizenone固定列的尺寸。fixRowHeightindex固定指定行的高度。loadDatadata加载本地数据,旧的行会被移除。getDatanone返回加载的数据。getRowsnone返回当前页的行。getFooterRowsnone返回脚部的行。getRowIndexrow返回指定行的索引,row 参数可以是一个行记录或者一个 id 字段的值。getSelectednone返回第一个选中的行或者 null。getSelectionsnone返回所有选中的行,当没有选中的记录时,将返回空数组。clearSelectionsnone清除所有的选择。selectAllnone选中当前页所有的行。unselectAllnone取消选中当前页所有的行。selectRowindex选中一行,行索引从 0 开始。selectRecordidValue通过 id 的值做参数选中一行。unselectRowindex取消选中一行。beginEditindex开始对一行进行编辑。endEditindex结束对一行进行编辑。cancelEditindex取消对一行进行编辑。getEditorsindex获取指定行的编辑器们。每个编辑器有下列特性:actions:编辑器能做的动作们。target:目标编辑器的 jQuery 对象。field:字段名。type:编辑器的类型。getEditoroptions获取指定的编辑器, options 参数包含两个特性: index:行的索引。field:字段名。refreshRowindex刷新一行。validateRowindex验证指定的行,有效时返回 true。updateRowparam更新指定的行, param 参数包含下列特性:index:更新行的索引。row:行的新数据。appendRowrow追加一个新行。insertRowparam插入一个新行, param 参数包括下列特性:index:插入进去的行的索引,如果没有定义,就追加此新行。row:行的数据。deleteRowindex删除一行。getChangestype获取最后一次提交以来更改的行,type 参数表示更改的行的类型,可能的值是:inserted、deleted、updated,等等。当 type 参数没有分配时,返回所有改变的行。  acceptChangesnone提交自从被加载以来或最后一次调用acceptChanges以来所有更改的数据。rejectChangesnone回滚自从创建以来或最后一次调用acceptChanges以来所有更改的数据。mergeCellsoptions把一些单元格合并为一个单元格,options 参数包括下列特性:index:列的索引。field:字段名。rowspan:合并跨越的行数。colspan:合并跨越的列数。showColumnfield显示指定的列。hideColumnfield隐藏指定的列。

    以下为demo:

    $('#coursett').datagrid({ // url: '/api/course',//rows:一页有多少条,page:请求当前页 title: '课程列表', width: 800, height: 400, fitColumns: true, method: 'GET', // http请求的方法 idField: 'id', // 主键 loadMsg: '正在加载用户的信息...', pagination: true, // 是否用分页控件 singleSelect: false, // 是否是单行选中 pageSize: 10, // 默认一页多少条 pageNumber: 1, // 默认显示第几页 pageList: [10, 20, 30], queryParams: null,//让表格在加载数据的时候,额外传输的数据。 onBeforeLoad: function (param) { // 表格控件请求之前,可以设置相关参数。 // param = {page: 1, rows: 10} param._page = param.page; param._limit = param.rows; param._sort = 'id'; param._order = 'desc'; }, loader: function (param, successfn, errorfn) { $.ajax({ url: '/api/course', data: param, // 恩国际 _page 和_limit type: 'GET', dataType: 'json', success: function (resData, status, xhr) { var total = parseInt(xhr.getResponseHeader('X-Total-Count')); var datagridData = { rows: resData.data, total: total }; successfn(datagridData); }, error: errorfn }); }, onLoadSuccess: function (data) { // 后台请求成功之后,自动调用次方法 console.log(data); }, columns: [[ { field: 'ck', checkbox: true, align: 'left', width: 50 }, { field: 'id', title: '编号', width: 80 }, { field: 'course_name', title: '课程名', width: 120 }, { field: 'author', title: '作者', width: 120 }, { field: 'college', title: '大学', width: 220 }, { field: 'category_Id', title: '分页', width: 120, formatter: function (value, row, index) { return '分类' + value; } } ]], toolbar: [{ id: 'btnDownShelf', text: '添加', iconCls: 'icon-add', handler: function () { } }, { id: 'btnDelete', text: '删除', iconCls: 'icon-cancel', handler: function () { } }, { id: 'btnEdit', text: '修改', iconCls: 'icon-edit', handler: function () { } }], onHeaderContextMenu: function (e, field) { } });

    自定义ajax请求的loader的方法,如下demo是jQuery EasyUI配合后端的json-server返回数据的demo:

    $(function () { $('#dtTable').datagrid({ loadMsg: '正在加载数据中....', emptyMsg: '没有数据', pagination: true, singleSelect: true, striped: true, idField: 'id', checkOnSelect: true, pageNumber: 1, rownumbers: true, pageSize: 10, pageList: [10, 20, 30], method: 'GET', onBeforeLoad: function (param) { // 请求之前还可以对参数进行修改和添加,_limit和_page是json-server的后台参数数据 param._limit = param.rows; param._page = param.page; }, loader: function (param, successCallback, errorCallback) { // 自定义ajax请求加载数据, param是请求的参数 // successCallback:是请求成功后的回调函数 // errorCallback:是请求失败后的回到函数 $.ajax({ url: 'http://localhost:53000/course', data: param, type: 'GET', dataType: 'json', success: function (res, status, xhr) { successCallback({ total: xhr.getResponseHeader('X-Total-Count'), rows: res }); }, error: function (data) { errorCallback(data); } }); }, onLoadSuccess: function (data, status, xhr) { console.log(data); }, columns: [[ { field: 'id', title: '主键', width: 100 }, { field: 'author', title: '作者', width: 100 }, { field: 'author', title: '作者', width: 100 }, { field: 'author', title: '作者', width: 100 }, { field: 'author', title: '作者', width: 100 }, { field: 'college', title: '大学', width: 100, align: 'right' } ]] });; }); easyui 的 Tab 组件

    tab可以直接通过html标签创建。

    <div id="tt" class="easyui-tabs" style="height:250px;" data-options="fit: true"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="display:none;"> tab3 </div> </div>

    其他常用的方法:

    通过js控制添加tab标签 $('#tt').tabs('add',{ title:'New Tab', content:'Tab Body', closable:true, tools:[{ iconCls:'icon-mini-refresh', handler:function(){ alert('refresh'); } }] }); 判断tab是存在 // exists 可以接受一个 tab的索引,或者是tab的title的字符串 $('#tt').tabs('exists', 1); $('#tt').tabs('exists', 'tab1'); 选中某个tab页签 $('#tt').tabs('select', 1); $('#tt').tabs('select', 'tab1'); 获取选中的tab页签

    $('#tt').tabs('getSelected'); // 返回tab的索引


    转载自:https://malun666.github.io/aicoder_vip_doc/#/pages/jqeasyui

  • Hyperapp 87 0 1 发布

    在这里,我们将结合示例介绍如何使用Hyperapp的模块和函数。

    Hyperapp主要提供了两大功能:

    h函数
    生成虚拟DOM的函数app函数
    使用Hyperapp执行应用程序的功能h()

    返回虚拟DOM的函数。 这里的虚拟DOM指的是以JavaScript对象表现的嵌套DOM树。

    name {String}
    「div」等HTML里的标签名props {Object}
    插入元素的属性值children {String | Array}
    子元素 h("a", { href: "#" }, "next page") // return object // { // name: 'a', // props: { // href: '#' // }, // children: 'next page' // } app()

    启动Hyperapp应用程序

    app(state, actions, view, container

    state

    管理应用程序状态的对象。 必需是一个纯JS对象。

    view

    返回虚拟DOM的函数。 以state和actions为参数

    const state = { on: true } const actions = { toggle: () => state => ({ on: !state.on }) } const view = (state, actions) => ( <button onclick={actions.toggle}>{state.on.toString()}</button> ) app(state, actions, view, document.body)

    actions

    定义应用程序行为的函数集合。 actions通常用于更新state。 其返回值通常是一个新的state

    const actions = { setValue: value => ({ value }), addValue: value => state => ({ value: state.value + value }), addValueLater: value => (state, actions) => { setTimeout(() => { actions.addValue(value) }, 1000) } } data
    actions处理(模型更新)所需的数据state
    当前stateactions
    应用程序的原始actions const state = { count: 0 } const actions = { sub: () => state => state - 1, add: () => state => state + 1 } const view = (state, actions) => ( <div> <h1>{state.count}</h1> <button onclick={actions.sub} disabled={state.count <= 0}> - </button> <button onclick={actions.add}>+</button> </div> ) app(state, actions, view, document.body)

    全局事件

    app函数返回的对象包含关联state的原始actions。 与传递给view的ctions相同,调用ctions时state会被更新。

    const state = { x: 0, y: 0 } const actions = { move: () => ({ x, y }) => ({ x, y }) } const view = state => <h1>{state.x + ", " + state.y}</h1> const MyApp = app(state, actions, view, document.body) addEventListener("mousemove", e => MyApp.move({ x: e.clientX, y: e.clientY }) )

    生命周期方法

    虚拟DOM提供了一些生命周期相关的事件

    oncreate
    Elment被加进DOMonupdate
    Element被更新onremove
    在Element从DOM中移除ondestroy
    Element被释放 const node = document.createElement("div") const editor = CodeMirror(node) const Editor = options => { const setOptions = options => Object.keys(options).forEach(key => editor.setOption(key, options[key])) const oncreate = elm => { setOptions(options) elm.appendChild(node) } const onupdate = _ => setOptions(options) return <div oncreate={oncreate} onupdate={onupdate} /> }
  • Vue 84 0 1 发布

    8.1. 前置知识学习npm 学习官方文档推荐资料npm入门npm介绍需要了解的知识点

    package.json

    文件相关配置选项

    npm 本地安装、全局安装、本地开发安装等区别及相关命令

    npm script脚步的基本编写能力

    有时间专门写一个这样的专题,如果需要可以邮件我。malun666@126.com

    webpack基础学习

    官方文档Webpack了解的知识点:webpack的基本配置了解webpack常用的loader: less-loader、sass-loader、 vue-loader、style-loader、css-loader、eslint-loader、babel-loader等熟悉Webpack的webpack-dev-server的基本配置和使用,会配置热更新

    es6语法学习

    阮一峰老师的大作《ECMAScript 6 入门》需要学习的知识点es6的模块机制各种最新语法糖,简写、geter、setter、箭头函数类、继承的心机制 ...

    nodejs基础知识

    知识点学习:文件操作http服务express

    组件化开发思想

    8.2. Vue脚手架工具:vue-cli构建实战项目

    其实如果编写Vue的前端项目,直接使用vue的官方vue-cli构建工具最好用,一个命令就可以直接生成项目的结构和目录。 而且官方需要依赖的包也可以自动配置好,只需要npm instal一下,然后就可以开发测试了。

    8.2.1. vue-cli安装# 安装vue-cli。 安装之前首先确保你已经安装好了nodejs 而且打开命令行 $ npm install -g vue-cli # 校验一下是否安装成功 $ vue -V #=> 2.5.1 我当前的版本是这个,你的可能比这个新 8.2.2. 使用vue-cli初始化项目

    通过以下命令的方式可以创建一个项目文件夹,并初始化对应的文件。

    $ vue init <template-name> <project-name>

    其中template-name可以取以下值,每个值对应不同的项目构建的模板。

    webpack--全功能的Webpack + vueify,包括热加载,静态检测,单元测试webpack-simple--一个简易的Webpack + vueify,以便于快速开始。browserify--全功能的Browserify + vueify,包括热加载,静态检测,单元测试browserify-simple--一个简易的Browserify + vueify,以便于快速开始。

    安装和开发控制台的命令:

    # 如果已经安装,请省略 $ npm install -g vue-cli # 初始化一个webpack全功能包的vue项目,请您把my-project换成你自己的项目名。 $ vue init webpack my-project # 用命令行进入当前项目目录 $ cd my-project # npm安装所有的依赖的包 $ npm install # 运行测试的首页 $ npm run dev 8.2.3. 综合实例开发记录通过vue-cli构建工具初始化项目目录

    安装过程,控制台会问你项目名称是什么?项目描述?项目作者,是否使用eslint校验,是否使用单元测试等....

    我的安装过程如下请参考:

    $ vue init webpack ttl # => 安装webpack模板的项目 ttl(项目名可以随便取) A newer version of vue-cli is available. latest: 2.6.0 installed: 2.5.1 This will install Vue 2.x version of template. For Vue 1.x use: vue init webpack#1.0 ttl ? Project name mydemovue # => 项目名称 ? Project description A Vue.js project # => 项目描述 ? Author malun <malun666@126.com> # => 作者 ? Vue build standalone # => 是否支持单文件组件 ? Use ESLint to lint your code? Yes # => 是否支持ESLint代码校验 ? Pick an ESLint preset Standard # => 校验的标准是什么? ? Setup unit tests with Karma + Mocha? Yes # => 是否使用单元测试 ? Setup e2e tests with Nightwatch? Yes # => 是否使用e2e测试 vue-cli · Generated "ttl". To get started: cd ttl npm install npm run dev Documentation can be found at https://vuejs-templates.github...

    通过上面一系列的命令后,我们就会创建一个webpack配置好的项目包。目录结构如下:

    ttl |--.babelrc #=> babel的配置文件,主要用于转换es6等最新的js语法。 |--.editorconfig #=> 编辑器配置 |--.eslintignore #=> eslint的忽略校验的配置文件 |--.eslintrc.js #=> eslint的配置校验js是否规范的配置文件 |--.gitignore #=> 设置git忽略的管理的文件 |--README.md #=> readme说明文件 |--build/ #=> 自动构建存放的文件地方 |--config/ #=> 当前开发、测试等配置的文件,需要懂点nodejs了啊。 |--index.html #=> 项目的主入口的模板 |--package.json #=> npm的配置文件 |--src/ #=> 源码目录 |--static/ #=> 静态资源存放的目录 |--test/ #=> 测试相关目录 初始化依赖包$ cd ttl #=> 进入上面创建好的项目目录 $ npm install #=> 安装所有的依赖包。 安装过程可能非常长,网络也可能有问题,请耐心等待。 # 安装完成后,可以直接运行测试,如果自动打开浏览器,并跳转到http://localhost:8080/ 说明一切都ok了。 $ npm run dev

    npm 安装的时候经常网会断开,国内的网(哎,说多了都是泪)你懂的。最好能科学上网,或者是用淘宝的npm的镜像

    安装vue-router组件$ npm i -S vue-router

    到项目的

    /src/components/

    目录下创建三个组件文件。

    分别是:

    首页组件

    <template> <div class="home"> <h3>{{ msg }}</h3> </div> </template> <script> export default { name: 'home', // 组件可以有自己的名字。 data () { // 组件的data必须是函数 return { msg: '这里是Home视图' } } } </script> <style scoped> h3 { background-color: #82c; } </style>

    用户首页组件

    <template> <div> <h3>{{ msg }}</h3> </div> </template> <script> export default { // es6的模块导出定义语法,此模块导出默认的对象 name: 'user', // 组件可以有自己的名字。 data () { // 组件的data必须是函数 return { msg: '这里是User视图' } } } </script> <style scoped> h3 { background-color: red; } </style>

    产品组件

    <template> <div class="product"> <h3>{{ msg }}</h3> </div> </template> <script> export default { name: 'product', // 组件可以有自己的名字。 data () { // 组件的data必须是函数 return { msg: '这里是Home视图' } } } </script> <style scoped> h3 { background-color: green; } </style>

    项目的目录结构为:

    ttl |-- src |--|-- Hello.vue |--|-- Home.vue |--|-- Product.vue |--|-- User.vue 创建router对象及配置路由

    在src目录下创建approuter.js文件。 然后添加如下代码:

    import VueRouter from 'vue-router' // 导入路由模块 import Home from './components/Home.vue' // 导入Home组件 import User from './components/User.vue' import Product from './components/Product.vue' export default new VueRouter({ // 定义路由规则对象 routes: [ {path: '/home', component: Home}, {path: '/user/:id', component: User}, {path: '/product/:id', component: Product} ] }) 修改main.js文件 找到src/目录下的main.js文件, 共修改4处,添加路由引用、添加路由规则对象导入、启用路由、将路由键入到Vue中。
    修改此文件为:// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' // +++1、导入路由组件 import router from './approuter' // +++2、导入我们自己写的路由配置文件 // +++ 3、使用路由组件 Vue.use(VueRouter) /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App }, router: router // +++4、添加路由对象 }) 在app.vue中添加路由导航

    最终代码如下:

    <template> <div id="app"> <nav class="top-menu"> <ul > <li v-for="item in menuList"> <router-link :to="item.url">{{ item.name }}</router-link> </li> </ul> </nav> <hr> <div> <router-view></router-view> </div> </div> </template> <script> export default { name: 'app', data: function () { return { menuList: [ { name: '首页', url: '/home' }, { name: '用户', url: '/user/19' }, { name: '产品', url: '/product/20' } ] } } } </script> <style> #app { } .top-menu ul, .top-menu li { list-style: none; } .top-menu { overflow: hidden; } .top-menu li { float: left; width: 100px; } </style>  

    刷新一下浏览器,你将会看到最终的运行结果。


    转载:https://www.cnblogs.com/fly_dr...

    作者:老马