官方文档对非模板模式(非 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前端框架"是一个专门设计用于构建自适应多平台浏览器界面的WEB前端框架。这个框架的出现，极大地简化了开发人员在创建现代Web应用时对用户体验和跨平台兼容性的处理。以下是关于OneUI3.1的详细知识点： 1....
下文是Vue的简单使用并使用nginx进行发布。 1.环境：本次实例在windows环境进行，所以首先下载windows环境下的nginx并置于相关目录下，本次实验的nginx版本为1.12.2 2.下载vue.min.js文件，这个请读者自行解决 3....
这个"Vue Element UI 完整版前端框架"提供了完整的源码，意味着你可以深入理解每个组件的工作原理，并根据项目需求进行自定义。 Vue.js 的核心特性包括： 1. **响应式数据绑定**：Vue 使用声明式的数据绑定，使得...
通过Iview前端框架，开发者可以专注于业务逻辑的实现，而无需过多关注UI层面的细节，极大地提高了开发效率和产品质量。同时，Iview的不断更新和维护也保证了其与最新技术趋势的同步，使得开发者能够享受到最新的前端...
H-ui前端框架是一款广泛应用于网页开发的开源UI框架，它为开发者提供了丰富的组件和模板，以便快速构建美观、响应式的Web界面。H-ui的设计理念是简洁、易用，旨在提高开发效率，降低学习成本，同时保持高度的可定制...
Ace Admin 是一个强大的前端框架，专为开发企业级Web应用后台管理系统而设计。这个框架以其高效、可定制性高和用户界面友好而受到广大开发者欢迎。Ace Admin 的核心是基于Bootstrap，一个流行的前端开发框架，这使得...
Easy UI 是一个基于 jQuery 的轻量级前端框架，它的设计目标是简化网页界面的构建，提供丰富的组件和直观的API，让开发者能够快速地创建出美观且功能强大的用户界面。这个框架深受开发者喜爱，因为它极大地提高了...
iView Admin是一款基于Vue.js的前端管理后台集成解决方案，它结合了Vue.js的响应式特性和iView UI组件库的强大功能。Vue.js作为轻量级的JavaScript框架，以其简洁的API和高效的虚拟DOM操作，在单页应用(SPA)开发中...
Ace+Admin前端框架是一款广泛应用在企业级Web应用中的开源UI框架，它结合了Ace和AdminLTE两个优秀的前端组件库，提供了丰富的界面元素、布局选项和交互设计，旨在为开发者提供一个高效、美观且易于定制的开发环境。...
在前端开发领域，`iView` 是一个广受欢迎的 Vue.js UI 框架，它提供了许多优雅且易于使用的组件，极大地提升了开发效率。本文将深入探讨 `iView` 的日历组件，帮助开发者理解其核心功能、用法以及如何在实际项目中...
Ace前端框架是一款强大的开源代码编辑器，主要用于构建富文本编辑器和Web开发工具。它以其高性能、可定制性以及对多种编程语言的强大语法高亮而备受赞誉。Ace框架的源码是用JavaScript编写的，因此它能很好地与...
**H-UI前端框架详解** H-UI是一个专为中国开发者设计的前端框架，它基于流行的Bootstrap框架进行深度改进和扩展，旨在提供更加符合中国用户习惯的界面设计和交互体验。这个框架强调简单、灵活和良好的浏览器兼容性...
H+是一款广受欢迎的响应式前端框架，专为构建现代Web应用而设计。这款框架以其高效、易用和丰富的功能特性，在开发人员中受到了热烈的追捧。它的响应式设计使得网站能够在不同设备上，包括桌面、平板和移动设备，...
4. **TypeScript支持**：作为一款现代化的前端框架，NaiveUI全面支持TypeScript，提供了类型定义文件（.d.ts），这有助于开发者在编码过程中获取强大的类型检查和智能提示，从而减少错误，提高代码质量和可维护性。...
通过以上分析，我们可以看出LigerUI是一个功能完备、易于使用的前端框架，尤其适合那些需要快速开发和维护复杂Web应用的团队。它的JSON数据驱动、响应式设计和强大的组件库等特性，无疑为前端开发带来了很多便利。...
"lay前端练习框架.zip"是一个专为前端学习者设计的实践平台，旨在帮助开发者深入理解和掌握前端框架的使用。这个压缩包包含了一个名为"test"的文件，可能是一个测试目录或者文件，用于存放练习项目或代码示例。 ...
1. **组件系统**：组件化是现代前端框架的核心特性，允许开发者将UI拆分成独立、可复用的模块。这些组件可能包括按钮、表单、导航条、模态框等常见控件，每个控件都有自己的状态和行为，可以独立管理并与其他组件...
".net前端界面框架"则是指专为.NET环境设计的前端框架，如Durandal.js、Aurelia、Blazor等，这些框架能够与.NET后端框架协同工作，提供一套完整的开发解决方案。 ".net 左侧导航"强调了框架在设计时特别考虑了左侧...
1. iview-admin：iview-admin是一款基于Vue.js和iView UI库构建的后台管理系统模板，它提供了一套完整的前端解决方案，包括页面布局、组件使用、路由管理等，大大简化了开发过程。在本项目中，开发者根据iview-admin...
移动APP前端框架是开发现代移动应用的关键组成部分，它允许开发者使用HTML5、CSS3和JavaScript等Web技术构建原生般体验的应用程序。这些框架优化了跨平台开发，减少了为iOS、Android或其他操作系统编写单独代码的...