![2cff92a9835f678bf3ee5ee8f255f657.png](https://i-blog.csdnimg.cn/blog_migrate/d61446e1727838f47965b96bd9329ac5.png)
Vue框架详解
![2cff92a9835f678bf3ee5ee8f255f657.png](https://i-blog.csdnimg.cn/blog_migrate/d61446e1727838f47965b96bd9329ac5.png)
点击蓝字|关注我们
1
什么是vue框架
一套用于构建用户界面的渐进式框架,(渐进式就是指可以控制一个页面的一个标签,也可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前台项目),并且可以独立完成前后端分离式web项目的javascript框架(构建前端逻辑用,甚至可以直接创建整个项目,无需后端)
1、基础实例成员:
(1)挂载点el:id选择器唯一绑定
(2)插值表达式:{{ 内部可以写基本类型与变量,还可以完成简单运算与逻辑 }}
3、标识符:delimiters修改插值表达式符号(了解)
4、过滤器:filters自定义过滤器,可以串联使用,可以一次性过滤多个变量
5、方法:methods自定义vue控制的方法,给事件指令绑定的
6、基础指令
(1)v-text:基本同{{}}
(2)v-html:可以解析html语法的内容
(3)v-on:v-on:事件="方法" => 系统传参,只默认传$event v-on:事件="方法(event,...)"=>完全自定义传参,可以手动传入event,...)"=>完全自定义传参,可以手动传入event
2
Vue框架的优势
1、有指令(实现分支结构:比如登陆状态;循环结构等),可以实现复用页面
2、有实例成员(过滤器,箭头),可以实现对渲染数据 做二次格式化
3、有组件(模块的复用或组合),快速搭建页面
3
框架特点
1、单页面web应用:只有一个页面,实现页面刷新只刷新数据,页面不动
2、数据驱动:只通过变量驱动,相对应的有一个dom驱动,dom驱动就是原生的js或jq,先获取标签在获取对应的样式等
3、虚拟DOM:vue会将文件中写的所有的页面结构,样式,逻辑存到内存中形成虚拟Dom,我们操作的也是虚拟DOM,然后再映射到真实的DOM,相当于缓存机制,加快了操作速
4、数据的双向绑定:通过全局监听,将多个标签绑定在一个变量上
4
为什么学习vue
前台框架比如:Angular太过庞大,React精通移动端。而vue则吸取前两者的优势,是一个轻量级的js框架,并且他的一手文档是中文,比较友好,还能实现前后端分离开发,节约开发成本
5
DRF框架
1、基础的模块:请求,响应,解析,渲染
2、序列化,三大认证
3、过滤,搜索,排序,分页
4、异常,第三方jwt,restful接口规范
6
搭建vue环境
第一种方式:cdn搭建
![a2842ea9f41e54313c54049dd0b63119.png](https://i-blog.csdnimg.cn/blog_migrate/8991deb8a49e4e948ef963e0bbacda8f.png)
第二种方式:本地导入
![7b2c0da14bc965a1f57f635228c511bb.png](https://i-blog.csdnimg.cn/blog_migrate/e36da683dc51e24657c772f0b6cb9165.png)
注意:
![9237414a7b1a501a9c3e305bf26e3150.png](https://i-blog.csdnimg.cn/blog_migrate/9afbee86aac2e83f4058ef499b846547.png)
Geek
![81b6a7fcaa7ef3a645d138d7dec21535.png](https://i-blog.csdnimg.cn/blog_migrate/a64452f6f740d6a044b1349b7e3f28bb.jpeg)
极客·Geek社团公众号
图文编辑:郑辉
排版推送:郑辉
监制:许雅静