Vue+ElementUI学习总结(转载)
Vue框架简介
Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合。是基于MVVM(Model-View-ViewModel)设计思想。提供MVVM数据双向绑定的库,专注于UI层面
View就是DOM层,ViewModel就是通过new Vue()的实例对象,Model是原生js。开发者修改了DOM,ViewModel对修改的行为进行监听,监听到了后去更改Model层的数据,然后再通过ViewModel去改变View,从而达到自动同步。
Vue核心思想
1.数据驱动
数据驱动(数据双向绑定), 在Vue中,Directives对view进行了封装,当model中的数据发生变化时,Vue就会通过Directives指令去修改DOM,同时也通过DOM Listener实现对视图view的监听,当DOM改变时,就会被监听到,实现model的改变,从而实现数据的双向绑定。
2.组件化
组件化就是实现了扩展HTML元素,封装可用的代码。
1、页面上每个独立的可视/可交互区域视为一个组件。
2、每个组件对应一个工程目录,组件所需的各种资源在这个目录下就近维护。
3、页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面
vue项目目录结构
(加粗的常会修改到)
--build项目构建(webpack)相关代码
--config配置目录,包括端口号等。我们初学可以使用默认的。
--node_modulesnpm 加载的项目依赖模块
--src这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。main.js: 项目的核心文件。引用组件时需要修改。
--static静态资源目录,如图片、字体等。
--test初始测试目录,可删除
--.xxxx文件这些是一些配置文件,包括语法配置,git配置等。
--index.html首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
--package.json项目配置文件。
--README.md项目的说明文档,markdown 格式
Vue项目构建命令
npm install 安装项目依赖包
npm run dev/npm run serve 启动项目
Vue常用命令
与写html页面一样,只是都是用组件。里面用到的<el-radio>就是elment-ui提供的组件。相当于<radio>按钮选择直接使用就可以,跟html里用法一样。
数据展示命令:
v-html、v-show、v-if、v-for等等,例如v-for命令相当于html里的for循序遍历List中的数据,v-if命令相当于if判断满足条件执行,v-show相当于html里的disable参数。v-html将数据里定义的html页面赋值给view
数据绑定最常见的形式就是使用 {{变量名}}(双大括号)的文本赋值;变量即是后台返回的数据。
绑定按钮事件:
@click可以定义一个事件函数
将事件写到methods包含的大括号内
Vue路由(Vue-Router)
控制页面的局部跳转刷新,相当于MVC框架中的controller中的定义的@requestMapping注解配置跳转页面
路由配置文件在项目中的src目录下
Element-UI使用
项目集成
使用方法同layui,使用比layui厉害
常用的组件总结:
<el-input>标签相当于input框;
<el-radio>标签相当于radio框;
<el-chekbox>标签相当于chekbox框;
<el-upload>标签相当于file上传文件;
<el-form>定义表单,<el-form-item>定义表单中的项;
<el-table></el-table>定义表格相当于table,<el-table-column>定义一行,相当于<td>,可以绑定数据,动态显示表格
总的来说,就是将原有的html标签封装了一遍,使用方法大同小异。例如:点击事件的定义不同
Vue+ElementUI学习总结(转载)的更多相关文章
- Vue组件学习(转载)
什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...
- spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子 感觉还是可以用的 第一步是完成了 果断 拿过来 放到我这里这 下面直接是连接 点进去 就可以用啊 本想着不用vue 直接导入连接 ...
- VUE + ElementUI 从搭建到运行
版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 前言:本文简洁的描述VUE + ElementUI 从搭建到运行,可以根据本文先搭建出可运行的项目,然后再详细回顾每个步骤所做的事: ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
- Vue + Element-ui实现后台管理系统(4)---封装一个ECharts组件的一点思路
封装一个ECharts组件的一点思路 有关后台管理系统之前写过三遍博客,看这篇之前最好先看下这三篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system ...
- Vue + ElementUI 后台管理模板推荐
最近学习和项目都用到了Vue和ElementUI,自己不是专业前端,搞这些UI上的东西还是有些难度,这里推荐两个Vue + ElementUI后台管理模板 vue-element-admin vue- ...
- Vue入门学习
目录 Vue 简介 第一个Vue程序 Vue基本语法 双向绑定 组件 Axios异步通信 计算属性 Slot 自定义事件 第一个Vue-cli程序 webpack学习使用 Vue-Router路由 v ...
- vue入门学习(基础篇)
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
随机推荐
- Zookeeper入门(六)之zkCli.sh对节点的增删改查
参考地址为:https://www.cnblogs.com/sherrykid/p/5813148.html 1.连接 在 bin 目录下的 zkCli.sh 就是ZooKeeper客户端 ./z ...
- 请描述一下 BroadcastReceiver?
BroadCastReceiver 是 Android 四大组件之一,主要用于接收系统或者 app 发送的广播事件. 广播分两种:有序广播和无序广播. 内部通信实现机制:通过 Android 系统的 ...
- [Flask]通过render_form快捷渲染表单
依赖: Bootstrap-Flask 实例化方式与flask_bootstrap相同. 关于render_form(): Bootstrap-Flask内置了两个用于渲染WTForms表单类的宏,r ...
- 阶段3 2.Spring_03.Spring的 IOC 和 DI_1 ioc的概念和作用
IOC的含义 new的方式创建对象,是主动去找对象.对我的资源独立就变的很难,因为这有明显的依赖关系 第二种方式创建对象.app断开了和资源的联系,.而是去找工厂要一个资源.由工厂负责和资源去的联系, ...
- 清除陷入CLOSE_WAIT的进程
netstat -nap |grep :8009|grep CLOSE_WAIT | awk '{print $7}'|awk -F"\/" '{print $1}' |awk ' ...
- java:LeakFilling(Spring)
1.配置文件总结: bean节点: id:用户自定义名称,用于标识当前对象,可以通过getBean(String id)从容器中获取该对象. class:要交给spring容器创建的对象的全类名(包名 ...
- 深入理解Istio核心组件之Pilot
Istio作为当前服务网格(Service Mesh)领域的事实标准,流量治理(Traffic Management)是其最为基础也最为重要的功能.本文将结合源码对Istio流量治理的实现主体——组件 ...
- Centos 6.5 磁盘修复 破解删除root密码
起因:由于存储设备故障.导致虚拟机断开.恢复后虚拟机无法启动,发现报磁盘损坏,需要运行fsck运行 问题解决思路: 1.虚拟机无法启动,所以需要进入系统进行修复 2.root密码是自动修改的.由于虚拟 ...
- TortoiseGit 中文汉化
TortoiseGit程序以及中文汉化包:https://tortoisegit.org/download/ TortoiseGit程序: 汉化包:
- 剑指OFFER数据结构与算法分类
目录 数据结构 算法 数据结构 数组 有序二维数组查找 数组相对位置排序 数组顺时针输出 把数组排成最小的数 数组中的逆序对 扑克牌顺子 数组中重复的数字 构建乘积数组 链表 链表反向插入ArrayL ...