Vue初体验

前端三驾马车 (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 简写@click

• v-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"

ES6

• const 定义常量
• let 定义变量
• ES6对象中函数可以简写 methods:function(){} 等于 methods(){}