在本文中，我们将为您详细介绍js技术很好，如何快速掌握vue和elementui的相关知识，并且为您解答关于js和vue先学哪个的疑问，此外，我们还会提供一些关于elementUI+vue+直接引用v
在本文中，我们将为您详细介绍js技术很好，如何快速掌握vue和elementui的相关知识，并且为您解答关于js和vue先学哪个的疑问，此外，我们还会提供一些关于elementUI + vue + 直接引用vue和element css和js 菜单组件递归、Vue和element-ui结合的简单使用、vue和elementui有什么区别、[javascript] vue和elementui中的键盘事件的有用信息。
本文目录一览：- js技术很好，如何快速掌握vue和elementui（js和vue先学哪个）
- elementUI + vue + 直接引用vue和element css和js 菜单组件递归
- Vue和element-ui结合的简单使用
- vue和elementui有什么区别
- [javascript] vue和elementui中的键盘事件
js技术很好，如何快速掌握vue和elementui（js和vue先学哪个）
js基础很好，vue也有一些经验，但无法独立完成webpack脚手架，项目搭建，也不会elementui，学习困难。
请教大神有什么好的办法吗？
谢谢了！
elementUI + vue + 直接引用vue和element css和js 菜单组件递归
<html>
<head>
<title>element-ui demo</title>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-row>
<el-col>
<el-menu@open="handleOpen" @close="handleClose">
<menutree :data="menu_data"></menutree>
</el-menu>
</el-col>
</el-row>
</div>
<template id="menutree">
<div>
<label v-for="menu in data" :key="menu.index">
<el-submenu :index="menu.index" v-if="menu.children">
<template slot="title">
<span>{{menu.name}}</span>
</template>
<label>
<menutree :data="menu.children"></menutree>
</label>
</el-submenu>
<el-menu-item v-else :index="menu.index">
<span slot="title">{{menu.name}}</span>
</el-menu-item>
</label>
</div>
</template>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: ''#app'',
data: function () {
return {
visible: false,
menu_data: [{
"index": "1",
"name": "用户管理",
"children": [{
"index": "1-2",
"name": "用户列表",
"children": [{
"index": "1-2-1",
"name": "用户列表查询",
"children": [{
"index": "1-2-1-1",
"name": "用户列表查询",
"children": [{
"index": "1-2-1-1-1",
"name": "用户列表查询",
"children": [{
"index": "1-2-1-1-1-1",
"name": "用户列表查询"
}]
}]
}]
}]
}]
}, {
"index": "2",
"name": "角色管理"
}, {
"index": "3",
"name": "用户管理"
}, {
"index": "4",
"name": "角色管理"
}]
}
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
},
components: {
menutree: {
template: ''#menutree'',
props: [''data''],
name:''menutree''
}
}
})
</script>
</body>
</html>网上几乎都是模块化(.vue后缀的文件)开发的,感觉前端这些有些高端,玩不好,好像是用命令行弄环境和打包什么的,觉得很麻烦,搞不懂那些,就有点小排斥
不知道还有没有和我一样的,就当记录一下,毕竟copy别人的代码加自己稍稍改动一点,搞出来也花了2-3个小时,以防下次又忘记
Vue和element-ui结合的简单使用
前提
vue在前端技术中使用越来越多，也成为了主流框架，花点时间稍微了解下vue-cli、vue-router结合element-ui的使用。本人使用的是windows系统，后续介绍以windows7系统为例。
1.安装vue-cli
首先保证自己电脑上已经安装过nodejs，是否安装打开cmd，输入 node -v，出现图上这个说明已经安装（未安装的请访问nodejs官网进行下载安装）
安装完成后，打开任意磁盘新建文件夹vue-test，我进入的是F盘，进入vue-test文件夹，按住shift键和鼠标右键会出现
这样可以快捷打开cmd了
国内访问npm比较慢，可以使用淘宝镜像npm，输入命令 ：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后使用命令 cnpm install vue 和 cnpm install vue-cli -g 使用-g的意思是使用全局安装vue-cli
cnpm install vue
cnpm install vue-cli -g
安装完成后就可以初始化vue-cli了
vue init webpack
是不是安装到当前文件夹如果不想可以使用命令
vue init webpack myh5 --安装到myh5文件夹中
模板下载完成后会出现
这两个根据需要，我都取消了
一顿操作后，会继续下载巴拉巴拉一些东西，等等等...
初始化完成后输入命令：
cd myh5 & npm run dev
打开浏览器输入：http://localhost:8081 （端口号8081是我的电脑上使用，每台电脑可能不一样）
生成的文件夹：
每个文件具体解释可以参考：http://www.cnblogs.com/hongdiandian/p/8311645.html
2.结合element-ui
安装element-ui，使用命令(官方给出的安装少了file-loader，导致引用css文件报错，所以一起安装了)：
cnpm install element-ui --save
cnpm install element-theme -g (使用全局安装，后面使用少坑)
cnpm install element-theme-chalk -D
cnpm install file-loader --save初始化element-ui的css文件，输入命令：
et -i会在当前目录生成一个文件element-variables.sass，再次输入命令：
et -o src/theme-et/ --意思是在src/theme-et文件夹下初始化按图打开文件：
在index.js文件里面加入下面代码
import ElementUi from ''elemet-ui''
import ''@/theme-et/index.css''
Vue.use(ElementUi)添加后的文件夹内容：
然后打开 HelloWorld.vue文件将这个div整个删除只剩下<template></template>：
然后加入：
<div>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>完整代码应该是：
保存后打开cmd，输入命令：npm run dev
大功告成啦
刚学习的时候建议关闭eslint，不小心开启了，也可以关闭具体教程
祝大家学习愉快，gogogogo！！！
vue和elementui有什么区别
区别：vue是一套用于构建用户界面的渐进式javascript框架，能让基于网页的前端应用程序开发起来更加方便；而elementui是基于vue实现的一套ui组件库，提供了丰富的pc端组件，减少用户对常用组件的封装，降低了开发的难易程度。
本教程操作环境：windows7系统、
vue是什么
Vue 是一套用于构建用户界面的渐进式 JavaScript 框架 ，开发者只需要关注视图层， 它不仅易于上手，还便于与第三方库或既有项目的整合。
Vue是基于MVVM（Model-View-ViewModel 即：视图层-视图模型层-模型层）设计思想。提供MVVM数据双向绑定的库，专注于UI层面。
立即学习“前端免费学习笔记（深入）”；
elementui是什么
element 是基于 vue 实现的一套不依赖业务的 UI 组件库，提供了丰富的PC端组件，减少用户对常用组件的封装，降低了开发的难易程度。
vue与Element-Ui的区别
1、Element-Ui是基于vue封装的组件库，简化了常用组件的封装，提高了重用性原则；
2、vue是一个渐进式框架：
Vue.js能让基于网页的前端应用程序开发起来更加方便。
vue可以简单写单个页面，也可以写一个大的前端系统。
Vue可以做从简单到复杂的前端单页应用，随处可见的Web前端都可以用Vue来开发。
【相关推荐：《vue.js教程》】
以上就是
![[javascript] vue和elementui中的键盘事件](http://www.gvkun.com/zb_users/upload/2025/03/f0b255bf-d572-47ce-9571-46299edf96a51741078546977.jpg "[javascript] vue和elementui中的键盘事件")
[javascript] vue和elementui中的键盘事件
比如回车事件是:
@keyup.enter.native=""
比如按下事件
@keydown.native=""
当下面不管用的时候加个 .native
@keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起)
获取按键的键码 e.keyCode
@keyup.13 按回车键
@keyup.enter 回车
@keyup.up 上键
@keyup.down 下键
@keyup.left 左键
@keyup.right 右键
@keyup.delete 删除键
总结
以上是小编为你收集整理的[javascript] vue和elementui中的键盘事件全部内容。
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
原文地址：https://blog.51cto.com/u_15274085/2918189
我们今天的关于js技术很好，如何快速掌握vue和elementui和js和vue先学哪个的分享已经告一段落，感谢您的关注，如果您想了解更多关于elementUI + vue + 直接引用vue和element css和js 菜单组件递归、Vue和element-ui结合的简单使用、vue和elementui有什么区别、[javascript] vue和elementui中的键盘事件的相关信息，请在本站查询。
本文标签：
