前端三驾马车 (Angular React Vue ) Vue 2.x
- 前端是什么? 渐进式框架 数据驱动 简化dom操作
Vue能做什么?
- PC端:网站,后台管理
- 移动端:移动web,app ,weex,原生应用
Vue特性
- 易用: Html,Css,Javascript
- 灵活:库和框架之间伸缩自如
- 高效:运行大小20kb;虚拟dom
使用
- 1.导入vue.js 使用cdn连接 beta.0表示测试版本(不稳定不建议使用) 最新的稳定版本2.5.16
- 2.创建id为app的html标签(View层)
插值表达式 {{message}}
- 3.创建Vue的实例vm (VM层); data:{}是Model层;
// 2.MVVM中View-Model层
var vm=new Vue({
el:"#app",//告诉Vue实例解析哪个内容
data:{//MVVM中Model层
message:"Hello Vue"//事件驱动:改变这里的值 页面的显示值也会改变
}
});
MVVM与MVC工作原理
- MVC: Model:模型层对数据的操作;View:视图层 html的结构;Controller:控制层 数据改变后先传给C层,再传给V层,V层数据变化后,先提交C层,再提交给M层进行数据的增删改查;
- MVVM:Model模型层;V:View视图层;VM:View-Model控制层; —>可以到达模块的复用,减小代码的体量
- 数据源在本页面或本模块中共享
指令 简化dom操作(以v-开头;除了{{插值表达式}}
写在标签属性中)
- {{}} v-text:显示普通文本; v-html :能解析模型中带有html标签的字符串
v-on 事件
v-on:click 简写@
clickv-bind 绑定;—后面的数值需要改变用绑定 简写
:
;单向事件:绑定从模型到视图v-model 双向事件绑定(input radio checkbox) —-获取form表单值
- 模型–>视图
- 视图–>模型
v-if & v-show 必须给它绑定布尔类型的model
v-if:为true时,创建dom;false时,dom元素被删除
v-show:为true时,dom元素创建出来,并显示出来(display:block);为false时,通过样式控制display:none,但dom元素还在;v-for 列表渲染
v-for="item in Arr"
,也可以用对象; 就地复用:把上一个复制,改变值变成下一个,所以应该带key,方便后续操作- key绑定index索引;
:key="index"
- key绑定index索引;
ES6
- const 定义常量
- let 定义变量
- ES6对象中函数可以简写 methods:function(){} 等于 methods(){}