一,什么是Vue
由前谷歌员工尤雨溪主导开发得一款前端应用开发框架
是目前前端开发市场上,最主流得开发框架之一!
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
- 构建用户界面:侧重于网页开发的
- 渐进式框架:网页中需要的数据,数据的逻辑性处理以及最终网页中的合理渲染进行了良好的支持
- 自底向上(项目规模)逐层应用:从单个网页效果开发、到大型项目应用集成,都进行了完善的支持
- 只关注视图层:作为前端框架,从获取数据之后,专门研究如何更好的服务界面,提高用户体验
- 易于上手:本质上使用的
html/css/javascript
语法, 没有更高的学习成本 - 便于整合:可以和多项主流技术很合开发的成本很低,不需要学习新的结合性技术
- 现代化工具链:第三方提供的各种综合技术,提供功能拓展
- 支持类库:
Vue
生态链 - 单页应用:前端应用一种新的开发模式,整合项目只有一个
HTML网页
总结:Vue是前谷歌员工尤雨溪主导研发的,一款用于前端应用快速构建的,侧重于视图渲染的 应用级框架。
二,为什么要使用Vue
Vue
是现在主流的前端开发框架- 提供DIFF算法支持,优异的视图渲染性能,提高用户的使用体验
Vue
提供了虚拟DOM结构,提高前端视图更新效率Vue
提供了完善的技术生态,极大的提高了前端应用开发效率Vue
同时开发多个版本,包含市场主流版本以及未来的使用趋势
(1),数据渲染
通过代码Vue可以自动将变量数据渲染到网页中
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 使用特殊语法输出一个变量的数据 --> {{ message }} </div> <script src="./vue.js"></script> <script> // 1、创建一个vue对象,设置特定的选项 // el: 全称element,节点、元素、标签的意思;表示将实例对象绑定到哪个标签上 // data: 数据的意思;按照key:value的方式声明当前实例中使用的数据 const app = new Vue({ el: "#app", data: { message: 'hello vue!' } }) </script> </body> </html>
(2),数据绑定
Vue框架,可以自动完成数据的绑定和渲染
Vue框架底层的封装优化了大量的JS DOM操作(影响网页加载性能的最大因素),提高了网页加载和渲染数据的性能,提高了用户使用体验。
(3),实例和选项
Vue应用本质上就是一个实例对象挂载到一个网页中的标签上!
认识实例
<div id="app"> {{ message }} <!-- 展示变量中对应的数据 --> </div> {{ message }} <!-- 只能原样渲染字符串,不能读取变量数据了,超出绑定范围 --> .... <script> // 创建了一个对象 new Vue({ el: "#app", // 对象和标签/元素绑定 data: { message: 'hello vue!' // 对象的数据,在绑定的标签内部使用 } ... }) </script>
认识选项
一个实例对象中,通过各种选项指定/扩展了Vue
应用的功能,通常这些选项会包含如下部分:
el
描述:实例对象挂载标签的选项,本意节点、元素、标签的意思
语法:el: "#app"
注意:el
不要误写成e1 / eI
,本来是element
首字母
data
描述:实例对象中声明的初始数据,按照key:value
键值对的方式声明
语法:data: { key: value, key2:value2, .... }
注意:data
是数据的意思,不要误写成date(日期的意思)
watch
描述:实例对象中,用于声明监听器的选项;
computed
描述:实例对象中,用于声明计算属性的选项;
filters
描述:实例对象中,用于声明过滤器的选项;
methods
描述:实例对象中,用于声明函数的选项;
注意:一旦开始使用Vue
开发项目,用到的各种功能函数不能随便写了,必须写到实例的指定选项中
components
描述:实例对象中,用于声明组件的选项;
more...
三,基本语法
(1)插值表达式
插值表达式,专业术语称为mastach
语法,就是通过两对花括号包含的一个表达式,可以直接执行js表达式
语句,很方便的完成数据和页面的连接
(2)什么是声明式渲染
Vue提供了一种简介的模板语法,在声明变量的同时就已经建立了和视图的双向绑定关系;声明的变量在网页视图中可以得到同步的更新渲染!
(3)指令
描述了一种简单的功能操作,如获取焦点;简单的DOM操作在Vue中统一的被封装成指令进行操作;
v-text 文本渲染指令
v-html 超文本渲染指令
v-once 单次渲染指令
v-show 条件渲染指令
v-if 条件渲染指令
v-bind 属性绑定指令
v-on 事件绑定指令
v-for 列表渲染指令
v-model表单数据绑定指令