Vue.js:是一套用于构建用户界面的渐进式javascript框架。当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue版本发布的时间
- Vue 1.x 2014
- Vue 2.x 2016
Vue是MVVM框架【MVVM是MVC的衍生框架】
MVC
- MVC是一个软件架构思维,它将一个软件分为三个部分
- M Model 数据
- V View 视图
- C Controller 控制器
- MVC衍生
- mvc backbone 【 前端框架 】
- mvp
- mvvm Vue Angular.ts 【 Angular2.0】 ember
MVVM
- M Model 数据
- V View 视图
- VM ViewModel 视图模型
V的变化会反应到VM上,反之同理,也就是vm的改变也会影响V
vue简单使用演示:
通过script标签引入Vue.js
el的作用
1. 为实例vm规定一个使用范围,只能在#app范围内使用
2. 为实例vm提供一个模板
data的作用
1. 规定一个数据
2. data的数据使用范围必须在 #app 内
data 中定义的数据在模板中相当于全局变量,直接使用 .
数据改变,视图也会跟着改变,页面不会刷新。
Vue中为了能够让我们在模板中使用js语法,它提供了一个语法糖,这个语法糖叫做 mustache,别名: 【 双大括号语法 】
Vue有指令和组件系统两个大功能
指令:
- 使用形式:
- 绑定在dom的属性身上
- 为了区别自定义属性,vue提供的指令都携带 v-
- 数据展示
- v-html 非转义输出 , 可以解析 xml类型数据
- v-text
- 条件渲染
- v-if
- v-else-if
- v-else
- 条件展示
- v-show
- v-if vs v-show
- v-if是真正的控制dom的存在与否,v-show 是控制dom的display:none属性
- 如果初始条件都为false,v-if会惰性渲染【 不渲染 】,但是v-show不管条件是什么都会渲染,所以v-show的初始渲染开销较高
- 如果我们要频繁的切换flag,使用 v-show , 反之,使用v-if
简单演示:
数据展示:
- v-html 非转义输出 , 可以解析 xml类型数据
- v-text
- 条件渲染
- v-if
- v-else-if
- v-else
v-bind:单项数据绑定通过操作数据就可以改变V中dom的样式,相当于操作了dom。
1.- 类名的绑定 v-bind【 两种写法 】
- 数组的写法 【推荐 】
- 对象的写法
- 样式的绑定
- 数组的写法 【 推荐 】
- 对象的写法
类名绑定写法:
样式绑定写法:
2.v-model 【 双向数据绑定 】
3.v-on 事件