VUE
VUE是一个用MVVM模式来做项目的一个框架
首先 说一下Vue里面的常用指令
1、 v-model:将组件与变量进行双向绑定，当组件数据修改时，变量会随之改变。它后面可加修饰符，例如.lazy，只有在标签中的值发生改变时才同步到变量，.trim过滤用户输入中的空格。
2、v-once:不允许修改数据
3、v-if="表达式"，根据表达式的结果来判断，是true则渲染元素，false则将元素注释掉
4、v-show与v-if类似，true就渲染，但是false并不是注释掉，而是通过display:none;来将元素隐藏，如果需要来回切换，使用v-show更好。
5、v-else、v-else-if与v-if连在一起使用构成逻辑判断，不可以单独或者分开使用
6、v-for用于遍历元素，
7、v-text：向标签内注入数据，并且覆盖标签内的其他内容
8、v-html：向标签内覆盖注入HTML内容作为其子元素
9、v-bind：给标签绑定属性、类、样式等，可以缩写为冒号
10、v-on:给标签绑定函数，可以缩写为@
然后 说一下我们VUE的生命周期钩子函数
beforeCreate：初始化之前
created：初始化完成
beforeMount：挂载之前
mounted：挂载完成之后
beforeUpdate:数据更新之前
update：数据更新之后
beforeDestroy：解除绑定之前
destroyed：解除绑定之后
这就是我们常用的钩子函数
说一下我们的父子组件传值
父组件向子组件传递数据，因为每一个组件都是独立的作用域，所以要把父组件的数据在子组件中显示，要使用props定义属性来绑定父组件里面的数据才可以，父组件不仅可以向子组件传递数据，也可以传递方法
从子组件向父组件传递数据可以使用$emit,把数据传递到方法中
再说一下非父子组件传值
非父子组件之间的通信，必须要有公共的实例（可以是空的），才能使用 $emit 获取 $on 的数据参数，实现组件通信
跨域问题
第一种:
使用JQuery提供的jsonp
第二种
后台更改header
第三种
使用http-proxy-middleware代理解决（项目使用vue-cli脚手架搭建）
路由和二级路由
一级路由： path：'/' 默认为显示;
二级路由： 再一级路由内，用children属性来添加二级路由
懒加载
懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。用v-lazyload
1.
vue-router懒加载定义
当路由被访问的时候才加载对应组件
2. vue-router懒加载作用
当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率。
滑动加载
获得滚动条到底部的距离 getScrollBottomHeight()
绑定滚动事件handleScroll() ，handleScroll()判断滚动条到底部距离是否小于设置的bottomHight，并且增加一个loading属性，防止加载时滑动时多次触发，造成多次加载
Ajax请求load.php，通过Page去查询获得当前页数（page+1）的内容
将获取的内容，push 到list中，完成后Vue 自动渲染新的列表，loading变为false
Vue实例常用属性
（1）数据
data:Vue 实例的数据对象
components：Vue实例配置局部注册组件
（2）类方法computed:计算属性
watch：侦听属性
filters：过滤器
methods:Vue实例方法
render：渲染函数，创建虚拟DOM
2、Vue组件
props:用于接收来自父组件的数据template：组件模板
Element UI
是一套采用 Vue 2.0 作为基础框架实现的组件库，它面向企业级的后台应用，能够帮助你快速地搭建网站，极大地减少研发的人力与时间成本
Container布局容器
这些布局容器，一般充当div来使用。
el-container：外层容器。当子元素中包含 el-header 或 el-footer 时，全部子元素会垂直上下排列，否则会水平左右排列。
el-header：顶栏容器
el-footer：底部栏容器
el-aside：侧边栏容器
el-main：页面主视图
icons的使用
在element-ui 中，图标是用class就可以搞定的。
按钮（el-button）
按钮是el-button来表示的
按钮是分类的，每一种类型就对应不同的button。
按钮的类型type可取值：’primary’、’success’、’warning’、’info’、’danger’
plain：决定了按钮是否使用素色系列。
round：决定了按钮是不是圆角展示。
form表单
element-ui的form表单组件：el-form
element-ui的formItem组件：el-form-item
Table 表格
el-table：element-ui的表格。
el-table-column：element-ui的表格所对应的列。
table属性中：stripe属性可以创建带斑马纹的表格。
table属性中：border属性可以创建带斑马纹的表格。
table属性中：height属性可实现固定表头的表格。
Collapse 折叠面板
折叠面板的el-collapse-item需要title属性。
Navigation 导航
el-menu
el-menu：表示导航菜单的盒子。
el-submenu：表示导航菜单的子盒子选项。
el-menu-item：表示导航菜单的每一项。
其中submenu和munuitem都是用于属性index。
Collapse 折叠面板
折叠面板的el-collapse-item需要title属性。
此文章转自其他大🐮，谢谢。
