前端框架|vue、elementUI框架前端|javascript|vue.js

vue只是js框架没有界面的就需要配合ElementUI框架就可以写出漂亮的页面
1.vue.js 注意：方法体里面用分号结束，还有用等号赋值，其他地方逗号结束，冒号定义
还有还有方法里面要用到data里面的数据一定要加this
1.概述：
是一款js框架，对js的语法进行封装简化
官方回答：vue是一款用于构建图形界面的渐进式框架
什么是框架？
已经写好的一套完整解决方案，我们学会用他的语法就可以使用它
2.前端MVVM概念：
MVVM 是 Model-View-ViewModel 的简写
M-model是数据模型，从后端获取的
V-html是视图也就是html
VM-viewModel指的是vue框架，实现视图与数据之间的双向绑定，任一一方改变 vue框架自动更新

文章图片

3.vue.js的优点：
体积小、运行效率高、双向数据绑定、生态丰富、学习成本低
4.vue安装：
方式1：直接即普通模式
直接导入

文章图片

文章图片

文章图片

（用2.x版本就够用了 3.x的版本差距还挺大）

文章图片

vue.js和vue.min.js的区别:没啥区别，区别就是vue.min.js是压缩过的一行没有注释，vue.js没有压缩源码

导入elementUI的css和js 就可以直接使用了

文章图片

（我这里已经把.css和.js导入到css、js文件里面然后link直接引用）
方式2：cli
命令行工具（cli）也就是脚手架（推荐）
1.脚手架的理解：打包、模板、骨架，就是通过脚手架创建项目有一种标准模板标准格式
项目是单文件的即只有一个html 一个配置好了都可以用但有很多组件跳转就是切换组件在html上切换组件
只有一个html 其他都是组件

文章图片

2.cli项目介绍：

文章图片

3.怎么运行：选中项目打开终端输入npm run serve 回车会给两个地址链接到index.html（唯一的html）
4：怎么结束：终端Ctrl+c 敲y
5.打包：终端输入npm run build回车打包项目下面就会出现一个dist目录部署的时候是把dist部署到服务器上

6.创建组件:如登录组件

文章图片

7.组件路由：配置组件（可以实现组件切换）
注册组件为它配置地址切换

配置路由：创建router目录并创建index.js文件在里面配置路由完了导出路由对象

文章图片

全局是main.js 所以还有在main.js里面注册一下

文章图片

让组件显示出来：

文章图片

组件与组件的切换：

文章图片

5.用法（语法）
javascript下在下面先加载标签
1.第一个程序：

文章图片

{{message}}：文本插值表达式不能写语句但可以运算
new Vue({}):创建vue对象
el:数据挂载的dom对象 el："#app"即对象绑定app标签，可以用其他选择器建议用类选择器注意：不能挂在、标签上无效
dtaa:括号里面是键值对的，Vue中用到的数据定义在data中，data中可以写复杂的数据如对象、数组

2.Vue指令
（前缀v-开头表示是Vue提供的特殊属性既然是属性肯定写在开始标签）
1.v-text：设置标签的文本内容不能解析标签
2.v-html：文本内容和标签都能解析
区别：很明显

文章图片

{{}}：不会覆盖标签体的内容，不能解析标签
v-text：会覆盖标签的内容，不解析标签
v-html：会覆盖内容，解析标签

3.v-on：触发事件也可以简写为@
本来这样：

文章图片

按测试1：

文章图片

按测试2：

文章图片

鼠标移入/移出事件：

文章图片

开始：

文章图片

移入：

文章图片

移出：

文章图片

4.v-model：作用设置和获取表单的值双向绑定一改具改

文章图片

向输入框中输入：

文章图片

按滴滴按钮：

文章图片

5.v-show：根据真假切换元素显示状态 true显示/false隐藏原理是修改display 只是隐藏标签还可以显示出来速度快

文章图片

6.v-if：删除标签调的时候再重新加载所以速度慢效果一样
还有个v-else 标签跟v-if写在一起不显示那个就显示这个

文章图片

7.v-bind：为元素绑定属性改变属性
如切换图片
把第一个图片src的地址设置成一个变量（字符串在data里面定义）

文章图片

v-bind：属性 --->简写：属性
为标签的其他属性动态进行数据绑定

8.v-for：作用根据数据生成列表结构，数组经常和v-for结合

直接在标签上进行循环操作

循环下拉框：

文章图片

直接v-for="新数组 in 原来数组" 然后插值表达式输出新数组
循环表格：

文章图片

3.Vue实例生命周期钩子
一个对象从产生到销毁会经历很多阶段 vue有很多生命周期函数
太多了助攻后端做了解
想打开网页就自动触发就写在这类似于onload事件就写在mounted(){}里面

2.ElementUI 1.概述
是一款UI框架（用户图形界面）很多组件都已经封装好了直接用，比如按键表单表格跟vue结合
2.下载element-ui：