`

前端框架iviewui使用示例之menu

阅读更多
  官方文档对非模板模式(非 template/render 模式)语焉不详,一个简单的例子调了好长时间,贴一下代码,帮助一下同道中人。
  调试代码,注意修改js、css的路径。官方网站可以下载。

<!DOCTYPE html>

<!-- 
 作者:wallimn
 博客:http://wallimn.iteye.com
 时间:2017-11-22
 -->
<html>
<head>
    <meta charset="utf-8">
    <title>iview菜单示例</title>
    <link rel="stylesheet" type="text/css" href="iview/styles/iview.css">
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="iview/iview.js"></script>
	<style type="text/css">
    
</style>
</head>
<body>
<div id="app2">
    <i-menu mode="horizontal" :theme="menuTheme" active-name="1" @on-select="onMenuSelect">
        <Menu-Item name="1">
            <Icon type="ios-paper"></Icon>时事新闻
        </Menu-Item>
        <Menu-Item name="2">
            <Icon type="ios-people"></Icon>时事评论
        </Menu-Item>
        <Submenu name="3">
            <template slot="title">
                <Icon type="stats-bars"></Icon>特邀专家
            </template>
            <Menu-Group title="国际专家">
                <Menu-Item name="3-1">张无忌</Menu-Item>
                <Menu-Item name="3-2">赵 敏</Menu-Item>
                <Menu-Item name="3-3">张三丰</Menu-Item>
            </Menu-Group>
            <Menu-Group title="国内专家">
                <Menu-Item name="3-4">萧 峰</Menu-Item>
                <Menu-Item name="3-5">虚 竹</Menu-Item>
            </Menu-Group>
        </Submenu>
        <Menu-Item name="4">
            <Icon type="settings"></Icon>http://wallimn.iteye.com
        </Menu-Item>
    </i-menu>
    <br>
    <p>修改主题</p>
    <Radio-Group v-model="menuTheme">
        <Radio label="light"></Radio>
        <Radio label="dark"></Radio>
        <Radio label="primary"></Radio>
    </Radio-Group></div>

	<script type="text/javascript">
		var vue = new Vue({
			el:'#app2',
			data:function(){
				return {
	            	menuTheme: 'primary'
				};
	        },
	        methods:{
	            onMenuSelect:function(name){
	            	console.log(name," is clicked!");
	            	if(name==="4"){
	            		window.location.href='http://wallimn.iteye.com';
	            	}
	            }
			}
		});
	</script>
</body>
</html>



总结一下:
1.有些元素要加上i-前缀,官方文档都有提示,如Menu改写为i-menu。但有些不需要加,如Icon,很让人困惑。
2.驼峰写法的元素,要用下划线分开。如MenuItem,要改写为menu-item。
3.查看网页源码,如果自定义元素没有被解析,就是写法不对。
分享到:
评论

相关推荐

    OneUI3.1前端框架

    "OneUI3.1前端框架"是一个专门设计用于构建自适应多平台浏览器界面的WEB前端框架。这个框架的出现,极大地简化了开发人员在创建现代Web应用时对用户体验和跨平台兼容性的处理。以下是关于OneUI3.1的详细知识点: 1....

    一个Vue前端框架使用简单实例

    下文是Vue的简单使用并使用nginx进行发布。 1.环境:本次实例在windows环境进行,所以首先下载windows环境下的nginx并置于相关目录下,本次实验的nginx版本为1.12.2 2.下载vue.min.js文件,这个请读者自行解决 3....

    Iview前端项目框架

    通过Iview前端框架,开发者可以专注于业务逻辑的实现,而无需过多关注UI层面的细节,极大地提高了开发效率和产品质量。同时,Iview的不断更新和维护也保证了其与最新技术趋势的同步,使得开发者能够享受到最新的前端...

    JQUER UI 前端框架

    根据给定的内容,我将为您总结和详细说明JQUER UI(应为DWZ富客户端框架)相关的知识点,这些知识点包括框架的基本概念、主要特性、组件使用、API介绍、以及集成和常见问题解决等。 DWZ富客户端框架是一个基于...

    ace.zip_ace 前端是啥_ace 前端_java 前端_前端框架

    Ace前端框架是一个专门为开发者设计的高效、可定制的前端解决方案,它使得构建各种风格的网站变得轻松快捷。Ace框架在Java开发环境中尤为受欢迎,因为它的跨平台性和与后端技术的良好整合性,使得Java开发者在前端...

    前端开源ui框架

    - **跨平台兼容**:大多数前端框架都考虑了浏览器兼容性,确保在多种环境下运行良好。 - **社区支持**:开源意味着有活跃的社区,开发者可以在遇到问题时寻求帮助,共享解决方案。 - **持续更新与优化**:开源...

    H-UI 前端框架

    **H-UI前端框架详解** H-UI是一个专为中国开发者设计的前端框架,它基于流行的Bootstrap框架进行深度改进和扩展,旨在提供更加符合中国用户习惯的界面设计和交互体验。这个框架强调简单、灵活和良好的浏览器兼容性...

    ace前端框架ace前端框架

    Ace前端框架是一款强大的开源代码编辑器,主要用于构建富文本编辑器和Web开发工具。它以其高性能、可定制性以及对多种编程语言的强大语法高亮而备受赞誉。Ace框架的源码是用JavaScript编写的,因此它能很好地与...

    H+非常火的响应式前端框架

    H+是一款广受欢迎的响应式前端框架,专为构建现代Web应用而设计。这款框架以其高效、易用和丰富的功能特性,在开发人员中受到了热烈的追捧。它的响应式设计使得网站能够在不同设备上,包括桌面、平板和移动设备,...

    LigerUI 前端框架

    通过以上分析,我们可以看出LigerUI是一个功能完备、易于使用的前端框架,尤其适合那些需要快速开发和维护复杂Web应用的团队。它的JSON数据驱动、响应式设计和强大的组件库等特性,无疑为前端开发带来了很多便利。...

    lay前端练习框架.zip

    "lay前端练习框架.zip"是一个专为前端学习者设计的实践平台,旨在帮助开发者深入理解和掌握前端框架的使用。这个压缩包包含了一个名为"test"的文件,可能是一个测试目录或者文件,用于存放练习项目或代码示例。 ...

    jquery-ui 好用的前端框架

    jQuery UI 是一个基于 jQuery JavaScript 库的开源前端框架,专为构建交互式用户界面而设计。它提供了一系列可定制的、易于使用的组件,覆盖了从基本的页面元素操作到复杂的用户交互和动画效果。在网页开发中,...

    .net前端界面框架

    ".net前端界面框架"则是指专为.NET环境设计的前端框架,如Durandal.js、Aurelia、Blazor等,这些框架能够与.NET后端框架协同工作,提供一套完整的开发解决方案。 ".net 左侧导航"强调了框架在设计时特别考虑了左侧...

    移动APP前端框架

    移动APP前端框架是开发现代移动应用的关键组成部分,它允许开发者使用HTML5、CSS3和JavaScript等Web技术构建原生般体验的应用程序。这些框架优化了跨平台开发,减少了为iOS、Android或其他操作系统编写单独代码的...

    jqGrid 前端框架 连接后台实例 java servlet+jsp+mysql

    总的来说,这个实例提供了一个全面的教程,帮助开发者理解如何将前端的jqGrid框架与后端的Java Servlet和MySQL数据库结合起来,实现数据的动态展示和交互。通过学习和实践这个例子,开发者可以掌握前后端数据通信、...

    最新版H+UI前端模板框架

    H+UI是由国人开发的一款基于Bootstrap的高性能前端框架,旨在为开发者提供一套完整的后台管理界面解决方案。它不仅提供了丰富的预定义样式、组件和交互效果,还注重用户体验和性能优化,使得开发者能够快速构建出...

    前端框架Vue期末复习资料

    前端框架 Vue 期末复习资料 Vue 是一个前端框架,提供了许多强大且灵活的功能,以下是 Vue 的一些重要知识点: 1. 生命周期钩子函数 * beforeCreate: 实例创建之前 * created: 实例创建完成后被调用 * ...

    frozenui前端框架

    【frozenui前端框架】是一个专注于移动端UI设计的轻量级框架,它为开发者提供了丰富的组件和样式,便于快速构建美观且响应式的移动应用界面。frozenui以其简洁的代码、良好的可定制性和易用性,在移动端开发领域广受...

    APP前端框架

    在IT行业中,前端框架是构建应用程序用户界面的关键工具,它们为开发者提供了丰富的功能和便捷的API,以提高开发效率和代码质量。"APP前端框架"指的是专为移动应用设计的前端框架,它允许开发者快速创建出高效、响应...

    Layui是一款采用自身模块规范编写的国产前端UI框架

    Layui是一款基于JavaScript开发的国产前端UI框架,它的核心特性是采用了自身的模块规范进行编写,使得代码结构清晰,易于理解和维护。这个框架的设计理念旨在让开发者能够遵循原生的HTML、CSS和JS书写形式,降低了...

Global site tag (gtag.js) - Google Analytics